Chrome 代码编辑和调试器使用完全指南

21CTO导读：

大概很少有开发者深入研究Chrome的“DevTools（中文版称为：开发者工具）”，今天我们来做个总结，本文值得分享和收藏。

它有一系列功能看起来很复杂，让人有点打怵，但是它已经达到了可以用作完整开发编辑器环境的程度了。

作为开发者不太可能放弃 VS Code 或 Sublime Text，但若想在其他人的 PC 上或临时需要编辑一两行代码，则可以直接选择使用Chrome 浏览器。

以下我们描述了如何使用 Chrome 的编辑和调试工具。Chromium、Edge、Opera、Vivaldi和Brave使用相同的引擎拥有相同的工具。

现在可以从 Chrome 浏览器菜单中呼出 DevTools：或按F12或Ctrl/Cmd + Shift+ i。

快速编辑任意站点

在本地开发或实时站点上查看页面时，我们可以使用DevTools 检查、禁用、启用、添加、编辑或删除任何 CSS 选择器与属性：

Sources 源代码面板可以让开发者通过在Page面板中定位来编辑任何 CSS 或 JavaScript 脚本。

使用 Ctrl/Cmd+S保存文件，但注意它只是临时保存到内存中。黄色警告图标表示更改并非永久性的——当你离开或刷新页面，所有的更改都将丢失。

幸运的是，“Changes”面板可以识别当前的更新。它可以从抽屉中的 3 个菜单或主菜单中的更多工具中获得。如下：

虽然无法从“Changes”面板保存代码，但它允许开发找到全部更新文件。你使用右键单击文件夹窗格中的任何文件，选择“另存为”下载本地副本，将其导入到自己的项目中。

覆盖任何站点上的文件

可以覆盖本地开发或实时站点上的任何文件。

首先，在Source面板中选择Overrides窗格，然后鼠标单击+ Select folder for overrides。如下图：

在自己的操作系统上选择一个目录，单击允许，这样 Chrome 就可将文件写入该目录。

返回到Pages面板，右键单击任意文件，选择 Save for overrides：

此操作会将文件保存到你的本地文件夹。有紫色圆圈覆盖的图标表示文件已在本地系统上：

开发者可以点击{}美化缩小的代码，也可以进行需要的任何更改，更新会立即呈现。由于文件保存在本地，因此只要 DevTools 打开，更改就会重新应用到相关域中的页面（当然它只影响你当前处理的网站）。

Changes 面板仍然显示差异，但你可以将编辑后的文件复制到源代码中。

编辑代码源文件

无论使用何种构建系统，你都可以将 Chrome 用作本地源文件的标准编辑器。

Chrome提供了大多数编辑器的基础能力，例如行号、撤消/重做、颜色编码和自动完成。

首先，在Sources面板中选择Filesystem窗格，然后单击+ Add folder to workspace：

请选择一个项目位置，然后单击允许，这样 Chrome 就有权读取和写入该文件夹了。

现在，你可以像在编辑器中一样打开和编辑任何文件。如下图：

使用控制台消息进行调试

有一些开发者说，永远不应该使用console.log()：如果你更改源代码，有更好的调试选项。这有一定道理，但我不相信没有不使用它的人！

控制台 console对象提供了一系列方法，包括如下：

console方法	说明
.log(msg)	向控制台输出消息
.log('%j', obj)	将对象紧凑显示 JSON 字符串
.dir(obj,opt)	格式化打印对象和属性
.table(obj)	以表格格式输出数组与对象
.error(msg)	输出错误信息
.count(label)	输出行执行次数的命名计数器
.countReset[label]	重置命名计数器
.group(label)	日志消息分组
.groupEnd(label)	结束分组
.time(label)	启动计时器，计算操作的持续时间
.timeLog(label)	报告自计时器启动以来经过的时间
.timeEnd(label)	停止计时器并报告总持续时间
.trace()	输出堆栈跟踪（所有调用函数的列表）
.clear()	清除控制台消息

console.log()还接受逗号分隔值的列表：

let x = 321;
console.log('x:', x);
// x: 321

ES6 解构方法提供了类似的输出：

console.log({ x });
// { x: 321 }

console.dir()可以将复杂对象输出到任何属性深度：

console.dir(obj, { depth: null, color: true });

调试客户端应用

可以从Sources面板打开一个 JavaScript 文件，可单击任何行号来设置断点（图中的蓝色标记表示）。注意，还可以选择文件并在源映射中添加断点，这样使用可能更容易。

断点指定后，调试器将暂停至处理的点，开发者可以检查程序的状态并进入下一行。

如果你愿意，可以定义任意数量的断点。

接下来，运行你的代码——可通过刷新页面或激活事件处理程序，代码将在断点位置停止。如下图：

右侧面板包括：

• 监视窗格，可以在其中通过单击+图标并输入其名称来监视指定变量；

• 带有所有断点的窗格，可以启用或禁用任意断点

• 范围窗格显示所有局部和全局变量的状态

• 调用堆栈窗格，列出了到达代码而调用的函数

Paused on breakpoint 消息上方，有一行小图标：

从左到右，这些图标分别执行以下操作：

• resume execution : 继续处理直到下一个断点或代码终止

• step over : 执行下一个命令但留在当前函数中——不要跳出它调用的任何函数

• step into：执行下一个命令并跳转到它调用的任何函数

• step out : 继续处理到函数结束，返回调用语句处

• step : 类似于step into，但是它不会跳转到async函数中

• pause on exceptions ：出现错误时暂停处理。
  

DevTools 还提供了更多的调试选项。

除了手动定义断点外，开发者还可以用 debugger在代码中添加语句，注意这样会在 DevTools 打开时激活调试器，因此在生产代码时应该删除。

条件断点，是在停止执行之前检查一个值。我们可以想象一下，你有一个从 0 到 999 运行的循环，需要查看最后一次循环的状态。

可以右键单击一行，选择Add conditional breakpoint ，然后输入一个表达式，例如.loopValue === 999

每当 JavaScript 代码更改 DOM 节点或其子节点时，都会激活DOM 断点。通过右键单击任何节点，单击Break on并选择适当的选项，从Elements面板激活它们。

每当 JavaScript 发出Fetch()或XMLHttpRequest调用以从 URL 检索数据时， Ajax 断点就会激活。在Sources面板中，打开右侧的XHR/fetch breakpoints面板，单击+并输入完整或部分地址即启用断点。

有时想忽略正在使用但无法更改的代码，例如 jQuery、React 等前端框架、分析等第三方 JavaScript等。按F1或单击 Settings，选择Ignore list选项卡, 并添加任意数量的完整或部分 URL/文件名。调试器会跳过这些文件并忽略其抛出的任何异常。

开源会话重播

OpenReplay（https://github.com/openreplay/openreplay）是一个开源的会话重播套件。

OpenReplay 帮助我们查看用户在我们的 Web 应用上所做的事情，从而帮助我们更快地解决问题。OpenReplay 是自托管的，你可以完全控制数据。

调试 Node.js 和 Deno 应用

开发者还可以直接在 Chrome DevTools 中调试 Node.js 和 Deno 服务器端应用程序，这是由于运行时均使用相同的 V8 JavaScript 引擎。

如果要启动 V8 检查器，使用--inspect参数来启动你的应用。例如从其index.js文件启动 Node 应用程序。如下：

sh node --inspect index.js

Deno框架与node支持相同的--inspect选项。还可以使用--inspect-brk停止第一行的处理，方便你在应用程序启动时单步执行。

以下命令启动调试器监听localhost:9229任何本地调试客户端：

Debugger listening on ws://127.0.0.1:9229/301372bc-780a-2051-ceb2-c8d78227092e

如果在另一台设备上或在 Docker 容器内运行应用程序，确保端口9229可访问并指定0.0.0.0允许从本地网络上的任何位置访问：

node --inspect=0.0.0.0:9229 index.js

应用运行后，打开 Chrome 并输入地址chrome://inspect可查看所有可用的应用程序：

需要等待几秒钟才会出现在远程目标列表中，还请你勿急。

小结

过去十年，DevTools 有了长足的发展，并且已经成为事实上唯一的 Web 调试开发工具。

上面的内容已覆盖了代码编辑和调试工具，以下有一些也值得你借鉴：

• 在Network选项卡中，右键单击任何Fetch/XHR请求，然后选择Copy选项，即可为 JavaScript、Node.js、cURL 等生成有效代码。

• 从Sources选项卡打开任意图片，右键单击它可以复制 base64 数据内容。

• 在Sources Snippets面板中可以创建代码片段，这样可以在任何页面上运行相同的 JavaScript。

• 按下暂停/恢复图标停止执行，然后按住相同的图标并选择停止无限循环。

• chrome://inspect可从面板调试以 USB 连接到 PC 的 Android 手机上运行的站点。还可以定义端口转发，此功能非常有用。

作者：洛逸