Chrome development tools学习笔记

Posted 2020-09-12 zsychanpin

调试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/

（完）