主要内容：
- 记录ex的 $_
- 记录现任的 $0
- 简洁的 $(selector) 和 $$(selector)
- 拷贝Object的 copy(Object)
- 更优雅的打断点 debug(function)
- 列出对象的所有属性 dir(objcet) 和 列出事件的getEventListeners(object)
- 记录方法的 monitor(function) 和 记录事件的 monitorEvents(object[, events])
- 表格化显示object table(data[, columns])
记录ex的 $_
$_是上一次表达式的计算结果。
举个例子： 需要计算每天,每年都有多少秒。
很简单：
image
记录现任的 $0
调试的时候，很方便的取到选择的dom节点
image
另外$1 $2 $3 $4 是前几次选择的dom，不过这几个就更不常用了。
简洁的 $(selector) 和 $$(selector)
很多时候，页面没有引入jQuery之类的库或者是这些库被作为模块加载到页面中，那么window中就不会有dom选择器，这时候我们一般会用：
1 | document.querySelector() |
或者是
1 | document.querySelectorAll() |
其实在Chrome中他们有两个好基友，分别是$(selector) 与 $$(selector)。有了这两位以后，再也不要输入那么长的API了。
image
拷贝Object的 copy(Object)
右键复制HTML？不，有更好的：
image
更优雅的打断点 debug(function)
很多时候，我们需要在运行到某一个方法的打个断点，之前的方式是打开这个文件，然后点一下，设置一个断点，但现在有一种很优雅的方式来做到这个：
比如，我想在jQuery.data方法的时候中断下：
对了，这幅图，还复习了前面两个优雅的方法。
image
然后，就会跳转到sources调试的地方，这对于被压缩的代码，更是一种方便。
image
对了，取消的只要一行代码：
1 | undebug( function) |
列出对象的所有属性 dir(objcet) 和 列出事件的getEventListeners(object)
举个例子，我们想看一个dom节点的所有属性：
image
如果想看这个dom上都有一些什么事件：
image
是不是很优雅~
记录方法的 monitor(function) 和 记录事件的 monitorEvents(object[, events])
还是用jQuery的data来举例，有时候我们只是想知道这个方法被调用几次还有参数之类的，那么可以
image
如果需要监控事件被调用了几次、event对象是什么：
image
1 2 3 4 | monitorEvents( window, "resize"); unmonitorEvents( window, "resize"); monitorEvents( window, [ "resize", "scroll"]) unmonitorEvents( window, [ "resize", "scroll"]) |
可以监控的事件有：
| Event type | Corresponding mapped events |
|---|---|
| mouse | “mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel” |
| key | “keydown”, “keyup”, “keypress”, “textInput” |
| touch | “touchstart”, “touchmove”, “touchend”, “touchcancel” |
| control | “resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset” |
表格化显示object table(data[, columns])
和后台开发扯皮数据的时候特别有用，丢这截图给他，用你的优雅，亮瞎他，挥一挥衣袖，哈哈哈。
image
主要内容：
- 随意的文件跳转
- 随意的方法跳转
- 灵活的断点设置，我要你停你才停
- 快速打开关闭Console
- Elements页卡中几个有用的快捷键
- 指定的XHR断点
- 快速模拟移动设备
之前有分享到我们可以通过 来提高我们的开发效率。除此之外，还有一些比较有趣的快捷键和调试方法，也能帮助提高大家的生产效率。
几个小事项：1.文中提到的快捷键 command 在WIN下都是对应Ctrl；
2.当焦点在dev tools上时，快捷键才有效~。随意的文件跳转
使用Sublime的同学，一定非常喜欢command + p，这种随意的文件跳转，其实dev tools中也有类似的跳转，而且快捷键也是：
1 2 | command + p // 跳转到对应文件 command + p + : + 数字 // 跳转到对应文件对应行 |
随意的文件跳转
是不是再也不用在Sources中，用鼠标一个一个找文件了。
随意的方法跳转
Sublime中，command + R是跳转到方法，漂亮的是 dev tools中也有类似的快捷键：
1 | command + shift + o |
来，我们先用command + p打开一个文件，然后command + shift + o,跳转到任意一个方法。
随意的方法跳转
灵活的断点设置，我要你停你才停
很多时候，需要在循环中打个断点，着实麻烦，不得不一次又一次的运行循环，直到我们需要的那个条件时候停止，手快的时候多按了，那就只好从头再来一次了。
我们在断点的时候是可以设置一个 Breakpoint 的,满足条件的时候才停止，下图演示了一个，当消息id为所确定消息时候，断点才生效。
灵活的断点设置
快速打开关闭Console
屏幕不是很大的时候，一般都都会关掉Console，使得代码的可视范围能大一些，然后通过点击右上角的Show/Hide drawer按钮来打开或者关闭Console。其实这时候，可以快捷的使用ESC键来打开或者关闭Console。
快速打开关闭Console
Elements页卡中几个有用的快捷键
1.方向键快速选择，上下键快速导航，左右键收起展开；
2.enter快速编辑属性；
3.tab属性切换；
4.H键快速隐藏dom，知道这个快捷键之前，我要么删除dom看效果，要么手工输入display:none，有H就方便多了。
Elements
指定的XHR断点
有时候，我们需要在指定的xhr请求的时候，有一个断点，那可以这样：
指定的XHR断点
然后可以通过call stack快速的找到对应的代码。
快速模拟移动设备
打开dev tools，然后执行以下快捷键：
1 2 | command + shift + M // 切换模拟Device command + shift + R // 刷新页面。 |
模拟移动设备
另外，强烈建议大家都升级到chrome 38以上版本，可以模拟网络环境，对移动开发真是在好不过了。