一、部分快捷操作
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等等。修改这些属性后，布局会实时更新。
