使用 Chrome 开发者工具调试 JavaScript

本文主要是简单介绍了 Chrome 的开发者工具的使用，进阶学习可以参考文末的链接。

在 Chrome 中打开一个网站后，右箭点击检查 (快捷键：Shift+Ctrl+i) 即可调出 Chrome 的开发者工具。

功能标签

开发者工具共有8个功能标签，当然安装特定的 Chrome 插件会增加功能标签，例如前端框架 React 调试插件等，新增标签的功能是由插件实现的，所以本文不再介绍。

1. Console

命令窗口，当前网页中 JavaScript 的调试信息，例如 console.log、console.info、console.error 等会在此输出。同时，在这里我们可以运行一些命令、针对当前页面的测试脚本等。

点击上方的 🚫 (clear console) 会清除页面，但是不会重置环境，也就是之前定义的方法、变量等依然会存在。但是刷新会重置环境。

2. Elements

显示当前页面的 DOM 元素，用于查看和修改当前页面的 HTML 元素和 CSS 元素。

当我们点击其中的一个 HTML 元素之后，在页面的下方或者右方会显示选中元素的定义的 CSS 属性。

3. Sources

显示了当前页面加载的各种资源文件。在此标签下还有数个子标签，Page 标签对应的就是当前页面的各种资源，并且会以资源文件的引用域名分类显示。

4. Network

用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。

5. Performance

记录显示网页的完整过程，就想它的名字，一般用于性能分析。
需要手动点击 Record 和 Stop，之后就会显示记录的这段时间浏览器的行为，用于网页的性能分析。

6. Memory

记录了 Chrome 的内存使用情况。

7. Application

主要显示当前网站使用的一些资源，例如的 storage 和 cache。

8. Audits

可以使用此标签实现更加细节的网页分析，例如首次有效绘制的情况，可用于分析网站首屏加载时间等。

调试技巧

错误处自动暂停

我们可以通过开启运行时错误自动暂停这一功能，更加方便快速的定位错误代码。

开启这个功能很简单，点击 Source 标签中的 Pause on exceptions 即可。

如下图：

image