前言

来了来了，今天带着source面板走来了。作为第三个出场的面板，主要用于查看 web 应用的资源列表和查看及调试js代码。

source

整个source面板如下图，左侧展示当前页面内所引用资源的列表；中间区域展示的资源内容以及一些断点/修改操作；右侧是主要的操作内容，比如监听、当前函数的调用堆栈、事件断点等...

可在该区域查看打开的文件的脚本，也可以在区域内下断点，打断指定执行代码行。

打断点方式：

continue：继续执行代码，直到遇到另一个断点

step_over：按正常步骤，应该会一行一行的执行相关代码，以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数，点击此按钮将不会进入该函数，而是直接略过，将焦点留在当前函数上。

step_into：进入被调用的函数并且调试器将将其执行到该函数定义中的第一行。

step_out：在已进入一个函数后，单击此按钮将导致函数定义的其余部分的运行，调试器将将其执行到父函数。

step: 仅下一步操作。

disable-breakpoints：控制断点开/关的按钮。

pause-gray：在异常处产生断点。

对加入监听列表的变量进行监听,在该面板的右侧有添加变量和刷新变量列表的按钮。

在断点11，12，13时所监听到的值分别是undefined，0，1。

函数调用堆栈显示了该函数的调用路径，在哪个方法的哪一行被调用，依次往上推。

上图在fnC下断点，该面板显示fnC函数的执行路径，分别是从fnA调用fnB，fnB再调用fnA，并且函数调用堆栈列表中还有每一步调用分别在哪个文件和在文件的第几行。

当前断点所在函数执行的作用域内容。

当前作用域里的对象是本地参数_obj和Global，this指向window，之后我们执行下一步，去下一个断点看看。

现在作用域对象是本地对象和Global，this指向obj。

展示断点列表，将每个断点所在文件/行数/改行简略内容展示。

对达到满足过滤条件的请求进行断点拦截，点击该面板右侧加号按钮，会跳出"Break when URL contains"以填写过滤条件。

打开这个列表，可以在监听事件并且在触发该事件时进入断点，调试器会停留在触发事件代码行。只需要展开事件列表，选择要监听的事件打上勾即可。

关于source的介绍就做这么多，bye～