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执行的中止/继续/步入/步过button，以及可以使代码在发生异常时暂停的button。本文的余下部分。将具体介绍这些功能的使用。

执行控制button组在Source面板的右上方，经过它们可以单步调试咱们的代码。这些button各自是:

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

步过（F10）：通常咱们说的单步就是指这个。一行一行的运行当前的代码。和「步入」有点不一样的是，当运行到某个方法的时候。「步过」会直接返回方法的运行结果，断点会运行到当前代码段的下一行。「步入」则会进入方法内部的代码。

通常咱们调试的时候，先经过步过，查看方法的输出，假设输出有误，则步入到方法内部调试。

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

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

步入（F11）：在通常的代码上。和「步过」效果是同样的。在方法运行的代码行上。「步入」会进入到方法定义的内部。

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

切换断点状态：可以高速的切换断点的启用/停用状态。

当咱们临时不需要断点但愿代码直接运行的时候。就可以经过这个button来实现。停用断点并不会删除已经打上的断点。当需要继续使用断点时候。再次点击就能够启用断点。

括号里是这些单步调试button的快捷键，经过快捷键。可以更方便的进行调试。

经过断点进行调试

断点可以在某个特定的地方。将程序临时中止。进入断点不会终止程序的运行。咱们可以随时继续运行。

经过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请求从server上取得一些数据显示到页面上。假设没有勾选「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代码，通常也是为了解决这些事件处理代码的问题。好比页面上某个button点击不起做用了，一般咱们会去HTML文件里找到相应的元素，而后去JavaScript文件里寻找相应的事件处理代码，假设是大型的项目。这工做是比較花时间的。

DevTools提供了事件断点，可以针对JavaScript的各类事件进行中断。方便咱们进行调试。

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

即时编辑

在Source面板中，可以直接编辑打开的js文件。好比咱们可以插入一些alert或者console语句来输出变量的值，直接在Source面板中改动，按下Ctrl+S就会起做用了。DevTools在咱们即时编辑JavaScript并保存后，会提醒咱们对应的改动，并不会影响到实际的文件，和以前讲的Element工具同样，一旦页面刷新。改动就会被还原。

这又是一个不去改动代码进行调试的好方法~

异常追踪

敲代码的时候经常碰到异常，好比在写文件处理的时候。经常需要对找不到文件的状况进行异常捕捉，对于JavaScript也是同样的。

当JavaScript的运行和预期不符的时候，好比点击某个button没有发生想要的效果，那么很是有多是在点击事件中抛出了异常，咱们可以打开命令行，会看到一些异常信息，发生异常的文件以及行号。点击右边的文件名称和行号可以高速在Source面板打开对应文件并跳转到出错代码行。

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

代码格式化

为了下降JavaScript文件的大小以加快页面加载速度，一般会对JavaScript文件作压缩。压缩主要作的是去掉代码中多余的空行和空格，以及把变量名简化，有的还会对代码进行等效替换以混淆加密JavaScript代码。当咱们调试站点的时候，面对这些压缩过的代码，可能无从下手。

一般会想到去用一些代码格式化工具带让压缩后的代码加上适当的缩进和换行来便于咱们理解。DevTools就提供了这么一个代码格式化工具。

点击Source面板编辑区下方的两个括号的button。就可以开启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/

（完）