本文讲介绍一些基于 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