易网时代-编程资源站
易网时代-编程资源站 if （condition） {debugger;}还可以 根据自己需要 在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。 
DOM断点的类型可能包括：
选定节点树状子目录 （sub-tree） 中的节点变化，
选定节点的属性发生变化，
节点被删除。
避免记录引用类型
当记录对象或数组时， 原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住，在记录和查看期间，代码执行可能会影响观测到的结果 。
例如，在Chrome开发者工具中执行以下代码：
JavaScript
var wallets = [{ amount: 0 }];setInterval（ function（） {console.log（ wallets, wallets[0], wallets[0].amount ）;wallets[0].amount += 100;}, 1000 ）;记录的第二个和第三个属 性的值是正确的，第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时，amount域的值就已经确定了。无论你对同一个引用关 闭并重新打开多少次，这个值都不会变化。 
记录参考类型
永远记得你在记录什么。记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录 引用类型 。
表格记录
在一些开发者工具中，你可以用 console.table 在控制台中记录对象数组。
尝试在你的Chrome开发者工具中执行下列代码：
JavaScript
console.table（[{ id: 1, name: "John", address: "Bay street 1"}, {id: 2, name: "Jack", address: "Valley road 2."}, {id: 3, name: "Jim", address: "Hill street 3." }] ）;输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此， console.table 只能用来显示具有原始类型值的对象构成的二维数据结构。 
异常时暂停
Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。
如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试 技巧教给你 的同事。
Paul Irish发布过一些基本的 调试代码片段 ，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是 很有价值的 。
在函数执行前插入断点
如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试 f 函数，用 debug（f） 语句可以增加这种断点。
Unminify最小化代码
（ 译者注：unminify 解压缩并进行反混淆 ）
尽可能使用 source map。有时生产代码 不能使用 source map，但不管怎样，你都 不应该直接对生产代码进行调试 。
（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）
如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮 {} 位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。
格式化按钮只有在不得已时才会使用。从某种意义上来说， 丑代码就是难看，因为代码中的命名没有明确的语义 。
DOM元素的控制台书签
Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了 A 元素、 B 元素和 C 元素，
$0 表示 C 元素
$1 表示 B 元素
$2 表示 A 元素
如果你又选择了元素 D ，那么 $0 、 $1 、 $2 和 $3 分别代表 D 、 C 、 B 和 A 。
访问调用栈
JavaScript
var f = function（） { g（）; } var g = function（） { h（）; }var h = function（） { console.trace（"trace in h"）; }f（）;Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。