JavaScript调试技巧

1、 将 objects 显示为表格

x1.png

2、使用 console.time() 和 console.timeEnd() 来标记循环耗时

x2.png

3、在复杂的调试过程中寻找重点
在更复杂的调试中，我们有时希望输出很多行。你可以做的事情就是使用更多控制台函数来保持良好的输出结构，例如, console.log, console.debug, console.warn, console.info, console.error等等。然后，可以在控制台中快速浏览。但有时候，某些 JavaScrip 调试信息并不是你需要的。现在，可以自己美化调试信息了。在调试 JavaScript 时，可以使用 CSS 并自定义控制台信息，例如

x3.png

x4.png

4、在控制台中快速访问元素
在控制台中执行 querySelector ，一种更快的方法是使用美元符。$('css-selector') 将会返回CSS选择器的第一个匹配项。$$('css-selector') 将会返回所有匹配项。如果多次使用一个元素，可以把它保存为一个变量。