使用Chrome Dev Tools, deb.js调试Javascript小技巧

本文讲介绍一些基于 Chrome Dev Tools 的实用的客户端Javascript 调试小技巧。我将重点关注那些无从下手，不知道该在哪儿添加断点的情景。

首先看下本文主题：

找出哪段代码正在修改了页面

找出谁发送了某个ajax请求

在抛出异常时触发断点

条件断点

事件断点

编程断点

常用调试代码片

给某个函数设置断点

搜索对象的属性

访问对象某个属性时

用deb.js找出谁调用了某个函数

Chrome Dev Tools 调试器

首先让我们打开 Chrome Dev Tools 设置一个断点。使用Ctrl+Shift+I 或 Cmd+Option+I ，然后选择一个源代码文件，点击其中行号就可打上断点：



问题是，很多情况下我们完全不知道该把断点打在哪里。比如说调试别人写的代码的时候。

接下来让我们看看Chrome Dev Tools 将如何帮助我们解决上述难题。

找出哪段代码修改了页面

一种常见的情景为：页面的某个部分被修改了，但到底是被哪段代码修改的不是很清楚。通过选中某个HTML元素，右键就可以添加一个断点，它会在该元素被修改时触发：



有三种选项可以检测页面的更改：

子树更新：只要元素的任一子元素被更改，即触发断点。这是最经常使用的选项。

属性更新： 当元素的属性被更改时触发断点。

节点移除：当元素从文档移除时触发断点。

找出谁发送了某个ajax请求

有时候我们只知道发送了一个ajax请求，但不清楚是哪段代码干的。在 sources 选项卡下有一个 “XHR breakpoint”面板，可以选中“Any XHR”添加ajax断点:



另外，面板头部的点击加号，可以添加条件ajax断点，只有当请求的url包含匹配串时才会触发。

在抛出异常时触发断点

Chrome Dev Tools 允许我们在异常抛出时，使用调试器暂停程序。这项功能可是用 sources 选项卡下的暂停按钮激活。暂停按钮下的复选框用来限制只有当异常未被捕获时，才使用该断点暂停程序：



这种方法可以及早发现错误，防止错误无声无息的被忽略在console中。

条件断点

有时候我们不想断点每次都被触发。比如，我们只想当函数的参数等于某个特定值时才触发断点。

你可以右键点击行号，选择 Edit breakpoint 选项来添加判断条件:



在判断条件中你可以使用任何可访问的局部变量。

事件断点

除了ajax，所有类型的事件都可以用来触发断点：clicks, double clicks, blur/focus , setTimeout等等。这些断点可以在 source 选项卡下的 Listener Breakpoints 面板里设置：

编程断点

可以简单的添加下面代码来触发断点：

debugger;

当执行到这行时，调试器会被触发，就像是在这行设置了断点一样。

这个功能很有用，可以当做是手动设置断点的一种方式。

常用调试代码片

Chrome Dev Tools 允许开发者保存一个小代码片供未来之用。这个功能在 source 选项卡下的 Snippets 子选项卡里：



这个功能可以用来保存你或其它人开发的，经常使用的调试代码片。一些我最经常使用的代码片来自于 Paul Irish(Google Dev Tools evangelist)

将这些代码片复制到你的开发者工具中，你可以随时随地的通过console访问它们。后面的章节我们将简单看一下这些代码片。

给某个函数设置断点

stopBefore.js 代码片允许我们给某个函数设置断点，它会在函数被调用时触发。例如，下面的代码将会在 document.getElementById 函数调用之前触发断点：

stopBefore(document, 'getElementById')

搜索对象的属性

grep.js 代码片允许我们在对象及其原型链中搜索拥有匹配条件的属性。例如，下面的语句将会搜索document对象中所有带有get的属性：

grep(document, 'get');

访问对象某个属性时触发断点

debugAccess.js 代码片允许我们访问对象某个属性时触发断点。例如，下面的代码将会在每次访问document.cookie 时触发断点。

debugAccess(document, 'cookie');

用deb.js找出谁调用了某个函数

作为结束，让我们来看看deb.js，一个微型JavaScript 调试库。

首先，将下面script标签放到网页头部，要在任何其它script文件之前：

<script src="deb.min.js"></script>

然后调用 .deb()来标记一个需要调试的函数：

var calculateSomething = function(cb) {
// ...
}.deb();

当函数被调用时，console就会输出下面信息：

Deb.js output

我们可以看到，deb.js 打印出了很多信息：

函数参数的值

栈调用记录

返回值

执行时间

原文：Javascript debugging tips using the Chrome Dev Tools, deb.js and more