携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
文章翻译自：How to use Chrome as a Code Editor and Debugger
很少有开发人员深入研究浏览器开发者工具。它有一系列令人生畏的复杂外观特性，但现在已经到了可以使用 Chrome 作为你的完整开发环境的时候了。你不愿意放弃 VS Code 或者 Sublime Text，但如果你正在使用别人的电脑并且需要编辑一两行时，使用浏览器是一个选择。
接下来的部分描述了如何使用浏览器的编辑调试能力。Chromium, Edge, Opera, Vivaldi, 和 Brave使用相同的引擎并且有相同的工具。取决于你的浏览器和操作系统，你可以通过按F12, 或者Ctrl|Cmd + Shift + i来打开开发者工具。Safari和Firefox有不同的特性集合，而且他们可能不会提供类似的编辑功能，但也有自己的技巧帮助开发；比如，Firefox能显示哪些DOM元素被添加了事件处。
在任意网站上编辑
不管是在本地开发环境还是线上环境访问一个页面的时候，Elements面板允许你检查，禁用，启用，添加，编辑，删除任意css选择器和属性：
Sources 面板允许你编辑在 Page 面板找到的任何css或者JavaScript文件。
按 Ctrl | Cmd + S 进行保存但要注意的改动只是保存到内存中。黄色警告图标显示更改不是永久的。
如果你的代码设置了source maps,你可以打开特定的 “文件” (参见上面的 src 文件夹)但此时的修改不会应用到活动的页面上。但是你可以点击 {} 图标美化压缩你的代码并且进行编辑。
对文件的修改会随着浏览器导航到其他页面或者刷新当前页面而消失。幸运的是，Changes 面板中标记了你当前的修改，在三个点的菜单中的下拉框中或者主菜单的 More tools 里面可以找到 Changes 面板：
在 Changes 面板中是无法保存代码的，但它可以让你找到所有更新过的文件。在文件夹窗口中右键单击任意文件 ，你可以选择 另存为 备份到本地并且可以将它导入到你的项目中。
在任何网站上覆盖文件
你可以覆盖本地开发或者线上的任意文件。首先，在 Source 面板中选择 Overrides 然后点击 + Select folder for overrides:
在你的电脑上选择一个文件夹，然后点击 允许 让谷歌可以进行写入。
返回到 Pages 面板，右键单击任意文件并选择 Save for overrides:
这个操作将文件保存到你的 overrides 文件夹下。紫色圆圈覆盖表示该文件位于本地系统上：
你可以点击 {} 来美化压缩代码并可以做任何修改。修改会实时更新，因为文件是被本地保存了，不论开发者工具是否打开，变化都会重新应用到域名下的所有页面（除了你本机的网站其他人的并不会受影响）。
Changes 面板会一直展示代码的差异，你也可以将编辑后的文件拷贝到源代码中。需要注意的是当前正在编辑的是最终打包的文件，可能需要对任何构建过程中使用的源文件应用更改。
编辑开发源文件
不论你使用什么构建系统，你可以将谷歌作为本地源文件的一个标准的文本编辑器。它提供大部分基础编辑能力比如行号，撤销/重做，颜色标记，和代码自动补全。首先，在 Sources 面板选择 Filesystem 选项并单击 + Add folder to workspace:
选中一个项目位置，然后点击 Allow 让谷歌有权限读写选择的文件夹。现在你可以像在编辑器中一样打开并编辑任何文件了：
使用控制台信息进行调试
一些开发者声称你不应该使用 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() 也接收一组逗号分隔的值。比如:
Copy
1let x = 321;
2console.log('x:', x);
3// x: 321
而ES6的解构赋值可以用更少的编写得到相同的输出
console.log({ x });
// { x: 321 }
console.dir() 可以输出任何深度的有无颜色标记的复杂对象
console.dir(obj, { depth: null, color: true });
调试客户端应用
你可以从 Sources 面板中打开一个javascript文件并点击行号来设置一个端点(用蓝色标记表示)。注意，你还可以在源映射中选择文件并添加断点，这可能更容易。
一个 breakpoint 指定了一个调试器并将暂停处理，所以你可以探测程序的状态和接下来的过程。你可以定义任意一行的断点，但你应该在你想要调试的地方设置。
运行你的代码——通过刷新页面或者启动事件处理器——然后代码将会在断点的位置停下：
右边的面板包括：
- Watch 选项，你可以通过点击 + 图标并输入名字来监听指定的变量
- Breakpoints 选项包含了所有断点并且允许你启动或禁用它们
- Scope 选项展示了所有局部和全局变量的信息
- Call Stack 选项列出了到达这个断点时已经调用的函数。
出现在 Paused on breakpoint 上方的一行图标代表的信息是：
从左到右，图标执行以下操作：
- resume execution：继续执行直到下个断点处或代码结束
- step over：在当前函数里面执行下一个命令——不会跳进它调用的任何函数
- step into：执行下一个命令并跳进它调用的每个函数
- step out：继续执行到函数的结尾并返回到调用语句
- step: 类似于 step into,不过他不会跳进一个
异步函数 - deactivate all breakpoints —— 在你想暂时不中断的执行代码但又不想去除你的端点的时候很有用
- pause on exceptions: 报错时暂停执行
开发者工具还提供了其他一些调试方法。比如手动定义断点，你可以为你的代码添加一句 调试器 语句。开发者工具一打开就会激活这个调试器，所以你应该在生产代码上删除它。
Conditional breakpoints 在停止执行之前检查一个值。假设你有一个从 0 到 999 的循环并且需要在最后一次迭代中查看状态。你可以右键点击一行，选择 Add conditional breakpoint，然后输入一个表达式例如 loopValue === 999,而不是直接添加一个断点并且点击 resume 999次。
Log points 是 console.log() 的无代码版本！右键点击任意一行，选择 Add log point, 然后添加表达式。
DOM breakpoints 在 JavaScript 代码改变了一个 DOM 节点或者它的子节点的时候激活。你可以在 Elements 面板通过右键点击任意代码，点击 Break on 然后选择合适的选项来激活他们。
Ajax breakpoints 在 JavaScript 调用了一个 Fetch()请求从一个 URL 获取数据的时候激活。在 Sources 面板，在右边打开 XHR/fetch breakpoints 选项，点击 + 然后输入一个完整的或部分的地址来启动这个断点。
最后，你有时想忽略正在使用的代码却又不能改变的时候，例如，jQuery，React框架，第三方 JavaScript 包 analytics ，等等。按 F1 或者点击齿轮图标打开 Settings，选择 Ignore list 选项卡，然后添加完整的或者部分的任意数量的 URL/文件 名。从这时起，调试器将会跳过那些文件的代码并且忽略它们抛出的错误。
开源会话回放
*OpenReplay 是一个开源的，会话回放让你看到用户在你的 web app上做了什么，帮助你更快的排除故障。OpenReplay 是自托管的让你可以完全控制你的数据。 *
开始享受你的调试体验吧 - start using OpenReplay for free.
调试 Node.js 和 Deno 应用程序
你也可以在谷歌开发者工具中正确调试 Node.js 和 Deno 服务端应用程序，因为他们的运行环境都是 V8 JavaScript 引擎。要启动 V8 探测器，通过 --inspect 标识启动你的应用程序。比如，从它的 index.js 文件运行一个 Node 应用程序
sh node --inspect index.js
deno 和 nodemon 支持完全相同的 --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://inspect 查看所有可用程序。
程序可能需要几秒钟才会出现在 Remote Target 列表中。如果你的没有出现，确保选中了 Discover network targets ，然后点击 Configure 添加程序运行的设备的IP地址端口。
点击目标程序的 inspect 链接来启动另一个开发者工具窗口。它的选项比浏览器的开发者工具少，你也主要会使用 Sources 面板来添加断点。和之前一样，你可以选择 Filesystem 面板并且点击 + Add folder to workspace 编辑服务端代码。
总结
在过去的十年，开发者工具进化的很快，并且已经到了一个可以成为你唯一需要的 web 开发工具的地步。我们已经解除了编辑调试代码的特性，这里还有一些我喜欢的工具：
- 在 Network 面板中，右键点击任何一个 Fetch/XHR 请求，然后选择 Copy 。你可以 JavaScript，node.js,cURL,等等生成有效的代码片段。
- 在 Sources 面板中打开任何图片，右键点击它可以拷贝对应的 base64 的路径。
- 在 Sources Snippets 面板中创建代码片段，你可以在任何页面上运行片段的代码。
- 通过按下 pause/resume 图标终止执行从而暂停无限循环，然后按下相同的图标并选择停止。
- 在
chrome://inspect面板中可以通过USB连接手机和电脑调试站点。你还可以定义端口转发，这样任何本地或远程站点在设备上都显示为localhost:<port>。 - Rendering 面板提供一些特性包括，评估 Core Web Vitals，模拟
prefers-color-scheme，打印友好的样式表，减少运动等等。 - 当正在使用的一个API在未来谷歌迭代版本中改变时， Issues 面板提供了一些建议参考。
更多开发者工具技巧：
