spacewander
chrome devtool 技巧 之 console
console面板是devtool中使用最多的三个面板之一（另外两个分别是Elements和Sources）。 这一章来介绍下console中的小技巧 :smile:
有一个快捷键可以直接打开console面板：<C-J>。
js上下文
console中运行的函数位于当前js上下文中。什么是js上下文呢？就是假如你现在正处于某个断点，这个断点所在的上下文中有一个变量a，那么在console中你也可以获取这个变量的值。
当然还可以运行上下文中的函数，包括jQuery函数和Underscore函数。以我的看法，插件中的js应该是跟页面共享一个上下文环境的。不过就算你用的插件中使用了jQuery，如果当前载入的页面没有用到jQuery，你还是没办法使用jQuery的。
command line api
下面列出些我觉得比较有用的命令行api。这些api可以直接在console面板中使用。
$()
等价于document.querySelector()
$$()
等价于document.querySelectorAll()
monitor(function) 监控给定函数的调用情况。当函数调用时输出函数调用提示和调用参数。使用**unmonitor(function)**来取消监控。
monitorEvent(object, [events])
监控发生在给定对象上的事件。给定对象可以是window，也可以是$('.some')这样的DOM对象。
给定的事件可以是单个事件，也可以是['click', 'hover']这样的列表。
简直就是神器。美中不足的是不支持mouseenter和mouseleave，不能监控hover事件了。
详细的事件支持列表见下：
https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events
同样是用**unmonitorEvent(object, [events])**解除绑定。
debug(function) 给定函数调用时，自动切换到Source面板开始debug工作。 使用**undebug(function)**解除
console.time(tag) console.timeEnd(tag) 浏览器的新功能：精确到ms的秒表！用来记录方便面的浸泡时间似乎有点大材小用呢
profile(tag) profileEnd(tag) 开启/关闭CPU分析。分析结果需要切换到profiles面板中查看。结果文件名为tag名。 可以看到一段时间内调用的函数（虽然大部分是匿名函数……）
右键菜单
最后谈谈在console中可用的右键菜单。
- 右键菜单，选择Log XMLHttpRequests，就可以记录下所有的xhr，方便调试Ajax。
- 在console面板中显示出来的DOM对象上右键，会看到reveal in Elements panel选项，能跳转到Elements面板对应的位置。
