提到JS的调试，写过JS的同志都知道：简单，console.log解决一切问题。其实JS调试还有很多好用的工具可供选择，使用起来会比直接log更为高效，但是我在工作中很少见到有同事会使用这些工具，老菠的这个系列就是向大家介绍如何使用这些工具的
认识Chrome JS 调试工具
首先，让我们单击键盘上的F12，选中“Sources”一栏，你应该会看到下面的这个界面：
图0.1 Chrome 调试工具 Sources 栏
我们可以把它分成三个部分：文件区域，代码展示/编辑区域，调试功能区域（我自己起的名）。
-
文件区域用来展示文件，你可以在文件区域通过单击选择文件。
-
被选中的文件会展示在代码展示/编辑区，在这里可以对选中的文件进行编辑，保存，添加断点等操作。
-
在调试功能区，我们可以对代码进行调试，查看程序运行的情况。
下面让我们分别详述这几个区域。
1. 文件区域
这是一个文件选择面板，就跟vscode左边的文件栏一样，它又分为几个子栏目：
1.1 Page栏
这一栏想必大家都见过，展示当前网页上的所有文档，基本上就是页面所使用的JS，HTML，CSS，图片这些文件（如下图）
图1.1 文件区域-Page栏
1.2 Filesystem栏
这一栏允许我们选择本地文件：
图1.2 加载本地文件
这个功能使得chrome可以作为一个IDE使用（可能没人会这么用哈），你可以加载本地项目，在编辑区修改，保存
1.3 Overrides栏
这一栏的作用是，可以用本地文件覆盖Page里面的文件。它的用法是，在本地创建一个和Page栏结构完全相同的目录结构，例如，打开百度首页，来到Page一栏，可以看到一个形如top -> www.baidu.com -> index的目录结构
图1.3 百度首页Page
然后我在本地也创建一个同样结构的目录，index.html里的内容是一行文本“hello world”：
图1.4 本地Override目录
然后回到百度，进入Overrides一栏，选择刚才创建好的目录，然后刷新页面，发现页面已经被替换成我的index.html，当然JS文件也可以如此操作。被覆盖的文件上可以看到一个紫色小圆点，说明该文件被本地文件替换
图1.5 载入Overrides
1.4 Content scripts栏
插件的content scripts
1.5 Snippets栏
这个是一个非常实用的功能，允许我们创建代码片段，直接在chrome里运行。
如果你是个web开发者，大概有过这样的经历：想运行一段js代码做实验，怎么办呢？随便找个网页，F12，到console里敲入代码，直接运行。因为浏览器是我们最容易获取的JS运行环境，所以这么做可以让我们快速完成JS小实验。但在console窗口写代码不是很舒服，换行、缩进都很麻烦，调试起来也很烦。这时候可以用Snippets，在这里你可以很舒适地编辑代码，并运行
图1.6 创建代码片段
后面我将借助一段snippet来介绍调试工具的使用
2. 代码展示/编辑区域
这个区域允许我们
- 查看、编辑代码，或浏览其他资源文件
- 在调试过程中添加断点，查看变量的值等
3. 调试功能区域
上文提到，在“代码展示/编辑区域”可以设置断点，当程序运行至断点处，就会暂停运行，这是断点调试的基础逻辑。
我们用下面这段代码为例
function getSum(a, b){
const op1 = Number(a);
const op2 = Number(b);
const sum = op1 + op2;
if(isNaN(sum)){
throw new Error("One of the operation number can't be converted to a number");
}
return sum;
}
function printSum(a, b){
console.log(getSum(a, b));
}
printSum(6, 6);
如果我在第5行打上断点，然后运行程序，那么当程序运行到这一行的时候就会停止：
图3.1 添加断点
如上图所示，当程序在断点处停止时，调试工具允许我们做很多事：
- 我们可以在“代码展示/编辑区域”查看所有变量的值
- 在Watch里也可以访问所有处于该scope的变量，也可以在这里对任意表达式求值
- 查看程序中的线程（Threads），以及线程所处的状态
- 查看程序运行的调用栈（Call Stack），可以选择转移至调用栈的任意一层
- 查看当前所处的作用域（Scope）
我们也可以选择让程序继续运行来进行调试，Chrome提供了多种方法：
3.1 断点调试工具栏
这里以下面这段代码为例，来解释断点调试工具是如何使用的
function getSum(a, b){
const op1 = Number(a);
const op2 = Number(b);
const sum = op1 + op2; // 断点B
if(isNaN(sum)){
throw new Error("One of the operation number can't be converted to a number");
}
return sum;
}
function printSum(a, b){
const sum = getSum(a, b) // 断点A
console.log(sum);
}
printSum(6, 6);
-
继续（Resume）按钮，让程序继续运行，直到遇到下一个断点。
图3.2 继续按钮
当程序停在断点A时，点击继续，程序会运行到断点B，然后停住。再次点击继续，程序会运行至结束。
-
跨过（step over next function call）按钮：让程序前进一行。
图3.3 跨过按钮
它的作用是运行下一行代码，然后停住，如果下一行代码里有函数调用，Chrome是不会进入该函数的，而是直接将该函数跑完。当程序停在断点A时，点击跨过，程序会进入函数getSum，停在函数getSum的第一行。了解“调用过程”的同志可以这么理解，这个操作前后，调用栈的内容是不变的。
-
跨入（step into next function call）按钮：它的作用同样是运行下一行代码，然后停住。
图3.4 跨入按钮
不同点在于，如果下一行代码里有函数调用，Chrome会进入该函数。调用栈里会增加一个函数。
-
跨出（step out of current function call）按钮：它的作用是运行当前函数其余的代码，并从函数中出来，然后停住。
图3.5 跨出按钮
当程序通过了断点A，停在断点B时，点击跨出，函数getSum的余下代码会运行完，最后停在函数printSum的第二行
-
下一步（step）按钮：执行下一条指令？
图3.6 下一步按钮
说实话，老菠没发现这个按钮跟“跨入”按钮功能上有什么区别，有知道的老铁还请不吝赐教。
-
断点开关（Deactivate/Activate breakpoints）按钮：它可以使所有断点失效或生效。
图3.7 断点开关按钮
当处于失效档位时，调试器中的所有断点都不会起作用，程序不会再断点处中断
-
异常中断开关（Pause on exceptions）：处于激活状态时，一旦发生异常，程序就会在异常发生处中断
图3.8 异常中断开关
图3.9 开启异常中断开关后，程序会在异常处中断
小结
这一篇，老菠介绍了chrome的sources面板，和断点调试的一些基础概念。希望对你有所帮助
网友评论