chrome dev-tools功能很强大。相信大多数人使用最多的一个api就是console.log,这很有用,但是这只是chrome 调试api 之一,还有很多其它非常强大的api!推开门,是另一片风景。
console.log
其它没啥可讲,主要看看其格式化功能:
> console.log("I am %d years old, my name is %s",18,"Davin")
> I am 18 years old, my name is Davin
输出对象:%O,var t={name:"Davin",age:18}
:
![](https://i-blog.csdnimg.cn/blog_migrate/624369972fe8b14a9e1ca55339fc5067.webp?x-image-process=image/format,png)
使用css样式:%c:
![](https://i-blog.csdnimg.cn/blog_migrate/64c85160330404e5c9b79540ebbee7f7.webp?x-image-process=image/format,png)
是不是似曾相识? 百度首页按f12看吧。
显示错误和警告:console.error、console.warn
![](https://i-blog.csdnimg.cn/blog_migrate/55ef202036f7c0e7a61d603f009d5015.webp?x-image-process=image/format,png)
注:除过这些,console还有count、assert、dir等方法,详情移步chrome console api.
$_
$_代表上一个语句的执行结果:
![](https://i-blog.csdnimg.cn/blog_migrate/838f7a445f5f00d42d17524dff2ca267.webp?x-image-process=image/format,png)
$0 - $4
代表inspect最近选中的5个dom对象,$0代表最近一次选中的dom。这非常有用,我们可以在elements面板中用鼠标单击某个dom,如果要对该dom进行操作,直接在命令行输入$0便是该dom的引用.
![](https://i-blog.csdnimg.cn/blog_migrate/036a1b17e4d07ee7d6e6f065a4c87082.webp?x-image-process=image/format,png)
$(selector)、$$(selector)
使用css选择器选取dom, 前者只匹配第一个元素,是document.querySelector() 的一个别名,后者会返回所有,是document.querySelectorAll().的别名。
![](https://i-blog.csdnimg.cn/blog_migrate/c1aa0edfacc58ceb6938789f79ae950a.webp?x-image-process=image/format,png)
注意:如果"$"符已在js中定义,则会覆盖系统原始的$,当页面中引入jQuery时,$(jQuery)将会覆盖调试命令中的$。区分$有没有被覆盖的一个简单的方法是查看其定义:
![](https://i-blog.csdnimg.cn/blog_migrate/a21662f84c6e84bb161c8c3b05adf2de.webp?x-image-process=image/format,png)
下面是引入Neat.js后,neat会定义$:
![](https://i-blog.csdnimg.cn/blog_migrate/2afedde3bd46eaded43adc76bfb250fb.webp?x-image-process=image/format,png)
clear()
清楚控制台的所有输出
copy(object)
将object拷贝到剪贴板
debug(function)
调试某个函数,当指定的函数被执行时将会断在被调试函数的源代码的第一句。
![](https://i-blog.csdnimg.cn/blog_migrate/8a05e9f6d4d35b85939a7fe8127f6472.webp?x-image-process=image/format,png)
inspect(object/function)
查找某个对象或函数。执行后会定位到该对象/函数处。
![](https://i-blog.csdnimg.cn/blog_migrate/4d1dd7f95696232109169fa52f49a835.webp?x-image-process=image/format,png)
命令行输入后,Elements面板中会自动选中body.
![](https://i-blog.csdnimg.cn/blog_migrate/12dc32a1d9aacdf103ac047f14b32631.webp?x-image-process=image/format,png)
monitor(function)
观察某个函数被调用的情况:
![](https://i-blog.csdnimg.cn/blog_migrate/fcbab7046b9fbbc997ae4564e20ed636.webp?x-image-process=image/format,png)
monitorEvents(object[, events])
观察某个对象发生的事件.如下,观察当前窗口大小变化的事件。
![](https://i-blog.csdnimg.cn/blog_migrate/39a29fa04c57561dfe7444cafe01ddc1.webp?x-image-process=image/format,png)
可以同时观察多个事件:
monitorEvents(window, ["resize", "scroll"])
可以和$0-$4结合使用:
monitorEvents($0, "key");
注:$0为一个input,观察其键盘事件。
当然也存在着相应的解绑事件,如下:
undebug(function)、unmonitor(function)、unmonitorEvents(object[, events])
getEventListeners(object)
获取object的所有事件listeners.
![](https://i-blog.csdnimg.cn/blog_migrate/be8481daa3499ede037c440ac38cf1d6.webp?x-image-process=image/format,png)
输出document DOMContentLoaded事件listener源码。
keys(object)、values(object)
查看对象的key、value
![](https://i-blog.csdnimg.cn/blog_migrate/6af7dcab05cc18016a69c3d426a5be76.webp?x-image-process=image/format,png)
table(data[, columns])
将对象数据以表格形式显示,columns为可选的列标题。
![](https://i-blog.csdnimg.cn/blog_migrate/05200854c6a24333b6298c83cd632923.webp?x-image-process=image/format,png)
详细的文档请参考:Command Line API Reference
原文链接:http://www.jianshu.com/p/a894f7f8d27d
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。