优雅且高效的使用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"])

     

可以监控的事件有：

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

优雅且高效的使用Chrome Developer Tools

原文：http://my.oschina.net/u/564758/blog/510574