前言:

除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率。

Sources页

command + p 文件跳转

使用Sublime的人或习惯用command + p 进行文件的跳转,在chrome dev tools中其实也有类似的跳转方法。

command + p  

command + p + 文件名 + : + 数字

command + shift + o 任意方法跳转

Sublime中使用command +R 进行方法跳转,而在dev tools中,可以使用command + shift + o 进行任意方法的跳转。

command + shift + o  // 跳转到任意方法

注: 查找某文件中的方法,使用command + pcommand + shift + o 更配哦~

Elements页

  • 使用方向键快,上下键导航,左右键收起展开;
  • H键快速隐藏dom(效果相当于给DOM加入visibility: hidden属性,有别于display:none)
  • Enter进行快速编辑属性;
  • 鼠标右击使用各类方法…

Console页

$_ 表示上次的计算结果

举个栗子

15 * 15  

$_ * 10

$0 获取当前选中的DOM

选中DOM之后,在控制台输入$0

$0


注:$1 $2 $3 是获取前几次选的dom,不常用

$(selector)$$(selector) 获取当前选中的DOM
当页面没有引入jQuery等类库的时候,这是我们一般会用。
document.querySelector() 或是 document.querySelectorAll() 来作用dom选择器。
而在Chrome调试中我们可以使用是$(selector)$$(selector)来作为选择器,省去大串代码,如下。

$('body')

$$('body')

由上图实际结果看出,$()$$()获取得到的都是满足选中条件元素的一个集合,相当于document.querySelectorAll()
注: 实验所用chrome版本:40.0.2214.111 (64-bit)

copy(Object) 拷贝对象

copy(document.body)

copy($0)

注: 可搭配$0来拷贝当前选择的dom,记得手动黏贴。

console.time & console.timeEnd 计算耗时

对代码执行的耗时情况进行测试时,处理手工在代码中创建前后两个时间戳进行对比,在dev tools中,我们可以使用console.timeconsole.timeEnd实现。

console.time("测试用时");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("测试用时");

关闭Console界面

ESC…

原文源自:AlloyTeam——http://www.alloyteam.com/2015/06/chrome-diao-shi-ji-qiao/

Chrome调试小技巧的更多相关文章

  1. C语言中的调试小技巧

    C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...

  2. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  3. 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧

    之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...

  4. JavaScript的兼容小坑和调试小技巧

    JavaScript作为一种弱类型编程语言,入门简单,只要稍微注意一下IE方面的兼容性,就可以很好的使用它. 本文主要是对IE兼容的小坑和调试的小技巧进行举例分析,并给出解决方法. 1.var str ...

  5. 11个强大的Visual Studio调试小技巧

    简介 调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 这篇文章总 ...

  6. iOS开发中调试小技巧

    对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...

  7. 11个强大的Visual Studio调试小技巧(转)

    简介 调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 这篇文章总 ...

  8. MEF依赖注入调试小技巧!

    自从哥的项目使用MEF以来,天天那个纠结啊,甭提了.稍有错误,MEF就报错,但就不告诉你哪错了,大爷的. 后来看了MEFX的相关调试方法,感觉也不太理想,根本不够直观的看到错误原因,也许是没有深入学习 ...

  9. iOS - 开发中调试小技巧

    对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...

随机推荐

  1. Excel表格文本格式的数字和数字格式如何批量转换

    Excel表格文本格式的数字和数字格式如何批量转换 在使用Excel表格对数据求和时,只能对单元格内常规格式的数据进行计算,而不能对单元格中的文本格式的数据进行计算,特点就是在单元格的左上角有一个绿色 ...

  2. 20. Cookie 和 Session

    之前我们在Cookie 和Session是什么?已经说过Cookie 和Session,但是为了保证系列的完整性,我们决定重新说一遍,当然可能会有一些区别,建议先从Cookie 和Session是什么 ...

  3. shell 过滤器(管道)

    将几个命令通过管道符组合在一起就是一个管道,通常,通过这种方式使用的命令就被称为过滤器. 过滤器会获得输入,通过某种方式修改其内容,然后将其输出. 常用的被用作过滤器使用的命令为: 1.awk---用 ...

  4. mvnw简介

  5. Python科学计算:用NumPy快速处理数据

    创建数组 import numpy as np a=np.array([1,2,3]) b=np.array([[1,2,3],[4,5,6],[7,8,9]]) b[1,1]=10 print(a. ...

  6. 迭代器,生成器,yield,yield from理解

    迭代器 说到迭代器就得想说可迭代对象Iterable,实现了__iter__()方法的对象都是可迭代对象,例如很多容器,list ,set, tuples.使用iter方法可以把一个可迭代对象变成迭代 ...

  7. USACO 2014 US Open Odometer /// 枚举

    题目大意: 给定区间 l r 求区间包含多少个数 它们各个位的数只有一个不一样 注意 多个位但多个数为0单个数为x的情况 这种情况只有 x000 即把单个数放在首位才是正确的 同样注意 多个位但单个数 ...

  8. CTU OPEN 2017 Shooting Gallery /// 区间DP

    题目大意: 给定n 给定n个数 选定一个区间留下其他消去 要求区间两端的两个数一样 若成功留下一个区间 则在选定区间的基础上 继续进行上述操作 直到无法再选出这样的区间 求最多操作数 按区间长度由短到 ...

  9. 10个艰难的Java面试题与答案

    10个最难回答的Java面试题 这是我收集的10个较难回答的 Java 面试题.这些问题主要来自 Java 核心部分 ,不涉及 Java EE 相关问题.这些问题都是容易在各种 Java 面试中被问到 ...

  10. sed以及awk

    一.sed sed是一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时 缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的 内容,处理完成后,把缓 ...