使用Chrome调试JavaScript

深碍√TFBOYSˉ_ 2022-04-16 02:38 412阅读 0赞

### 文章目录 ###

*  使用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，我们就会看到如下界面：  
![DevTools主界面][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面板，我们就会看到如下界面：  
![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 控制区 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70]

顶部的几个按钮便是调试代码的核心按钮了，对于使用过其他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][]

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

![格式化代码][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 1]

### 4.2 设置Blackbox ###

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

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

#### 4.2.1 开始配置 ####

**【方式一】单一JS文件**

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

![屏蔽指定脚本][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 2]

**【方式二】自定义规则**

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

![自定义规则][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 3]

*  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文件：

![屏蔽效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 4]

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

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

## 5 参考文档 ##

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

[DevTools]: /images/20220416/4cc1a67f792747ff865c289e5f382c7e.png
[Source]: /images/20220416/eaf453f01fbb453b90f7f1ffe57769da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70]: /images/20220416/ad4bad5ab3274b73b8d464de50c7666a.png
[Pretty print]: /images/20220416/b7f7eb1cb68f46018b3bf841909f49b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 1]: /images/20220416/168d10150fcd4527b179f00220bdc135.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 2]: /images/20220416/1afd68f44f144072bd1761f01879081f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 3]: /images/20220416/76b3624a24644c43918533e52c5fe068.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODAyNDE2_size_16_color_FFFFFF_t_70 4]: /images/20220416/acf8b305456d4f8cb1f2e13e9204d5d9.png
[Chrome]: https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2018Q2
[Chrome DevTools _ JS]: https://segmentfault.com/a/1190000008396389