前言:

除了我们日常使用的调试方法,在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. Missing artifact net.sf.json-lib:json-lib:jar:2.4

    Missing artifact net.sf.json-lib:json-lib:jar:2.4 出现上述这种错误就是JAR没有引入进来 这时候发现是因为JDK版本的问题,所以需要在加一句 < ...

  2. 高级UI晋升之自定义view实战(七)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章自定义ViewGroup实现瀑布流效果来进行详解dispatchTouch ...

  3. tdom中selectNodes的使用

    tdom中selectNodes的使用 */--> pre.src {background-color: #002b36; color: #839496;} pre.src {backgroun ...

  4. Javascript中的相等比较

    在比较相等或不相等之前,会对操作数进行类型转换,然后比较相等性 在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则: 1.如果由一个操作数是布尔值,则在比较相等性之前先将其转换为数值:2.如果 ...

  5. C语言指向指针的指针

    #include <stdio.h> int main() { /********************************************* * 指向指针的指针:指针变量存 ...

  6. 不用 PS 和 AI,5个网站能做出更好看的设计

    要完成漂亮的设计,一定要掌握 PS.AI.Sketch 等专业的做图工具才可以.其实,现在有很多网站可以帮助不会专业设计工具的我们,做出很多很漂亮的设计,完成自己的设计需求.今天,我们就来介绍一下这些 ...

  7. css3 新特性(动画)

    1. 制作动画 先定义动画,再使用(调用)动画 使用 keyframes(关键帧)定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{ width:100px; } 100%{ wi ...

  8. JDK安装的一些设置

    一:设置环境变量 1.新建环境变量JAVA_HOME值为JDK安装目录   然后编辑Path环境变量添加".%JAVA_HOME%\bin;". Ps:JDK5.0不需要设置cla ...

  9. 转帖 新Eclipse安装与配置

    Eclipse的官网地址:http://www.eclipse.org/ 我们下载J2EE版本:Eclipse IDE for Java EE Developers 目前最新版本是:Eclipse K ...

  10. SQL优化(三)—— 索引、explain分析

    SQL优化(三)—— 索引.explain分析   一.什么是索引 索引是一种排好序的快速查找的数据结构,它帮助数据库高效的查询数据 在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据 ...