JS调试之Chrome Sources面板

2020-05-30  本文已影响0人  火燎菠萝

提到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 添加断点

如上图所示,当程序在断点处停止时,调试工具允许我们做很多事:

我们也可以选择让程序继续运行来进行调试,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);

它的作用是运行下一行代码,然后停住,如果下一行代码里有函数调用,Chrome是不会进入该函数的,而是直接将该函数跑完。当程序停在断点A时,点击跨过,程序会进入函数getSum,停在函数getSum的第一行。了解“调用过程”的同志可以这么理解,这个操作前后,调用栈的内容是不变的。

小结

这一篇,老菠介绍了chrome的sources面板,和断点调试的一些基础概念。希望对你有所帮助

上一篇下一篇

猜你喜欢

热点阅读