这是我参加2022年第一次更新挑战的第25天。 详情请查看：2022第一次更新挑战
来源面板
要在 Chrome 中调试 JS 代码，您必须使用 ChromeDevTools 的 Sources 面板。 使用 Microsoft Console Sources 面板可以：
Ⅰ-来源面板图
二- 右面板解释 1) 页码：
所有已加载的资源，均以域名分隔文件夹。
2）内容脚本：
浏览器扩展工具的脚本，比如我安装了Vue.jsdevtools、ReactDeveloperTools等插件，就会显示
3）片段
代码片段，你可以在这里添加一个小程序，这个小程序可以访问这个页面中的变量和函数。 不会因刷新而丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>如果不用则删除(Remove)
4）文件系统和覆盖
可以加载本地文件夹，即可以将整个项目加载到这里进行调试
三-中间代码显示面板解读 1）添加断点
断点：代码行号所在的位置称为行号槽。 单击行号槽，为对应的行添加断点，并在对应的行号前面添加一个类似于臂章的多边形图标（黑色）。
条件断点：右键单击没有断点的行号，选择“添加条件断点”或右键单击行号并选择编辑现有断点以输入条件。 满足条件时断点生效javascript断点，回车后效果如下
行内断点：当你在各个js句子上敲入代码时，与上面例子不同的是，同一行有3个红色标记的位置（或者2行，取决于你标记的代码的具体情况），表示3个断点。但是第一个断点和后两个的区别在于第一个断点默认激活，而后两个则没有，只有点击激活后才会生效
2）右键单击行号并右键单击断点
右行号
右键断点
奇怪的是，网上听到很多文章都会说右键有Blackboxscript（黑盒脚本），但我没有，所以我推断可能是浏览器版本问题
这里再强调一下原文的说明：我们在写项目的时候，经常需要引用第三方库或者框架。 我们在调试的时候，调试的对象应该是我们自己写的代码，但是很多时候，我们常常在慌张下一步的时候，代码突然跳转到了第三方库或者框架的源码，其中添加了给我们疲惫的心更多的柴火。 黑盒脚本就是用来解决这个问题的。 它可以将一个脚本文件标记为“BlackboxScript”，这样我们就永远无法踏入这个文件，这个文件对我们来说就是一个黑包。 为什么要指出“永远”呢？ 由于标记的脚本除了普通断点之外无法访问，其他断点，例如DOM断点、事件断点等，在任何脚本文件内部都很难访问。
3）中断点的注意点
只要找到源代码，在脚本代码显示区域左侧的数字处添加断点，然后只要代码运行到断点处，开发工具就会进入调试状态。
注意：有些数字线是红色的，表示不能断。 有时你点击第15行的断点会选择第14行。这是因为浏览器实际执行的代码行并不是你看到的那行代码，这可能是经过优化或改造的。
还有一种情况：添加某行断点，会跳转到另一页，打到某行，该页背景色为蓝色，文件名以VM开头。 上述情况大多是由于浏览器显示的源代码版本与真实源代码文件不一致造成的。 您只需刷新页面即可确保显示的源代码是最新的。
4）断点小法①小法1
有时千辛万苦也找不到源代码。 这时候就需要牺牲console.log，在需要调试的代码行前添加console.log(666)，然后运行一次，到控制台查看结果输出，点击链接左边手动跳转到源码，这样就可以直接断点
②小方法2
虽然面板两边第四点的Filesystem&Overrides部分提到了这一点-->
如右图，在Filesystem中添加一个文件夹到工作路径，选择后会有提示，点击接受。 如果你的微软浏览器没有这个东西，请升级版本，如果还是没有，请忽略本段。 其实我也不知道这个功能是什么时候发布的，只是偶然发现的。 可以对其进行编辑，然后将其保存到文件中。 这可以用作编辑器。
四-单侧断点调试按钮组解读
首先介绍一下两侧的功能按键组的作用
Ⅴ-两侧面板解读
这里插入了一个代码块来模拟断点调试，方便显示
1）Watch（变量窃听）：
顾名思义，观察，观察什么？ 主要观测变量。
示例图片如下
2）BreakPoints（断点列表）：
显示断点列表，并显示每个断点的文件/行号/详细内容
3）范围（scope）：
Scope 面板显示当前断点所在函数的所有属性的值。 范围将显示 2 种类型的值：脚本和全局。 如右图，当前作用域内的对象就是本地参数Script
注：网上查资料的时候，很多人说Scope会显示三种类型的值：Local、Closure、Global。而我没有，还是猜测版本问题，所以还是根据根据我所看到的javascript断点，并记下此信息
4）CallStack（函数调用栈）：
CallStack面板显示代码的执行路径
5）XHRBreakpoints（请求断点列表）
对满足过滤条件的请求进行断点拦截。 点击面板两侧的减号按钮，会弹出“BreakwhenURLcontains”，填写过滤条件。如右图，我们在包含字母/console/querycentre...的请求URL上打断点...
下面的示例图片对无用部分进行了编码，以免影响观看体验
6）DOMBreakpoints（DOM断点列表）
在DOM上添加断点，达到指定条件时触发断点，中断javascript的执行并定位断点。例如：在面板中，右键单击body元素→Breakon→modifications，DOM元素名称将显示在 DOMBreakpoints 面板中
7）EventListenerBreakpoints（可攻破的风暴窃听列表）
通过打开这个列表，你可以点击一个风暴，并在风暴触发时进入断点，调试器将停留在触发风暴的代码行。只需展开风暴列表，选择你想要窃听的风暴，然后勾选它
举个栗子，检查鼠标按键按下暴风：
Ⅵ-源代码调试技巧
如今的项目几乎总是经过编译的，因此当我们调试时，我们正在处理已编译的代码，但这不是我们想要的。 别担心，ChromeDevTools提供了预处理代码和源代码之间的映射，主要有两点：
不过需要注意的是，能够查看上面提到的源代码的前提是ChromeDevTools在设置中提供了相应的权限，具体为：Settings-Sources-EnableJavascriptsourcemaps/EnableCSSsourcemaps，勾选这两项即可。 但是，默认情况下会选中它。
