谷歌浏览器调试面板（sources）

一.文件资源区域

这个区域代表了当前页面加载的所有本地资源,点击以后会获取到他的文件内容，并在右侧展开,我们同时可以给这个文件打上断电和修改代码,进行测试。

二.文件内容区域

这个区域用于展示文件的内容,可以修改代码,保存调试更改后的代码,还可以在每一行的头部点击序号打上一个断点。 

三.断点区域

1. 第一行的6个icon小图标,作用分别是:
2. 第一个控制文件的执行,默认是灰色,当你给它打上断点,并进入断点的时候会变成蓝色,这个时候再点击告诉浏览器继续执行,直到遇到下一个断点(简单一句话,进入断点的时候,点击跳出这个断点,继续执行)。
3.  第二个icon点击后执行完这行代码,执行下一行代码。
4. 第三个icon点击后,会进入下一个函数调用的位置,继续点击就和第二个icon一样了，都是继续执行一行代码，直到这个函数调用完毕,再点击恢复进入下一个调用的函数。
5. 第四个icon点击后快速的执行完当前的函数。
6. 第五个icon和第二个是一样的。
7. 第六个icon点击将当前所有的断点禁用掉,再次点击恢复正常的断点。
8. 监视可以观察一个变量的值,变量改变,观察里的值也改变。
9. 断点,会记录下当前的所有断点,遇到异常时暂停,即 程序抛出错误时,暂停代码的执行,在下面他会记录上程序中的断点。
10. 作用域，作用域三个属性,
11. 第一个属性本地,代表了当前作用域所能够使用的局部变量,以及当前的this指向。
12. 第二个属性脚本，代表当前统计到的dom节点元素
13. 第三个属性全局,统计了当前全局作用域中的变量
14. 调用堆栈，代表当前是谁调用的这个函数。

• 四.视频案例

• 20230328_221012