作为一名前端开发者，当程序出现问题时你是怎么去排查的呢？相信大部分人是通过 alert 和 console.log 来解决的。诚然这种方式能够解决我们平时遇到的大部分问题，但当我们遇到更为复杂的问题时，上述方式并不能帮助我们高效地解决问题，这时我们可以通过谷歌开发者工具(CHROME DEVTOOLS)的 js 断点调试功能来帮助我们更高效地排查和解决问题。
Source 面板介绍
Source 面板是我们在进行断点调试时的主要功能区域，我们可以在该面板中对已请求资源进行观察调试。
首先我们打开谷歌开发者工具，打开谷歌开发者工具有以下三种方法：
- 在Chrome菜单中选择 更多工具 > 开发者工具
- 在页面元素上右键点击，选择 “检查”
- 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
Sources 面板
Source 面板主要分为内容源区(左)、显示区(中)、调试功能区(右)三个区域。
－－内容源区，分为 Sources、Content scripts 和 Snippets 三个标签 。其中Sources 是指页面中请求的各种资源，它是按照域来划分各种不同的请求资源的（如果你有使用抓包工具 Charles 的经验，那么你会发现这里跟 Charles 中的 Structure 模式是类似的）；Content scripts 是指谷歌的扩展程序；而 Snippets 是指创建的小脚本，我们可以在该标签内创建我们自己的脚本并执行它。这里我们只需要关心 Sources 即可。
－－显示区，显示所选择的资源内容，在进行 js 断点调试中，我们需要在该区域设置断点，并且在调试过程中，我们可以在该区域获得许多关于变量和函数的信息。
－－调试功能区，在该区域我们根据不同的调试需求进行不同的操作，如执行下一步代码、激活和禁用断点，在断点调试中观察程序在执行中的函数调用栈、作用域链，以及设置其它各种不同类型的断点等等。
Source 面板调试功能区
我们可以看到调试功能区上方有各个不同的按钮，当鼠标移至该按钮上方时会出现对该按钮功能的简短介绍，从左至右如下：
Pause/Resume script execution ：暂停/恢复脚本执行。
Step over next function call ：跳过下一个函数调用栈。即不遇到函数时，执行下一步；遇到函数时，不进入函数直接执行下一步。
Step into next function call ：跳进下一个函数调用栈。即不遇到函数时，执行下一步；遇到函数时，进入函数执行上下文。
Step out of current function ：跳出当前函数。
Deactivate/Activate breakpoints ：停用/激活全部断点。
Pause on exceptions/Don't pause on exceptions ：暂停捕获异常/不暂停捕获异常。
下方则是一些不同的断点调试模式或者是调试过程中一些信息的观察等：
Watch ：观测表达式。为目前断点添加表达式，使得每次断点往下走一步都会执行你的代码。
Call Stack ：函数调用栈。函数调用栈是指一个存放各个执行上下文的栈(一种先进后出的数据结构)。
Scope ：作用域链。每个执行上下文都有其作用域链，作用域链包含了当前执行上下文和上层执行上下文的变量对象。
Breakpoints ：js 代码行断点。
XHR Breakpoints ：异步请求断点。
DOM Breakpoints ：DOM节点断点。
Global Listeners ：全局监听。
Event Listener Breakpoints ：事件监听断点。
js 代码行断点调试
js 断点调试的模式有许多种，本文主要介绍的是最常见的代码行断点调试。
1.断点设置
在第一部分我们说过 Source 面板主要分为内容源区(左)、显示区(中)、调试功能区(右)三个部分，当我们在内容源区选择了包含有js代码的资源后，显示区则会显示相应的源代码，只要在显示区中显示代码行数的地方点击即可设置断点。
设置后在调试功能区的 Breakpoints 则会显示出我们当前设置的断点，在这里能够激活禁用或删除断点。
2.观察信息
js 代码行断点调试
3.执行下一步代码
最后在调试功能区的的上方按钮部分，我们根据需要点击不同的按钮，执行下一步的操作，观察代码执行情况和变量函数信息等。
网友评论