文档章节

优雅且高效的使用Chrome Developer Tools

 土豆td
发布于 2015/09/24 11:17
字数 1529
阅读 94
收藏 8

主要内容

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

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

举个例子: 需要计算每天,每年都有多少秒。

很简单:

imageimage

记录现任的 $0

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

imageimage

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

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

很多时候,页面没有引入jQuery之类的库或者是这些库被作为模块加载到页面中,那么window中就不会有dom选择器,这时候我们一般会用:

1

      
      
document.querySelector()

或者是

1
document.querySelectorAll()

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

imageimage

拷贝Object的 copy(Object)

右键复制HTML?不,有更好的:

imageimage

更优雅的打断点 debug(function)

很多时候,我们需要在运行到某一个方法的打个断点,之前的方式是打开这个文件,然后点一下,设置一个断点,但现在有一种很优雅的方式来做到这个:

比如,我想在jQuery.data方法的时候中断下:

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

imageimage

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

imageimage

对了,取消的只要一行代码:


      
      
1

      
      
undebug( function)

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

举个例子,我们想看一个dom节点的所有属性:

imageimage

如果想看这个dom上都有一些什么事件:

imageimage

是不是很优雅~

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

还是用jQuery的data来举例,有时候我们只是想知道这个方法被调用几次还有参数之类的,那么可以

imageimage

如果需要监控事件被调用了几次、event对象是什么:

imageimage


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

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

imageimage

主要内容

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


本文转载自:http://qywx.gitcafe.io/2014/10/10/%E4%BC%98%E9%9B%85%E4%B8%94%E9%AB%98%E6%95%88%E7%9A%84%E4%BD%BF...

粉丝 0
博文 7
码字总数 660
作品 0
南通
数据库管理员
私信 提问
那些在学习iOS开发前就应该知道的事(part 2)

英文原文:Things I wish I had known before starting iOS development—Part 2 如果你还没读这篇文章的第一部分,请先读完了再来看第二部分。 那些在学习iOS开发前就应该知道的事(part 1)...

TomatosX
2015/06/12
143
0
MX Linux 17 Beta 1 发布,基于 Debian 的 Linux 发行

MX Linux 是基于 Debian 稳定分支的面向桌面的 Linux 发行,它是antiX及早先的MEPIS Linux社区合作的产物。它采用Xfce作为缺省桌面,是一份中量级操作系统,并被设计为优雅而高效的桌面与如下...

周其
2017/11/07
733
1
PHP MVC框架--PHP AMP

欢迎使用 PHPMVC 开源框架 - AMP AMP-优雅精致的WEB应用开发MVC框架。 为什么选择AMP? 01) 快速: 框架核心文件总大小10余KB,0.0001毫秒迅速载入启动。 02) 高效: 安全高效性能、优越的资源控...

Amysql
2012/04/09
2.5K
1
PHP5的MVC框架--TMPHP

TMPHP 是一个简洁高效的PHP5 MVC框架,基本核心特点是:简洁、高效、优雅。 核心特点 纯粹的PHP5面向对象代码特点,纯粹的MVC框架支持 支持多种配置文件 (ini/array) 支持多种模板 (原生PHP...

匿名
2010/10/14
1K
0
nginx: [alert] kill(1726, 1) failed

在启动nginx的时候出现如下命令: 检查语法正常 [root@mytest nginx]# /application/tools/nginx/sbin/nginx -t nginx: the configuration file /application/tools/nginx1.6.2/conf/nginx.c......

菜鸟八哥
2018/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
10分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
11分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
36分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
38分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部