Chrome调试小技巧
前言:
除了我们日常使用的调试方法,在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 + p
和 command + 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.time
与 console.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调试小技巧的更多相关文章
- C语言中的调试小技巧
C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧
之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...
- JavaScript的兼容小坑和调试小技巧
JavaScript作为一种弱类型编程语言,入门简单,只要稍微注意一下IE方面的兼容性,就可以很好的使用它. 本文主要是对IE兼容的小坑和调试的小技巧进行举例分析,并给出解决方法. 1.var str ...
- 11个强大的Visual Studio调试小技巧
简介 调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 这篇文章总 ...
- iOS开发中调试小技巧
对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...
- 11个强大的Visual Studio调试小技巧(转)
简介 调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 这篇文章总 ...
- MEF依赖注入调试小技巧!
自从哥的项目使用MEF以来,天天那个纠结啊,甭提了.稍有错误,MEF就报错,但就不告诉你哪错了,大爷的. 后来看了MEFX的相关调试方法,感觉也不太理想,根本不够直观的看到错误原因,也许是没有深入学习 ...
- iOS - 开发中调试小技巧
对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的 ...
随机推荐
- Excel表格文本格式的数字和数字格式如何批量转换
Excel表格文本格式的数字和数字格式如何批量转换 在使用Excel表格对数据求和时,只能对单元格内常规格式的数据进行计算,而不能对单元格中的文本格式的数据进行计算,特点就是在单元格的左上角有一个绿色 ...
- 20. Cookie 和 Session
之前我们在Cookie 和Session是什么?已经说过Cookie 和Session,但是为了保证系列的完整性,我们决定重新说一遍,当然可能会有一些区别,建议先从Cookie 和Session是什么 ...
- shell 过滤器(管道)
将几个命令通过管道符组合在一起就是一个管道,通常,通过这种方式使用的命令就被称为过滤器. 过滤器会获得输入,通过某种方式修改其内容,然后将其输出. 常用的被用作过滤器使用的命令为: 1.awk---用 ...
- mvnw简介
- 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. ...
- 迭代器,生成器,yield,yield from理解
迭代器 说到迭代器就得想说可迭代对象Iterable,实现了__iter__()方法的对象都是可迭代对象,例如很多容器,list ,set, tuples.使用iter方法可以把一个可迭代对象变成迭代 ...
- USACO 2014 US Open Odometer /// 枚举
题目大意: 给定区间 l r 求区间包含多少个数 它们各个位的数只有一个不一样 注意 多个位但多个数为0单个数为x的情况 这种情况只有 x000 即把单个数放在首位才是正确的 同样注意 多个位但单个数 ...
- CTU OPEN 2017 Shooting Gallery /// 区间DP
题目大意: 给定n 给定n个数 选定一个区间留下其他消去 要求区间两端的两个数一样 若成功留下一个区间 则在选定区间的基础上 继续进行上述操作 直到无法再选出这样的区间 求最多操作数 按区间长度由短到 ...
- 10个艰难的Java面试题与答案
10个最难回答的Java面试题 这是我收集的10个较难回答的 Java 面试题.这些问题主要来自 Java 核心部分 ,不涉及 Java EE 相关问题.这些问题都是容易在各种 Java 面试中被问到 ...
- sed以及awk
一.sed sed是一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时 缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的 内容,处理完成后,把缓 ...