Chrome 调试技能

2019年8月30日 166次阅读 来源: 林烁

媒介：
除了我们一样平常运用的调试要领，在Chrome中，其含有一些有意思的要领，有助于进步我们的开辟调试效力。

Sources页

command + p 文件跳转

运用Sublime的人或习习用command + p 举行文件的跳转，在chrome dev tools中实在也有相似的跳转要领。

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

《Chrome 调试技能》

command + shift + o 恣意要领跳转

Sublime中运用command +R 举行要领跳转，而在dev tools中，能够运用command + shift + o 举行恣意要领的跳转。

command + shift + o  // 跳转到恣意要领

《Chrome 调试技能》

注： 查找某文件中的要领，运用command + p 和 command + shift + o 更配哦~

Elements页

  • 运用方向键快，上下键导航，左右键收起睁开；

  • H键疾速隐蔽dom（效果相当于给DOM到场visibility:hidden属性，有别于display:none）

  • Enter举行疾速编辑属性；

  • 鼠标右击运用各种要领…

Console页

$_ 示意上次的盘算效果

举个栗子

15 * 15  
$_ * 10

《Chrome 调试技能》

$0 猎取当前选中的DOM

选中DOM以后，在控制台输入$0。

$0

注：$1 $2 $3 是猎取前几次选的dom，不经常使用

$(selector) 与 $$(selector) 猎取当前选中的DOM

当页面没有引入jQuery等类库的时刻，这是我们平常会用
document.querySelector() 或是 document.querySelectorAll() 来作用dom挑选器。
而在Chrome调试中我们能够运用是$(selector) 与 $$(selector)来作为挑选器，省去大串代码，以下。

$('body')
 
$$('body')

《Chrome 调试技能》

由上图现实效果看出，$()和$$()猎取获得的都是满足选中前提元素的一个鸠合，相当于document.querySelectorAll()
注: 试验所用chrome版本：40.0.2214.111 (64-bit)

copy(Object) 拷贝对象

copy(document.body)
 
copy($0)

《Chrome 调试技能》

注: 可搭配$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("测试用时");

《Chrome 调试技能》

封闭Console界面

ESC…

    原文作者：林烁
    原文地址: https://segmentfault.com/a/1190000003948184
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞