Chrome 调试工具【DevTools】详解

前言

JavaScript作为解释性语言，对于Web也来说，它的运行环境是浏览器（主要介绍Chrome），如果每次都是靠console.log()或alert()来打印临时变量进行程序调试，效率就太低了。

当然之前我一直都是这样干的，因为我主要还是开发后端，前端的JavaScript代码编写的不多，还能凑合调试。但当我开发Chrome扩展时，需要编写和调试大量的JS代码，这时候就不得不去掌握使用Chrome开发者工具——DevTools调试JS的技巧，不过学习起来也非常简单。如果你之前没有仔细了解过DevTools，那我相信通过这篇文章的简要介绍，应该能为你打开新世界的大门，感叹Chrome里居然“隐藏”了这么一个强大的工具。

---

认识DevTools

在网页鼠标右击-检查 或者 F12 打开DevTools

选项卡

Chrome浏览器的DevTools为我们提供了十分强大的功能，界面按钮和信息繁多，初次接触的话，不免得有点恐惧。不用担心，接下来我们逐个部分来了解。

名称	描述
Elements	元素面板，查看Web页面的HTML与CSS，最重要的是可以双击元素，对当前页面进行修改
Console	控制台面板,JavaScript输出信息的控制台，在这里可以查看到,JS的错误信息，也可以执行键入的,JS脚本
Sources	源代码面板,我们在这个页面对JS代码进行调试，可设置断点
Network	网络面板,可以明确的查看到访问Web页面所产生的全部请求（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能
Performance	性能面板，记录和查看Web页面在浏览器中运行时的性能表现（注意是运行时，而不是加载时），主要用于发现Web页面运行时性能瓶颈和性能调优
Memory	内存面板，记录执行JS函数对CPU和内存的使用情况，可以识别开销大的JS函数，跟踪内存泄露，帮助代码优化，提高JS执行性能。
Application	应用面板，记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等
Security	安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS
Audits	审计面板，从性能（Performance）、PWA兼容性（Progressive Web App）、可访问性（Accessibility）、最佳实践（Best Practices）、搜索引擎优化（SEO）这五个维度给你的网站打分，并给出一份评估报告和优化建议，可以说是非常的强

Source面板

调试最重要的一个面板就是Source面板了，这里着重介绍这个面板的功能。打开Source面板，我们就会看到如下界面：

根据上图三个区域对应分别是：资源区、工作区、控制台

资源区

名称	描述
Page	展示当前Web页面所包含的资源文件（图片、CSS样式表、JS脚本等）。在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置
Filesystem	当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和DevTools来回切换
Overrides	当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和DevTools来回切换
Content script	用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间（这里的JS脚本共享页面DOM与消息机制，与页面的JS脚本互相不知道对方的存在，无法访问对方的变量和函数）
Snippets	翻译过来就是片段，可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失

工作区

点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）

控制区

这里提供有调试操作按钮，以及一些调试信息的显示，顶部的几个按钮便是调试代码的核心按钮

• 上图调试按钮红框内，从左到右，各个图标表示的功能分别为：
  

名称	描述
Pause/Resume script execution	暂停/恢复脚本执行（程序执行到下一断点停止）
Step over next function call	执行到下一步的函数调用（跳到下一行）。
Step into next function call	进入当前函数。
Step out of current function	跳出当前执行函数。
Deactive/Active all breakpoints	关闭/开启所有断点（不会取消）
Pause on exceptions	异常情况自动断点设置。

• 下面我们介绍一下调试按钮下面的各项功能

名称	描述
Watch	跟踪监控变量，点击"+"号添加变量名。
Call Stack	函数调用栈，显示执行路径。
Scope	查看属性作用域。
Beakpoints	查看属性作用域。
XHR/fetch Breakpoints	当XHR的请求URL包含某一特定的字符串时所触发的断点。
DOM Breakpoints	当改变一个节点或其子元素时所触发的断点。
Global Listeners	全局监听器，绑定在 window 对象上的事件。
Event Listener Breakpoints	事件发生时所触发的断点。

调试小技巧

格式化调试代码，如下图：

设置Blackbox（屏蔽JS库）

很多时候我们都会调用已封装好的JavaScript库代码，最常用的比如jQuery，设置Blackbox可以将jQuery代码给屏蔽掉，调试时就不再进入jQuery源文件中去了。
这样做可以省去我们调试的很多麻烦，提高调试效率，所以很有必要学会使用。

• 方法一（单一JS文件）
  我们可以直接在源码页面，右键菜单，选中"Blackbox script"，进行屏蔽或取消屏蔽脚本。
  
• 方式二（自定义规则）
  在DevTools的Settings中的Blackboxing选项卡中，我们可以看到如下的设置：
  

名称	描述
Blackbox content scripts	这是针对于Chrome扩展的JS脚本的一个屏蔽设置，如果你开发过Chrome扩展应该明白。
Pattern	自定义JS文件名匹配规则（可以使用正则表达式）。
Behavior	Blackbox启用，Disable关闭。
Add pattern	添加一个新的匹配规则。

参考文档

• Chrome开发者工具官方文档（科学上网，英文官方文档很全面）
• Chrome DevTools — JS调试(这篇把调试操作讲得很详细，适合才开始接触代码调试的同学)
• 必备的JS调试技巧汇总（Chrome 调试GIF动图篇）