Chrome浏览器我认为它是每个前端er的必备工具之一，部分原因是它速度快，体积小，支持比其他浏览器更多的新功能.我认为的另一部分是因为它的控制台功能强大。说是神器一点都不为过，很方便。但实际上，很多开发者并没有使用到console的本质，只是简单的使用了console.log();其实控制台的功能远不止这么简单。1.console.clearconsole.clear();清空控制台，这个应该和console.log一样广为人知。2.console.log('一般信息')3.console.info('提醒信息')4.console.error('错误信息')5.console.warn('警告信息')大家都会用log，但是很少有人能很好地利用console.error、console.warn等来整理输出到控制台的信息。它们的功能没有太大区别，意义在于对输出到控制台的信息进行分类，或者让它们更加语义化。6.如果console.group和console.groupEnd结合console.group和console.groupEnd，可以把这种分类管理的思路发挥到极致。适用于开发大型、复杂、模块较多的WebAPP时，将各自的日志信息分组到以各自命名空间命名的组中。这样的console信息好像一目了然，不需要再去翻源码去找出哪一行代码是输出的。另外，console.log家族还为我们提供了一个API：第一个参数可以携带一些格式化指令，比如%c,n；看看下面炫酷的效果：当然图片也是可以的，读者可以自己动手尝试修改上面的代码。另外，console.log()接受可变参数，参数之间用逗号分隔，最后输出会用空格字符连接。7.console.table看着这种“黑魔法”，是不是感觉像是在耍花招，其实不止于此！console.table允许我们输出表格。例如：有时后端会发回大量数据。你觉得直接console.log或者通过抓包工具查看会不会让人头晕？这时候console.table就发挥作用了。该把数据以表格的形式呈现出来了，自然一目了然。例如如下：8.console.assert当你希望代码满足一定的条件后才向控制台输出信息，那么你不需要写if或者三元表达式来达到目的，console.assert就是其中之一thescenarios一个很好的工具，它会先对传入的表达式进行assert，只有当表达式为false时才向控制台输出相应的信息。9.console.count除了条件输出的场景，还有一些常见的场景是在计数。当你想统计某段代码执行了多少次时，你不必自己写相关逻辑。内置的console.count可以很好地胜任这样的任务。10.console.dir将DOM节点以JavaScript对象的形式输出到控制台，console.log直接以DOM树的结构输出DOM节点，与元素检查时看到的结构一致。不同的呈现方式，同样的优雅，可以选择各种姿势，总之方便又体贴。11.console.time&console.timeEnd输出一些调试信息是控制台最常用的功能。当然，它的功能远不止于此。在做一些性能测试的时候，在这里也可以很方便的完成。例如，当你需要考虑一段代码执行的耗时情况时，你可以使用console.time和console.timeEnd来完成。测量1000次for循环的时间12.console.profile和console.profileEnd当你想查看CPU使用率相关信息时，可以使用console.profile和console.profileEnd来完成这个需求。这个功能可以通过UI界面完成。Chrome开发者工具中有一个名为Profile的选项卡。使用方法与console.time基本相同。其实在timedevelopertool里面还有一个tab，就是timeline。可以使用Firefox的firebug插件，通过两种不同的方式查看创建1000个数组的cpu占用率和耗时。目前我已经测试了Firefox的firebug插件。只有Firefox49版本的浏览器好用。mydown.yesky.com/pcsof...$说真的，美国的程序员真的很喜欢钱（谁不喜欢），看看PHP，满屏都是$。在Chrome的控制台中，$也非常有用和方便。上面的$_需要理解它的深刻含义才能正确使用，$0~$4代表你选择的最后5个DOM节点。这意味着什么？在页面上右击选择review元素，然后点击弹出的DOM节点树。这些被点击的节点会被记录下来，$0会返回最后一个被点击的DOM节点，以此类推。$1返回上次选择的DOM节点，最多保存5个，少于5个则返回undefined。$同document.querySelector()，通用选择器，选择第一个满足要求的元素15.$$同document.querySelectorAll()，通用选择器，选择所有满足要求的元素16.$x(path)放数组中的匹配节点并返回$x("//div[a]");返回所有子节点包含a的div注意：必须包含双斜线17.copycopy(document.body)然后你可以Ctrl+v。注意：它没有依附于window等任何全局变量，所以在JS代码中无法访问copy方法，所以从代码层面调用copy函数是不可能的。希望有朝一日浏览器能提供相应的JS实现~这样我们就可以通过js代码复制操作，而不需要依赖Flash插件了。18.keys&values这是一对朋友。前者返回由传入对象的所有属性名组成的数据，后者返回由所有属性值组成的数组。具体可以看下面的例子：19.monitor&unmonitormonitor(function)，它接收一个函数名作为参数，比如函数a，每次执行a，都会在控制台输出一条消息，其中包含函数名称a和执行时传入的参数。unmonitor(function)用于停止此监视。20.debug&undebugdebug也接受一个函数名作为参数。函数执行时，自动中断调试。类似于在函数入口处设置断点。可以通过调试器来完成，也可以在Chrome开发者工具中找到对应的源码，然后手动破解。观点。而undebug就是解除断点。而且还有很多其他命令让人不想说，因为其中很多命令都可以通过Chrome开发者工具的UI界面进行操作，比使用控制台输入更方便。Chrome开发者工具文档地址：http://www.css88.com/doc/chro...有兴趣的可以去chrome开发者工具文档，对调试很有帮助文章链接：原文地址
