文章目录

使用Chrome调试JavaScript
- 1 前言
- 2 认识DevTools
- 3 Source面板
- - 3.1 资源区
  - 3.2 工作区
  - 3.3 控制区
- 4 调试小技巧
- - 4.1 格式化调试代码
  - 4.2 设置Blackbox
  - - 4.2.1 开始配置
    - 4.2.2 查看效果
- 5 参考文档

使用Chrome调试JavaScript

1 前言

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

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

2 认识DevTools

快捷键F12打开Chrome的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）这五个维度给你的网站打分，并给出一份评估报告和优化建议，可以说是非常的强！

虽然很想深挖每个面板中的内容，尤其是Web页面性能优化方面，但文章篇幅和个人精力有限（尤其对于写博客十分慢的我来说），这里以后用到再延伸吧，推荐你根据需要去了解个个面板的具体用法。下面详细去写一写之后开发Chrome扩展一定会频繁用到的JS代码调试面板，即Sources页面。

3 Source面板

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

共有三个区域：资源区、工作区、控制台，分开介绍。

3.1 资源区

【Page】：展示当前Web页面所包含的资源文件（图片、CSS样式表、JS脚本等）。在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置。

【Filesystem】：当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。所以也就可以让我们一边调试，一边修改源代码，而无需在本地和DevTools来回切换。

【Overrides】：当我们的Web页面在远程服务器上，本地没有项目源码，我们也可以通过Overrides选项卡选定目录让DevTools创建一个文件夹来保存对远程Web页面的所有修改。修改完成后，用这些文件直接去覆盖远程服务器上的源文件就完成了页面的修改。

【Content script】：用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间（这里的JS脚本共享页面DOM与消息机制，与页面的JS脚本互相不知道对方的存在，无法访问对方的变量和函数）。

【Snippets】：翻译过来就是片段，可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失。

3.2 工作区

点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）。这个区域右键菜单会提供很多功能，自己尝试看看！

3.3 控制区

这里提供有调试操作按钮，以及一些调试信息的显示。

顶部的几个按钮便是调试代码的核心按钮了，对于使用过其他IDE的同学来说，使用起来很容易，不多讲（如果你对调试代码不熟悉的话，请查看文末的参考链接）。最右侧暂停图标的按钮（Pause on exception），其作用是一旦有异常抛出就暂停代码的执行。

【Watch】：跟踪监控变量，点击"+"号添加变量名。

【Call Stack】：函数调用栈，显示执行路径。

【Scope】：查看属性作用域。

【Beakpoints】：这里可以查看到所有的断点启用状态及位置。

【XHR/fetch Breakpoints】：当XHR的请求URL包含某一特定的字符串时所触发的断点。

【DOM Breakpoints】：当改变一个节点或其子元素时所触发的断点。

【Global Listeners】：全局监听器，绑定在 window 对象上的事件。

【Event Listener Breakpoints】：事件发生时所触发的断点。

4 调试小技巧

4.1 格式化调试代码

Web页面为了提升网页的加载速度，常常都会将JS代码进行压缩，减小JS文件的大小，使JS文件下载速度更快。所以Web页面的JS文件很多都是存放的压缩后源码，非常不利于我们查看和调试。

这时候就需要格式化代码了，Chrome DevTools为我们提供了格式化代码的功能，藏得有些隐蔽。

点击圈中双括号（Pretty print）就能够将代码格式化，DevTools会我们我们创建一份后缀为:formatted、格式化后的文件（不过好像并不能右键Save as保存下来，就只能Ctrl+A给复制下来，粘到本地文本编辑器看）。之后我们调试的时候，debugger就会跳进格式化之后的代码中来了。

4.2 设置Blackbox

很多时候我们都会调用已封装好的JavaScript库代码，最常用的比如jQuery，设置Blackbox可以将jQuery代码给屏蔽掉，调试时就不再进入jQuery源文件中去了。

这样做可以省去我们调试的很多麻烦，提高调试效率，所以很有必要学会使用。

4.2.1 开始配置

【方式一】单一JS文件

我们可以直接在源码页面，右键菜单，选中"Blackbox script"，进行屏蔽或取消屏蔽脚本。

【方式二】自定义规则

在DevTools的Settings中的Blackboxing选项卡中，我们可以看到如下的设置：

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

4.2.2 查看效果

当我们配置好之后（这里屏蔽了文件名为jquery-3.3.1.min.js的JS文件），在Source面板打开jQuery文件：

此时提示脚本被屏蔽，点击more可以在里边快速取消的屏蔽。

这样一来，再调试的时候就不会再进入到这个jQuery源文件中去了。

5 参考文档

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