10.调试代码

在源代码面板，勾选"按已编写/已部署"将文件分组 ,便可以看到未压缩的文件，和在编辑器看到的效果类似却不完全一致，以vue2.x的版本为例，我可以看到当前路由对应的文件以及引用的组件，这很大程度避免了通过编辑器插入debugger，然后热更新等流程，不同的构建配置效果会有差异，也一定程度反馈按需加载、动态路由这些是否起了作用。

对于css文件编辑后立即失效，无需保存，但less文件不会。

对于JS脚本，保存后DevTools不会重新运行脚本，所以只能更改函数内部行为

可以通过以下方式格式化代码

可以通过"设置"=>"实验"=>"Automatically pretty print in the Sources Panel" 使得来源面板自动格式化打开的文件

需要重启Chrome开发者工具

点击行号即可设置断点

当代码执行到此处时，便会终止，进入调试状态

再次点击"1"处行号可以使得下次不再触发断点，同时"4"处的记录也会消失，通过'4'处取消勾选也可以使得下次不再触发断点，但记录仍然保存

"2"处的第一个按钮，和"3"处的第一个按钮效果是一样，都可以跳过当前断点，如果后面没有遇到断点，则退出调试界面，快捷键是F8。

不同的是"3"处的第一个按钮长按可以展开，展开后的第二个按钮可以跳过后面所有断点并执行，展开后的第三个按钮可以让脚本不再向后执行，在此处终止。

"2"处的第六个按钮可以禁用所有断点

"2"处的第七个按钮可以让代码在抛出已捕获或未捕获异常的代码行上暂停，如果你还想暂停捕获的异常以及未捕获的异常，可以勾选"在遇到异常时暂停"

"2"处的第二个按钮和"3"处的第二个按钮效果一致，跳过下一个函数调用，快捷键是F10。相对于"3"处的第五个按钮，单步调用，快捷键F9在执行效果上更能够做到一行一行的移动断点。

因为使用F9你不但会进入函数，还会进入很多不再代码逻辑里的文件，当你遇到一个函数，可以选择"3"处的第三个按钮，进入下一个函数调用，快捷键F11，当你浏览的层级过深时，可以选择'3'处的第四个按钮，跳出当前函数，快捷键Shift + F11。

你也可以在行号上右键，选择'继续执行到此处'。

如果不想代码进入到第三方文件，比如vue、lodash，可选择"向忽略列表中添加脚本"，可以在设置=>忽略列表中进行管理。

在调试过程中可以在编辑器区域预览变量的值，也可以双击修改

在右侧的作用区域能够统一查看，亦可以修改

可以在控制台直接访问这些变量，想在源码面板上看到控制台可以按esc

也可以在监视区域写一些简单的表达式

还可以右键行号"添加条件断点"；只有表达式成立时代码才在此处暂停，'添加日志断点'，打印指定的变量，在一些场景中代替console.log

可以通过调用堆栈查看函数的执行顺序，点击可进行切换

可以右键选择"向忽略列表中添加脚本"从而去掉我们不关心的函数调用，这时候会出现"显示已列入忽略列表的帧"

images001-sourcePanelShowIngoreFrame.png

Chrome106可以通过设置=>忽略列表，勾选"自动将已知的第三方脚本添加到忽略列表"

可以通过右键"重启帧"来再次观察函数行为从而无需重新启动整个流程，注意外层作用域链的值不会被重置。

事件监听器断点

即便不知道具体的代码，也可以通过用户行为来触发断点，比如通过"定时器"检测页面是否存在重复执行的逻辑，

有以下二级类别，展开后还有细分，DOM变更、WebAudio、Worker、XHR、剪贴板、加载、动画、地理定位、媒体、定时器、广告竞价Worklet、拖/放、指针、控制、画中画、画布、窗口、脚本、解析、设备、轻触、通知、键盘、鼠标。

在元素面板中，可以为指定的元素增加断点

代码片段

新建代码片段

然后Ctrl + p，输入"!"就可以选择要运行的代码片段了。

它们可以访问页面的 JavaScript 上下文，您可以在任何页面上运行它们。

11.网络面板

网络面板更多的是确保资源按照预期上传或下载，大多数性能问题与网络活动无关

第一个

录制按钮

此按钮在激活状态才会录制请求，另外网页加载完才打开开发者工具，也不会看到之前的请求

第二个

清除按钮

可以清除现有的网络记录

第三个

过滤按钮

激活后界面会多出一行

过滤文本框支持多种类型过滤，列如输入jpg则会只显示jpg类型的图像文件。输入-jpg则是过滤掉jpg文件本身，相当于勾选的"反转"按钮。 也可以输入正则表达式。

还支持以下形式

• cookie-domain. 显示设置特定cookie 域的资源。
• cookie-name. 显示设置特定cookie 名称的资源。
• cookie-path. 显示设置特定cookie 路径的资源。
• cookie-value. 显示设置特定cookie 值的资源。
• domain. 仅显示来自指定域的资源。您可以使用通配符 ( ) 来包含多个域。例如，.com显示来自所有以 . 结尾的域- 名的资源.com。DevTools 显示了一个使用它遇到的所有域填充自动完成下拉菜单。
• has-response-header. 显示包含指定 HTTP 响应标头的资- 源。DevTools 使用它遇到的所有响应标头填充自动完成下拉列表。
• is. 用于is:running查找WebSocket资源。
• larger-than. 显示大于指定大小的资源，以字节为单位。设置 的值1000相当于设置 的值1k。
  method. 显示通过指定 HTTP 方法类型检索的资源。DevTools 使用它遇到的所有 HTTP 方法填充自动完成下拉列表。
• mime-type. 显示指定 MIME 类型的资源。DevTools 使用它遇到的所有 MIME 类型填充自动完成下拉列表。
• mixed-content. 显示所有混合内容资源 ( - mixed-content:all) 或仅显示当前显示的资源 ( mixed-content:displayed)。
• priority. 显示优先级与指定值匹配的资源。
• resource-type. 显示资源类型的资源，例如图像。DevTools 使用它遇到的所有资源类型填充自动完成下拉列表。
• scheme. scheme:http显示通过不受保护的 HTTP ( ) 或受保护的 HTTPS ( )检索到的资源scheme:https。
• set-cookie-domain. 显示具有与指定值匹配的属性的Set-Cookie标头的资源。DomainDevTools 使用它遇到的所有 cookie 域填充自动完成。
• set-cookie-name. 显示Set-Cookie名称与指定值匹配的标头的资源。DevTools 使用它遇到的所有 cookie 名称填充自动完成。
• set-cookie-value. 显示具有Set-Cookie与指定值匹配的标头的资源。DevTools 使用它遇到的所有 cookie 值填充自动完成。
• status-code. 仅显示其 HTTP 状态代码与指定代码匹配的资源。DevTools 使用它遇到的所有状态代码填充自动完成下拉菜单。
• url. 显示与url指定值匹配的资源。

通过用空格分隔每个属性来同时使用多个属性。使用方式如下：

"隐藏数据网址"，比如"data:"的文件

文件类型过滤模式默认会选中'全部'，单击可切换其它类型，可以按住Ctrl进行多选，ws即websocket

第四个

搜素按钮，点击左侧会多出一个区域，对于判断页面展示数据的来源，定位代码出处文件等很有帮助

第五个

保留日志

勾选后刷新页面，网络面板不会清除上一次的记录

第六个

前端开发常会勾选，可以最大程度保证看到的页面数据是最新的，而非源于各种缓存。

第七个

可以模拟网速，甚至没有网络的状态，例如模拟页面在移动设备的访问速度，注意此设置会影响"手机模式"

注意当你选择了离线模式，会出现特殊的图标