前端开发工具DevTools的详细知识点总结（三）之js调试

source面板

在前面的博客里讲述过Element面板以及Console面板，这两块面板都是很重要也是经常使用到的面板，而今天所要讲述的source面板的重要性和实用性不亚于它俩。
首先，打开source面板：（F12->跳转source）

乍一看，此source面板分有三部分，接下来我们逐一进行讲述。

代码编辑器

此部分面板即为代码编辑器，此部分用于显示指定文件的源代码。
此版块是一定会显示，但是此板块无法单独执行操作，需要与其左边的板块或者右边的板块结合使用来完成自己想要实现的操作。
此板块左上角和右上角有一对对称的按钮，它俩的功能分别是显示/隐藏左/右板块。


此面板左下方有一个{}按钮，它的作用是让缩小后的文件恢复其可读性。
如下图所示：

这样一个源代码文件，代码非常密集，可读性非常差，点击{}按钮。

新生成一个formatted的文件，其代码风格的可读性焕然一新。

编辑 CSS 和 JavaScript

代码编辑器支持代码的修改编辑，其中CSS 更改操作会立即生效，且不需要保存。JavaScript 更改操作不会立即生效，需要Control+S保存后修改然后根据修改的地方进行对应的重运行方可生效。
注意：此操作只能修正在浏览器中运行的代码， 不能真正修正代码此页面的代码，刷新页面就会一朝回到解放前，所以得记得及时修正自己服务器上的代码。

文件浏览器

最左边的板块即为文件浏览器，此板块列出了HTML，JavaScript，CSS和其他文件，包括附加到页面的图像。 Chrome扩展程序也可能会出现在这里。

每点击一个文件就会在其右边的代码编辑器上显示其文件的源代码。（不一定只是代码，图片等文件也可以显示）

点击此版块的 << 符号可看到此版块的五个重要功能区：

1. Page
2. Filesystem
3. Snippets
4. Overrides
5. Content scripts

Page，显示当前页面的一些资源文件。
Content scripts，显示当前浏览器所使用的插件的源文件。

Filesystem，此功能区我暂时还不清楚是干啥的，有兴趣的伙伴可以自己点击其跳转链接进行学习和研究。

Overrides，同上，有兴趣的伙伴也可以自行研究和学习。

这两功能区的内容待我后续学习后再补上。
最后，我们再看看更加实用和好玩的Snippets功能区。

Snippets功能区

简单来说，这个功能区的功能是保存一份自己所编写的js脚本代码段。
创建Snippet : （三种方式）
1.点击 + 号。

2.选择此面板的空白区域，右键->new。
3.Control+Shift+P->Create new snippet。

注意：创建好的snippet保存在浏览器中而不是当前页面里，所以切换到一个新的页面中，此snippet仍然存在。
运行Snippet :（四种方式）
1.选择一条snippet->右键->run
2.点击代码编辑器板块的右下角的三角号按钮。

3.快捷键Ctrl+Enter。
4.Control+P->!+当前snippet文件名->Enter。
注意：Control+Shift+P->Back等价于Control+P
示例代码：

console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

新建一个snippet文件填入此代码段并运行。

Snippet 的其它操作:
选择一条snippet->右键，这里面还有删除此snippet、重命名此snippet以及保存此snippet操作。
编辑Snippet，等同于在代码编辑器板块编辑代码。

JavaScript调试

终于到了最核心的部分，这个板块，顾名思义，围绕调试js代码而展开。

三种调试方式：

1. 控制台console.log()。
2. 代码中添加debugger。
3. devtools里打断点。

第一种方式在控制台面板介绍过也比较简单，这里就不重复说明。第二种方式实质与第三种方式一样，都是通过打断点进行调试，只不过直接在devtools打断点进行调试更为简便。
并且，在调试的时候更加推荐使用打断点的方式。与 console.log() 方法相比，断点可帮助您更快地查找和修正错误。

断点类型

1.代码行断点
普通代码行断点，点击源代码的所在行头即可设置此类型断点，显示为蓝色。

条件代码行断点，选择目标行头->右键->Add conditional breakpoint即可设置此类型断点，显示为黄色。（条件断点可按照设置的条件进行选择行暂停代码运行）

其中可在此版块的Breakpoints中查看并管理已设置的断点。

2.DOM断点
在Element面板中选择一个元素->右键->Break on->三种断点类型可选，也是一个蓝色的断点。

此版块的DOM Breakpoints可以查看所设置的DOM断点。
这个部分属于Element面板的补充内容，将在后续博客更新，这里就不做细讲。
3.XHR/Fetch 断点
可在此版块中的XHR/fetch Breakpoints中添加此类型断点。

4.事件侦听器断点
可在此版块中的Event Listener Breakpoints中添加此类型断点。

5.异常断点
此版块第一行最右边的那个按钮设置此类型断点。


第一行的这个按钮可以取消/开启全部的代码行断点。

调试工具

第一行左边的这五个按钮都是用于代码调试的工具。

第一个按钮：继续执行到下一个断点，如果没有其他断点，则直接执行到结束。（快捷键F8）
第二个按钮：运行下一个代码命令，但不会进入到函数里面。（快捷键F10）
第三个按钮：运行下一个代码命令，会进入到函数里面。（快捷键F11）
第四个按钮，执行完当前函数，跳转到调用此函数的函数。（快捷键Shift+F11）
第五个按钮，功能类似于第三个按钮，只是在异步操作时会有不同的表现。（快捷键F9）
接下来，我们再看看另外三个功能区Watch，Call Stack和Scope。

Watch：显示任何表达式的当前值，可以通过+来添加并查看自己想要看到的表达式的值。
Call Stack：显示嵌套的调用链，如果单击堆栈项（例如“onClick”），调试器将跳转到相应的代码，并且还可以检查其所有变量。
Scope：当前变量，查看当前的所有变量的值，包括局部变量和全局变量。

结语

js调试的基本知识大概就这些，百闻不如一练，看了这么多东西终究不如自己亲自动手操作一番效果来的更好，下期再见！