WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

Chrome 常用调试方法

Chrome 常用调试方法总结,devtools常用技巧

$,$$ 的使用

$ -> querySelect();
$$ -> querySelectAll();
$0,$1,$2,$3 -> 选择的html节点引用,最多记录四次

copy

copy可以从chrome控制台拿到想要的数据
比如我们想要复制控制台的一个很大的对象,可以使用copy命令
copy(variable1)

如果控制台中的数据是从程序中输出的,没有名字:
使用鼠标右键选择变量 点击Store as global variable然后copy

console

对于程序中的console处理较为麻烦,我们希望console在某些情况输出,某些情况不输出,但其实我们不想单独为console写if表达式,使用console.assert(assertion,expression),当assertion为假时,输出expression的值。
image.png

使用console.table打印一些对象或数组。
image.png

使用console.dir打印Dom,可以获取到Dom的属性

面板使用

选择一个DOM元素 按下h可隐藏该元素,再次按下可显示

image.png

本质上是添加了style:visibility: hidden !important;

console.log()的一些问题

image.png
点击展开:
image.png

在未展开时,显示的值是正确的值,也是打印对象时,对象值的快照,当点击时,会去获取当前的值显示,测试如下。
image.png
可以看到,在开始输出的是正确的值,当我们5秒后再去展开此对象,发现值已经变成了最新的值。

但是展开点击只会去获取一次最新的值,就是第一次展开时,若是在5秒内,也就是值还没有发生改变时展开,则后面的展开不会去更新此对象的值。
image.png

Run Command

ctrl + shift + p 打开面板(windows)
在此执行一些有趣的命令

capture node screenshot //截图
theme //切换主题
layout //工具栏的位置选择
timestamps //给console加上时间

box-shadow编辑器

image.png

将鼠标放到此处,可以添加颜色,阴影等样式:
image.png

事件监控

对DOM元素添加事件监控:
image.png

XHR重发,子节点展开

鼠标右键某个xhr -> replay XHR即可重发。
注意若是跨越的xhr存在option请求的,需要右键option请求重发

鼠标右键某个节点expand recursively展开所有子节点

console.log()中的变量用{}包裹起来

var a = 1, b = 2, c = 3, d = 4; console.log({a,b,c,d});

这能准确的定位到每个变量的输出值
image.png

开启drawer

在任意一个选项卡中按下esc开启drawer面板,再次按下时消失

image.png

代码块Snippets

image.png

使用1: 选择要执行的Snippets 然后ctrl + enter
使用2: 选择要执行的Snippets 右键 run
使用3: 在其他面板 打开命令面板 ctrl + p, 输入!name(Snippets的name)

参考的系列文章