优雅且高效的使用Chrome调试前端(Chrome Developer Tools)下

作者:admin 时间:2015/4/3 21:05:43 访问量:840

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

主要内容

  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快速打开关闭Console

Elements页卡中几个有用的快捷键

1.方向键快速选择,上下键快速导航,左右键收起展开;

2.enter快速编辑属性;

3.tab属性切换;

4.H键快速隐藏dom,知道这个快捷键之前,我要么删除dom看效果,要么手工输入display:none,有H就方便多了。

ElementsElements

指定的XHR断点

有时候,我们需要在指定的xhr请求的时候,有一个断点,那可以这样:

指定的XHR断点指定的XHR断点

然后可以通过call stack快速的找到对应的代码。

快速模拟移动设备

打开dev tools,然后执行以下快捷键:

				
1
2
				
command + shift + M // 切换模拟Device
command + shift + R // 刷新页面。

模拟移动设备模拟移动设备

另外,强烈建议大家都升级到chrome 38以上版本,可以模拟网络环境,对移动开发真是在好不过了。

返回顶部