📖 面板介绍

Sources面板界面通常包含左、中、右三个区块，下面将分别介绍各个区块的功能。

网页（Page）

显示当前页面已经加载的静态资源，包含html、JS、CSS、图片、字体等，按照域名和路径聚合成一个树形结构展示。 点击文件名可以在中间区块查看文件内容以及文件信息等。对于html/css/js文件，会自动格式化方便查看；图片文件会显示图片尺寸和大小等。

除此之外，还会展示已加载的浏览器扩展资源（如上图中的CodeArts API）；如果页面有Web Worker运行，还会在与top同一层级显示其他线程的JS代码。

根据显示的资源路径，我们通常可以用来排查一些静态资源404的问题。

工作区（Workspace）

可添加本地工程源码，与网页上代码进行关联，在调试页面修改的内容会自动同步到本地文件中。

点击“添加文件夹”后，选择本地工程源码的根目录，点击“允许”DevTools获取对该文件夹完整访问权限，已成功建立关联的文件图标中会显示一个绿色的标识。

建立关联之后，可直接在调试页面修改文件内容，也可新增/删除文件等，按Ctrl+S保存后，修改的内容会同步写入到本地文件中。

如果不想继续使用该功能，在根目录右键选择“从工作区移除”即可。

替换（Overrides）

可以用本地的内容替换原本网络请求（包括js、css、数据请求等）的内容，实现不借助代理工具就可以完成简单的mock调试等。可按照如下步骤操作：

1. 本地创建一个用于保存替换内容的文件夹（如：mock），在替换页面选择“选择放置替换项的文件夹”，选择已创建好的mock文件夹，点击“允许”DevTools获取对该文件夹完整访问权限。
2. 在网络页面选择一个请求，右键选择“替换内容”，会自动帮我们在本地创建出一个文件，该文件图标上会出现一个紫色的标识，并且网络面板图标也会出现黄色警告标识请求有修改。

 修改文件内容后保存，后续的请求结果会以本地的内容替换，被替换的请求也会标识出来。

不想继续使用替换，可以去掉“启动本地替换”的勾选，或者直接清除配置。

内容脚本（Content scripts）

浏览器扩展的js脚本，用来调试已安装的浏览器扩展。

代码片段（Snippets）

可以将一些常用的可运行代码片段持久化保存，方便下次快速运行。

点击添加“新代码段”，可以为这段代码命名，编辑内容后按Ctrl+S保存，在代码片段名右击选择“运行”。

📖 断点调试

调试首先需要设置断点，让程序运行到指定的地方暂停，分析此时的数据是否符合预期，从而排查问题。

代码行断点

1. 普通断点：调试中最常用的断点。

可以通过代码添加debugger语句（调试完还要手动移除，不推荐）；或者在文件内容行号点击鼠标左键添加蓝色的断点标记，再次点击可取消。

2. 条件断点：条件断点只有当设置的条件满足时才会暂停。

行号右击选择“添加条件断点”，输入进入断点的条件，然后按回车生效，会生成一个橙色的断点标记。

3. 日志断点：运行到日志断点不会暂停，会运行设定好的打印语句。

行号右击选择“添加日志点”，按照console.log格式输入打印语句，然后按回车生效，会生成一个紫红色的断点标记。

异常断点

设置异常断点可以快速定位到产生异常的位置。

1. 遇到未捕获的异常时暂停

对于如Angular框架有全局异常捕获无法进入断点。

1. 在遇到异常时暂停

XHR/提取断点

网址中包含设定的内容时中断，当指定的网络请求发送前，会进入中断状态。

事件监听器断点

触发对应事件后会进入暂停状态，比如鼠标的click事件，定时器，剪贴板等。只有注册了对应事件的监听才会生效。

以定时器为例，可以快速定位到定时器触发执行的位置。

DOM断点

可以在指定dom元素发生修改后进入中断。

此断点需要在元素（Element）面板中添加。找到指定元素，鼠标右键后选择“发生中断的条件”，可以勾选选择“子树修改”、“属性修改”或“移除节点”，当勾选的条件满足时就会进入中断状态。

CSP违规断点

当网页尝试加载或执行违反CSP策略的内容时，浏览器会自动暂停执行并触发一个断点。

调试

代码运行至断点处，进入中断状态，此时前端页面显示“已在调试程序中暂停”，Sources面板中显示“已在断点暂停”，并且调试页面代码跳转至暂停的代码行，并且此行黄色显示。

 光标悬浮至变量可以看到当前变量的值，也可在控制台中打印变量的值，或者执行脚本修改变量的值。

同时在右侧区块，作用域和调用堆栈都显示出了内容。

作用域：可以看到暂停时当前位置可以访问变量的值，包含当前代码块、本地、闭包、脚本等。 通过查看各种变量的值判断代码执行的结果是否符合预期。

调用堆栈：可以查看函数的调用链，用来查看当前的调用关系。 选中某个函数右键选择“重启帧”可以回到开始调用该函数的状态（列如异步场景等无法重启）。

如果不关注第三方库函数的调用，可以右键忽略指定的js脚本或者忽略全部第三方脚本，忽略后默认不会显示在调用堆栈中，显示更简洁方便快速排查业务代码问题。

 忽略的脚本名称将显示为灰色，同时查看文件时会提示已加入忽略列表，右键脚本名称可以从忽略列表中移除；忽略规则可以在设置中配置。

当暂停后查看数据没有问题，需要继续排查，开发工具在右侧区块顶部提供了一些操作按钮，分别是：

1. 快捷键：F8 或 Ctrl + \。恢复代码运行，直到进入下个断点。
2. 快捷键：F10 或 Ctrl + '。跳过下一个函数调用，进入下一行。
3. 快捷键：F11 或 Ctrl + ;。进入下一个函数调用。
4. 快捷键：Shift + F11 或 Ctrl + Shift + ;。跳出当前函数。
5. 快捷键：F9。单步调试。遇到函数会进入函数中，F10的操作不会。
6. 快捷键：Ctrl + F8。停用断点。不进入中断状态。

监视器：在每次暂停时，会获取监视变量当前状态下最新的值，便于快速发现非预期的变化。

点击监视器右侧的“添加”按钮，输入变量名或者JS表达式，按下回车生效。已经存在的监视器可以点击“删除”按钮删除掉。

📖 线上调试

线上部署的代码经过构建之后被混淆和压缩，同时为了安全不会将sourcemap文件发布至线上环境，因此线上环境的代码即使经过格式化后也很难阅读，难以直接调试。

可以按照如下步骤加载本地的sourcemap文件进行调试：

1. 在本地使用与线上相同的源代码运行构建命令（需要在打包配置中开启sourceMap: true），在产物目录中找到与js文件同名的.map文件，比如js文件名为：main.6ef9f3836c78083e.js，需找到main.6ef9f3836c78083e.js.map文件，然后用浏览器打开后复制地址栏的链接。

2. 在线上对应的js文件文件内容区域，右键选择“添加源代码映射”，输入复制的文件地址，然后点击添加。

如果没有此选项，需在设置中开启JavaScript源代码映射。

3. 添加成功后左侧区块会出现webpack的源码目录。点击添加断点时，就会自动跳转至源代码的对应的位置，然后可以像本地调试一样调试代码。

注意：即使是同一份代码，可能会因为依赖版本不一致导致线上和本地构建出的文件hash不相同，即使可以成功加载sourcemap文件也会因为映射具有差异而失效。

​转自https://juejin.cn/post/7502047502342996008