优雅且高效的使用Chrome Developer Tools（上）

Abstract：Chrome Developer Tools是前端开发不可缺乏的利器，这里介绍几个有趣的Command Line API，使得开发调试过程当中，不经意的透露出那点点的优雅。

主要内容：

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的 $_

$_是上一次表达式的计算结果。

举个例子： 须要计算天天,每一年都有多少秒。

很简单：

记录现任的 $0

调试的时候，很方便的取到选择的dom节点

另外$1 $2 $3 $4 是前几回选择的dom，不过这几个就更不经常使用了。

简洁的 $(selector) 和 $$(selector)

不少时候，页面没有引入jQuery之类的库或者是这些库被做为模块加载到页面中，那么window中就不会有dom选择器，这时候咱们通常会用：

1	document.querySelector()

或者是

1	document.querySelectorAll()

其实在Chrome中他们有两个好基友，分别是$(selector) 与 $$(selector)。有了这两位之后，不再要输入那么长的API了。

拷贝Object的 copy(Object)

右键复制HTML？不，有更好的：

更优雅的打断点 debug(function)

不少时候，咱们须要在运行到某一个方法的打个断点，以前的方式是打开这个文件，而后点一下，设置一个断点，但如今有一种很优雅的方式来作到这个：

好比，我想在jQuery.data方法的时候中断下：

对了，这幅图，还复习了前面两个优雅的方法。

而后，就会跳转到sources调试的地方，这对于被压缩的代码，更是一种方便。

对了，取消的只要一行代码：

1	undebug( function)

列出对象的全部属性 dir(objcet) 和 列出事件的getEventListeners(object)

举个例子，咱们想看一个dom节点的全部属性：

若是想看这个dom上都有一些什么事件：

是否是很优雅~

记录方法的 monitor(function) 和 记录事件的 monitorEvents(object[, events])

仍是用jQuery的data来举例，有时候咱们只是想知道这个方法被调用几回还有参数之类的，那么能够

若是须要监控事件被调用了几回、event对象是什么：

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])

和后台开发扯皮数据的时候特别有用，丢这截图给他，用你的优雅，亮瞎他，挥一挥衣袖，哈哈哈。

转自：这里