优雅且高效的使用Chrome Developer Tools

主要内容：

1. 记录ex的 $_
2. 记录现任的 $0
3. 简洁的 $(selector) 和 $$(selector)
4. 拷贝Object的 copy(Object)
5. 更优雅的打断点 debug(function)
6. 列出对象的全部属性 dir(objcet) 和 列出事件的getEventListeners(object)
7. 记录方法的 monitor(function) 和 记录事件的 monitorEvents(object[, events])
8. 表格化显示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

主要内容：

1. 随意的文件跳转
2. 随意的方法跳转
3. 灵活的断点设置，我要你停你才停
4. 快速打开关闭Console
5. Elements页卡中几个有用的快捷键
6. 指定的XHR断点
7. 快速模拟移动设备

以前有分享到咱们能够经过 Command Line API 来提升咱们的开发效率。除此以外，还有一些比较有趣的快捷键和调试方法，也能帮助提升你们的生产效率。
几个小事项：

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以上版本，能够模拟网络环境，对移动开发真是在好不过了。