网站程序源码代码修改方法 Chrome编辑与调试

很少有开发者慎入研究浏览器的 "开发者工具 "，现在浏览器的开发者工具有一系列令人望而生畏的复杂功能，可以让Chrome作为完整的开发环境。我们不太可能放弃VS Code 或者Sublime Text 等编辑器。但是如果在别人的电脑上或需要编辑简单的代码时，浏览器是一个不错的选择。

调试客户端应用

我们可以在你Sources 面板打开一个JavaScript 文件，点击任意一行来设置断点，请注意在Source maps 文件中选择文件添加断点更简单.

断点指定调试器暂停处理的点，方便我们检查程序的状态并进行到下一行。可以定义任意数量的断点，但一般只需要在开始调试的地方设置断点.

运行代码可以刷新页面或激活事件处理程序代码将在断点位置停止。

右侧面板包括：

Watch 可以通过点击 +添加要监视变量变化的名称

Breakpoints 列出了所有的断点，也可以禁用或启用断点

Scope 显示所有局部和全局变量的状态

Call Stack 列出了当前函数的调用栈

断点消息上方的一行图标：

从左到右图标的作用如下：

1、继续执行： 继续处理程序，直到下一个断点或代码结束运行

2、跳过： 执行下一个命令，但是保持在当前函数内，不会跳到任何这个函数调用的函数里

3、单步执行：执行下一个命令并跳转到它调用的任何函数中

4、单步退出：继续处理程序，并定位到函数本调用的位置

5、步骤： 类似单步执行，只是它不会跳转到异步函数中

6、跳过所有断点：如果希望临时在不中断的情况下运行代码，但有不想丢失断点时，这个功能非常有用

7、异常暂停: 在出现错误时程序暂停

DevTools 提供了更多的调试选项，除了手动添加断点外，还可以在代码中添加调试语句，当开发者工具被打开时就会激活调试语句，记得在生产环境删除调试；

条件断点 在执行前检查值，假设你有一个从0 到 999的循环，需要在最后一次循环中查看状态，不用跟进断点循999次，你可以在指定行右键，选择Add conditional breakpoint 然后输入比如 loopValue === 999.

logpoint 时无代码的console.log()! 在行号上右键选择 Add logpoint 然后添加表达式：

DOM breakpoints每当JavaScript代码修改DOM节点或子节点时就会触发，在Elements面板中通过右键单击任何节点，选择“DOM breakpoints” 然后选择适当的选项来启用。

Ajax breakpoints调试通过JavaScript 调用的Fetch()或XMLHttprequest检索数据时会激活；在Sources面板中打开右侧的XHT/fetch Breakspoints 单击 + 并输入完整或部分接口地址来启用断点。

最后，有时我们想要忽略我们不能修改的代码，比如，jQuery, React 第三方JavaScript 统计代码等。点击⚙️图标打开设置面板，选择Ignore list 添加任意数量的完整或部分文件路径名，这样，调试器会跳过这些文件的代码或异常。

调试Node.js 和 Deno 应用

我们也可以在浏览器开发者工具中直接调试服务端应用，因为运行时环境都使用的是V8 引擎。通过 --inspect标识来加载你的应用从而开启V8引擎的检查。比如：启用一个Node应用

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和指定ip0.0.0.0 可以在局域网内访问：

node --inspect=0.0.0.0:9229 index.js

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

几秒后应用会出现炸弹 Remote Target 列表中，如果没出现， 确保选择了Discover network targets，并且点击Configure 来添加应用所在设备的IP和端口

点击 应用的inspect 链接来启动另一个开发者工具窗口，和浏览器开发者工具相比，他的选项较少，你主要可以使用Sources面板来添加断点，和之前一样虚啊者FileSystem 面板点击+ Add folder to workspace 来编辑服务器代码。

其他受欢迎的工具

Network 中在选择任意一个Fetch/XHR请求右键 Copy 选项可以生成有效的代码比如JavaScript Node.js cURL 等。

在 Sources 面板中打开图片，右键可以复制 base64 数据

在 Sources -> Snippets 面板中添加代码，在任何页面中执行相同的JavaScript