谷歌浏览器调试工具中sources面板

本文导读：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，谷歌浏览器Chrome开发工具中的Sources面板，提供了非常方便的断点调试的功能。

Sources面板是chrome developer tool中的断点调试面板。我们打开Sources面板后其实会在界面中看到如下内容

 

一、区域1

(1)、表示网站文件目录树，它的功能有些类似于Resources面板，主要是显示网页加载的脚本文件：例如css， js等资源文件

(2)、双击选中文件，该文件内容会在区域2中显示，如果你选中的是js文件，那么你可以在区域2种单击行号进行断点调试，只要js执行到了你所标记的这一行，它会停止向下执行并且等待你的命令

(3)、区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css文件

 

 

二、区域2

 

(1)、左侧所选文件的具体内容展示区

(2)、如果打开的JS文件，可以单击这个区域的最左侧，可以给相应的JS设置断点进行调试

 

 

三、区域3

这一模块有俩个可切换区域：

 

scope ：显示当前断点的作用域

watch ：点击+号可添加你所需要监控的变量或者表达式

 

 

四、区域4

 

(1)、断点调试的各个功能键如图

在上图蓝色圆圈中数字，它们分别代表:

1、停止断点调试
2、不跳入函数中去，继续执行下一行代码（F10）
3、跳入函数中去（F11）
4、从执行的函数中跳出
5、禁用所有的断点，不做任何调试
6、程序运行时遇到异常时是否中断的开关

 

(2)、下面这块的功能说明

1、Call Stack 显示当前断点的环境调用栈，就是从该函数起，逐级追寻调用到他的函数名。

2、Breakpoints 当前js断点列表，“点击区域2的行号列”即完成在当前行添加/删除断点操作，添加的每个断点都会出现在此处，双击列表中断点就会定位到内容区的断点上；当某个断点在执行的时候对应的信息会高亮。

3、DOM Breakpoints 当前DOM断点列表列表

[1]、在DOM元素上添加断点，进而达到调试的目的

[2]、DOM断点的添加流程为：打开Elements面板——定位到相关DOM节点——单机鼠标右键，弹出侧边栏——鼠标移动到Break on...上，选择相应选项subtree modifications/attributes modifications/node removal即可。

4、XHR Breakpoints 当前xhr断点列表，可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件，当异步请求触发时的URL满足此条件，JS逻辑则会自动产生断点。

输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

5、Event Listener Breakpoints 事件监听器断点设置处

事件监听器断点，即根据事件名称进行断点设置。当事件被触发时，断点到事件绑定的位置。事件监听器断点，列出了所有页面及脚本事件，包括：鼠标、键盘、动画、定时器、XHR等等。

6、Event Listeners 当前事件监听断点列表