Chrome development tools学习笔记(5)

调试JavaScript

随着现在JavaScript应用的越来越广泛，在面对前端工作的时候，开发者需要强大的调试工具来快速有效地解决问题。我们文章的主角，Chrome DevTools就提供了这么个工具来帮助我们减少调试JavaScript代码的痛苦。

顺便说下，不同版本的Chrome浏览器的DevTools可能略微有所不同，除了数字递增的版本号以外，Chrome浏览器包括Stable正式版、Beta测试版、Dev开发版、Canary金丝雀版以及鼻祖 Chromium版这几个分支。博主所用的360极速浏览器以及市面上大部分双核浏览器的极速核心，都是基于Chromium开发的。从稳定性方面，Stable>Beta>Dev>Canary>Chromium，而更新的速度则正好相反 Chromium>Canary>Dev>Beta>Stable。如果你想要使用最新的DevTools，那么我建议你可以使用Canary版，Canary版可以和现有的其他版本Chrome浏览器互不干扰的共存。

Source面板

DevTools的Source面板使得你可以调试你的JavaScript代码，它提供了一套可视化的V8调试器界面。我们打开DevTools切换到Source标签就可以看到我们的Source面版了。

和其他调试工具一样，在Source面板上，我们可以看到当前页面上所有JavaScript脚本。以及控制JavaScript运行的停止/继续/步入/步过按钮，以及可以使代码在发生异常时暂停的按钮。本文的余下部分，将详细介绍这些功能的使用。

运行控制按钮组在Source面板的右上方，通过它们可以单步调试我们的代码。这些按钮分别是:

继续（F8）：就是我们平常俗称的放行。当遇到断点当前执行被暂停时，点击此按钮，可以继续执行程序直到再次遇到断点暂停。

步过（F10）：一般我们说的单步就是指这个，一行一行的执行当前的代码。和「步入」有点不同的是，当执行到某个方法的时候，「步过」会直接返回方法的执行结果，断点会执行到当前代码段的下一行。「步入」则会进入方法内部的代码。一般我们调试的时候，先通过步过，查看方法的输出，如果输出有误，则步入到方法内部调试。

var a;a = doSomeThing();console.info(a);

如上面这段代码，在第一行执行「步过」和「步入」，效果是一样的。在第二行，「步过」会直接跳过doSomeThing这个方法的内部，使断点执行到第三行。此时查看变量a的值，如果a返回和预期一样，则继续调试。如果a和预期有偏差，则在第二行「步入」到doSomeThing方法的内部。继续通过「步过」和「步入」来进行调试。

步入（F11）：在一般的代码上，和「步过」效果是一样的，在方法执行的代码行上，「步入」会进入到方法定义的内部。

步出（Shift+F11）：当不小心按了步入或者我们需要跳出当前方法的时候，「步出」就可以直接让断点回到调用的父方法处。（在知道这个以前，博主都是一步步单步走出去的）

切换断点状态：可以快速的切换断点的启用/停用状态。当我们暂时不需要断点希望代码直接执行的时候，就可以通过这个按钮来实现。停用断点并不会删除已经打上的断点，当需要继续使用断点时候，再次点击即可启用断点。

括号中是这些单步调试按钮的快捷键，通过快捷键，可以更方便的进行调试。

通过断点进行调试

断点可以在某个特定的地方，将程序暂时停止，进入断点不会终止程序的执行，我们可以随时继续执行。通过DevTools的断点，我们可以对JavaScript，DOM更新，网络连接进行调试。

在Source面板，打开任何一个JavaScript文件。点击代码前面的行号，这行带面前面会有个蓝色标记，这样就打上了一个断点。我们可以设置多个断点，点击其他代码的行号即可。在Source面板的右边，「Breakpoints」侧边栏里面会显示所有已经打上的断点。

通过「Breakpoints」侧边栏中列出的断点前面的checkbox，我们可以启用/停用断点，停用的断点前面的蓝色标志会淡一些。

点击「Breakpoints」侧边栏中列出的断点，可以快速定位到打断点的哪一行代码~

点击已打上断点的蓝色标志，即可移除断点。

右键点击断点蓝色标志，会显示断点相关的菜单：Continue to here、Remove breakpoint、Edit breakpoint...、Disable breakpoint。

在断点的右键菜单中选择「Edit breakpoint...」可以将断点设置成条件断点，我们也可以在没有断点的行号上右键点击，选择「Add Conditional Breakpoint」来设置条件断点。在条件断点的输入框中，可以输入任何返回为true或者false的表达式。只有当表达式为true的时候，断点才会起作用暂停当前程序执行。当我们的断点打在循环或者经常触发的事件的时候，通过条件断点，可以避免程序不必要的暂停运行（不用狂按F8又怕不小心错过断点了）。

博主带过几批实习生，看实习生调试程序经常会在代码中插入alert或者console输出变量内容，一不小心提交代码或者发布的时候，就把这些调试用的语句也带上去了。其实通过条件断点可以做到无需修改代码文件来弹窗或者命令行输出，只要把alert或者console写到条件变量的条件中就可以了~

当断点被触发时，页面JavaScript脚本执行将会被暂停，页面会被灰色遮罩覆盖，除非我们点击Continue或者键盘F8来继续执行程序。

右边的「Call Stack」中会显示出当前的调用栈，点击调用栈的不同部分，可以快速定位到该部分代码，我们可以比较方便的向上跟踪到发生错误的部分代码。

如果想要查看异步的JavaScript调用，例如定时器和XHR事件，可以勾选「Async」checkbox。

关于「Async」官方文档似乎没有仔细讲，博主找了段测试的代码，图中的refreshResList方法是由一个click事件调用的，refreshResList方法发起了一个ajax请求从服务器上取得一些数据显示到页面上。如果没有勾选「Async」，只能看到ajax请求回来的调用栈，无法看到从click事件调用refreshResList再执行ajax请求这个过程。（如果一开始没有勾选「Async」，进入断点以后才勾选是没有效果的，需要再次进入断点，才能看到效果）

像上图的调用栈中出现了很多jQuery的代码，在调试中，可能不希望进入到jQuery的代码中（毕竟需要调试的一般都是我们自己写的代码），而是只获取返回的结果，我们可以在左边的文件列表中右键我们想加入黑盒的JavaScript文件，或者在中间的编辑区右键，从菜单中选择「BlackBox Script」即可将选中的文件加入到黑盒中。

把JavaScript文件加入到黑盒中有什么效果呢？

• 黑盒JavaScript中所有的断点都不会触发，包括了普通的断点，「Pause on exceptions」导致的暂停，以及事件断点等等。
• 步入、步过将会跳过黑盒的JavaScript代码。$("#test").empty()这样的代码，一般来说我们更关注它的结果，除非我们想知道jQuery内部的执行原理才会跟踪进入其内部吧。
• 调用栈中不会显示黑盒JavaScript中的调用过程。

我们可以在DevTools的设置面板中查看和管理黑盒JavaScript文件，还可以使用通配符来匹配黑盒JavaScript文件。

合理的使用黑盒JavaScript功能，可以让我们的调试更专注于我们自己写的代码。

点击Source面板右上角的图标，或者在Source面板按下「ESC」键，会在底部打开一个命令行区域，我们可以在其中输入JavaScript代码进行各种试验。输入的JavaScript代码的作用域和当前调试器暂停的区域一致。也就是说，当触发断点的时候，我们在命令行中敲入的JavaScript代码执行起来，和在代码文件中加入这些JavaScript代码的效果是一样的。又一个可以替代在代码中插入alert进行调试的好方法~

在使用IDE或者编辑器写代码的时候，我们经常用到全局搜索来帮助我们对代码进行定位，例如根据方法名找到定义部分。在Source面板中，在底部的命令行工具的边上有个「Search」的标签页，通过它就可以实现对当前页面上所有JavaScript文件进行全局搜索。其实就是在左边文件浏览区列出的所有文件中搜索指定字符串，并且支持正则表达式查询，比Ctrl+F要好用的多。

调试代码的目的之一就是找到代码发生异常的地方，DevTools提供了「Pause on Exceptions」，即在发生异常的时候暂停代码的执行。开启异常断点的方法是点击右上方的图标，当图标变为，此时即开启了异常断点。当开启异常断点时候，可以通过勾选「Pause On Caught Exceptions」来选择只捕捉未被catch语句捕获的异常，还是捕捉所有的异常。要注意的是，在不同浏览器可能「Pause On Caught Exceptions」开启的方式不一样，在博主的360极速浏览器，是以checkbox的形式选择的，在有的浏览器上，可能是通过再次点击图标来开启。

DOM断点

Source面板的右侧DOM Breakpoints会显示当前打上的DOM断点，会在DOM发生变化的时候触发，我们可以在此处查看已有的DOM断点，关于3种DOM断点在DevTools笔记2中已经讲的很详细了，想了解的朋友们可以移步Chrome development tools学习笔记(2) 进行查看。

XHR断点

在DOM断点的下方，「XHR Breakpoints」我们可以在此处对XHR请求设置断点用来监视页面发起的ajax请求。在DevTools笔记4中，讲了通过NetWork工具对网络请求进行调试，这里的XHR断点，可以让我们从代码的角度来进行调试。

打开「XHR Breakpoints」，默认又一个对于所有XHR请求进行暂停的断点，我们可以右键选择「Add breakpoint」添加对于包含指定文字的URL的XHR请求的断点（如果填入的内容为空，则会匹配所有的XHR请求，和Any XHR效果一样）。

事件断点

事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。我们调试JavaScript代码，一般也是为了解决这些事件处理代码的问题。例如页面上某个按钮点击不起作用了，通常我们会去HTML文件中找到相应的元素，然后去JavaScript文件中寻找对应的事件处理代码，如果是大型的项目，这工作是比较花时间的。DevTools提供了事件断点，可以针对JavaScript的各种事件进行中断，方便我们进行调试。

事件断点就在XHR断点的下方，展开「Event Listener Breakpoints」就可以看到各种JavaScript事件，我们勾选事件前面的checkbox，当相应事件发生时，就会触发断点，将执行中断在该事件的处理代码处，是不是很cool~

即时编辑

在Source面板中，可以直接编辑打开的js文件。例如我们可以插入一些alert或者console语句来输出变量的值，直接在Source面板中修改，按下Ctrl+S就会起作用了。DevTools在我们即时编辑JavaScript并保存后，会提醒我们相应的修改，并不会影响到实际的文件，和之前讲的Element工具一样，一旦页面刷新，改动就会被还原。这又是一个不去修改代码进行调试的好方法~

异常追踪

写程序的时候经常碰到异常，例如在写文件处理的时候，经常需要对找不到文件的情况进行异常捕捉，对于JavaScript也是一样的。

当JavaScript的执行和预期不符的时候，例如点击某个按钮没有发生想要的效果，那么很有可能是在点击事件中抛出了异常，我们可以打开命令行，会看到一些异常信息，发生异常的文件以及行号，点击右边的文件名和行号可以快速在Source面板打开相应文件并跳转到出错代码行。

在Source面板，我们可以看到发生异常的代码被标注出来了，光标移上去可以看到出错的信息，这有助于我们一眼看出那些比较愚蠢的代码BUG。

代码格式化

为了减少JavaScript文件的大小以加快页面载入速度，一般会对JavaScript文件做压缩，压缩主要做的是去掉代码中多余的空行和空格，以及把变量名简化，有的还会对代码进行等效替换以混淆加密JavaScript代码。当我们调试网站的时候，面对这些压缩过的代码，可能无从下手。一般会想到去用一些代码格式化工具带让压缩后的代码加上适当的缩进和换行来便于我们理解，DevTools就提供了这么一个代码格式化工具。

点击Source面板编辑区下方的两个括号的按钮，就可以开启DevTools的「Pretty Print」功能，JavaScript代码会转换成可读性更好的样子显示出来。当我们急需格式化JavaScript代码时候，不用上网去找，我们的浏览器就有。

调试Chrome Extensions

Chrome浏览器相对于其他浏览器的优点之一就是提供了强大的插件功能，通过插件可以为浏览器带来很多额外的功能，简单来说，Chrome Extensions相当于在当前访问的页面上额外执行一些JavaScript代码。这些额外执行的代码，一样可以通过DevTools进行调试。在Source面板左边的文件浏览器中切换到「Content scripts」标签，就可以看到在Chrome Extensions在当前页面上额外加入的JavaScript代码，我们可以像调试一般的JavaScript代码那样调试它们。（这里为了方便理解把Chrome Extensions讲的简单了，实际的Chrome Extensions插件开发远不是这样的，望理解。）

转载自我的技术博客http://www.cc-lab.cn/chrome-dev-tools-5/

（完）