让你惊奇的前端调试技巧

一、部分快捷操作

1、控制台：保存堆栈信息( Stack trace )

2、使用命令Command面板

2.1、分析代码的覆盖率：

打开Command面板，如下图搜索“覆盖”，分析首次页面加载过程中哪些代码执行了，那些没有执行，输出一个报告。

选择文件可进一步查看代码的使用分析，红色 = 尚未执行，灰色 = 至少执行了一次。

2.2、元素截图：

输出指定元素的截图，包含隐藏滚动的内容，这个功能挺好用的。

通过Command面板：搜索“截图”，全屏截图、指定节点截图。

元素面板中，选中元素》右键菜单》“捕获节点屏幕截图”。

3、复制元素

快速访问当前元素$0，$0代表在元素面板中选中元素，$1是上一个，支持到$4

copy($0) 控制台中代码复制当前选素

4、快速隐藏、显示该元素

选中元素，按下h快速隐藏、显示该元素。

5、console对象

关于console对象，提供了很丰富的API

6、keys/values

见名知意。功能类似于Object.keys，Object.values

二、DOM调试技巧

当DOM中某个元素移除或者元素属性发生变化的时候我需要打一个断点，但是我不知道是代码里哪一个地方导致它发生变化，或者代码中有多个地方导致它发生变化，我不知道具体是哪一行代码导致它发生变化时，这个时候就需要用上DOM调试了

2.1、使用方法

在开发者工具面板元素/Element中选中元素，鼠标右击调出面板，点击发生中断的条件/Break on，会出现3个选项

子树修改/subtree modifications 当子元素变更时会在导致子元素变更的代码处打上断点
属性修改/attribute modifications 当该元素自身属性变更时，会在属性变更出打上断点
移除节点/node removal 当该元素自身被移除时，会在移除的代码处打上断点

以促销活动管理卡片为例：

首先给要发生变化的dom节点打上断点

点击“增加行”后，触发断点，此时可能会在框架底层操作dom的时候打上断点，但是我们可以在函数调用栈中往上寻找，知道我们代码中调用的地方。

2.2、查询dom树

·查询方式：文本查询/css选择器/XPath(XML路径语言（XML Path Language），它是一种用于在XML文档中定位和选择节点的语言。)

XPath的的使用示例：

选择所有名称为title的节点：//title
选择ID为nav的div标签下的第一个ul标签下的所有li标签：//div[@id='nav']/ul[1]/li

2.3、使用inspect()

可以帮助快速定位并检查DOM中的元素

三、监听

3.1、监听函数

如果某个元素被绑定了事件，但点击时无反应，就可以用monitorEvents来简单判断一下绑定的事件是否触发

3.2、监听变量：活动表达式

当自己需要反复监测一个变量的值时，非常省事且好使

表达式支持以下类型的值：

变量：
- 可以是全局变量或局部作用域内的变量
表达式：
- 任何有效的JavaScript表达式都可以被监视
- 函数调用或方法返回的结果。例如，Date.now() 将返回当前的时间戳，并且这个值会随时间实时更新。
DOM相关：
- document.activeElement：实时跟踪当前文档中获得焦点的元素。
- document.querySelector(selector)：通过CSS选择器高亮任意节点。
- $0：高亮当前所选中的节点。
- $0.parentElement：高亮当前所选中的节点的父节点。

3.3、使用事件监听器断点

当接手一个陌生的功能，需要修改其中的事件逻辑时，我们可以在事件监听器里给修改的事件打上断点，然后忽略掉框架文件，此时手动点击或者双击元素就可以找到代码里的方法名

四、断点调试

4.1、断点错误调试

以打开结算单查看界面报错为例：

打开控制台，选中“在遇到异常时暂停”按钮，并将框架报错文件进行“向忽略列表添加脚本”操作，控制代码运行到报错处

在调用堆栈面板，可以看到比报错信息里更详细的的调用栈，在其中找到调用的入口，进行错误分析

4.2、条件调试

给重复执行超多次的代码的触发加上一个条件，这样可以避免干扰

4.3、日志断点

可以让我们少写 console.log

五、调试样式

当你在页面中使用Grid或Flex布局时，可以在布局面板进行各种操作，方便调试：

可视化编辑：当选中一个使用Grid或Flex布局的元素时，可以在样式面板中看到Grid或Flex布局的可视化编辑器。通过拖动和调整编辑器中的线条和区域，可以实时修改Grid的布局和对齐方式。
属性编辑：除了可视化编辑外，还可以直接编辑Grid或Flex布局的相关属性，如grid-template-rows、grid-template-columns、grid-gap、flex-direction、justify-content、align-items等等。修改这些属性后，布局会实时更新。