当我们开发现代网页的时候都会用一些第三方的框架或者库，它们几乎都是经过测试并且相对而言Bug较少的。不过当我们调试我们自己的脚本的时候也会一不小心跳到这些文件中，引发额外的调试任务。解决方案呢就是禁止这部分不需要调试的脚本运行，详情可见这篇文章：: javascript-debugging-with-black-box。
在较复杂的调试情况下发现关键元素 在一些复杂的调试环境下我们可能要输出很多行的内容，这时候我们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分，然后就可以在Inspector中进行过滤。不过有时候我们还是希望能够自定义显示样式，你可以用CSS来定义个性化的信息样式：
console.todo = function(msg) { console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;', ‘–‘, msg, ‘–‘); } console.important = function(msg) { console.log(‘ % c % s % s % s', ‘color: brown; font - weight: bold; text - decoration: underline;', ‘–‘, msg, ‘–‘); } console.todo(“This is something that' s need to be fixed”); console.important(‘This is an important message');
在console.log()中你可以使用%s来代表一个字符串 , %i 来代表数字， 以及 %c 来代表自定义的样式。
九、监测指定函数的调用与参数
在Chrome中可以监测指定函数的调用情况以及参数：
var func1 = function(x, y, z) { };
这种方式能够让你实时监控到底啥参数被传入到了指定函数中。
十、Console中使用$进行元素查询
在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询，(‘css-selector') 会返回满足匹配的第一个元素，而$$(‘css-selector') 会返回全部匹配元素。注意，如果你会多次使用到元素，那么别忘了将它们存入变量中。
十一、Postman
很多人习惯用Postman进行API调试或者发起Ajax请求，不过别忘了你浏览器自带的也能做这个，并且你也不需要担心啥认证啊这些，因为Cookie都是自带帮你传送的，这些只要在network这个tab里就能进行，大概这样子：
十二、DOM变化检测
DOM有时候还是很操蛋的，有时候压根不知道啥时候就变了，不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你，你可以监测属性变化等等：
