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: 321ES6 解构方法提供了类似的输出：
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.jsDeno框架与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 手机上运行的站点。还可以定义端口转发，此功能非常有用。
作者：洛逸