chrome调试工具使用技巧汇总

命令菜单

打开命名菜单的快捷键：ctrl+shift+p

切换主题

输入switch to dark theme,就可以切换成黑色主题；输入switch to light theme就可以切换到白色主题等。

截屏

Capture area screenshot：对鼠标拖动区域的截屏

Capture full size screenshot：对整个屏幕的截屏

Capture node screenshot：对node节点的截屏

改变调试窗口的位置

Dock to bottom：设置调试窗口在底部

Dock to left：设置调试窗口在左侧

Dock to right：设置调试窗口在右侧

Undock into separate window：设置调试窗口为独立的窗口。跟显示界面分离开

常用面板

Element

检查元素

当界面元素显示异常时，我们可以直接选中之后右键选中检查，然后在调试窗口就可以直接定位到具体的标签位置

然后就可以看到该元素相关的信息，html，css样式等

模拟手机上的显示效果

 横竖屏切换：

模拟各种手机：

 

设置自定义的屏幕尺寸：

 设置屏幕显示的比例：

Css调试

 快捷键查找某个元素

快捷键：ctrl+F

输入某个标签名时会查找该标签;

也可以根据选择器来查找。例如查找class名为list-wrap的标签

 通过console查找元素

在console窗口中输入inspect(XXX)方法可以查找对应的元素

例如输入inspect(document.getElementById('test-id'))可以查找id为test-id的元素，会直接定位到Elements窗口中元素所在的位置。

编辑样式

修改样式

选中要修改样式的标签，就可以在右侧修改该标签的样式（注意：该修改只是暂时的，刷新界面样式就会恢复）

样式常驻

正常情况：

选中元素，右侧窗口有个:hov按钮，点开之后会有多种状态，选中某个状态之后，该元素就会保持该状态的样式。

 多个元素的选择器名称相同，如何修改其中某个元素的样式

 那该如果修改其中某个元素的样式呢？

我们可以选中某个样式， 

可以看到取消勾线之后 ，div-2所在的标签的class为空，也因此div-2的样式改变了。

 复制样式

如果看到其他网页的样式非常好，想要借鉴，怎么才能快捷的获取到样式呢？

原样式：

我们想要复制京东上的一个按钮的样式：

 选中元素→右键→copy→copy styles

 接着，粘贴到btn-2-wrap中

就可以看到按钮2的样式改变了。

computed面板

computed面板可以看到所有的样式设置。

点击show all 会显示所有的样式设置，包括从父元素或者祖先元素继承的样式。

点击Group，样式会被分组显示。

Layout面板

Layout面板有两种布局，grid网格布局和flex弹性布局

1、grid网格布局

hide line labels的效果：

 show line numbers

 show track sizes:

 选中 show track sizes之后会显示每个格子的尺寸

show area names:

选中show area names会显示每个格子的名称

extend grid lines:

选中extend grid lines之后，辅助性会延长，方便观察和其他元素的定位。

 2、flex弹性布局

 选中div.flex-wrap之后，flex-wap元素就显示了辅助线，辅助线可以帮助查看每个子元素的尺寸等信息。

点击div.flex-wrap旁边的颜色框，可以修改辅助线的颜色

 在sytle面板中，在flex或者grid布局旁边会有一个图标，点击图标就会有一些属性呈现，我们可以点击对应的属性看效果，方便开发者调试。

properties面板

properties面板呈现的是节点的属性。

 控制台

快捷键：ctrl+shift+j

ctrl+shift+j可以快速打开console控制台。

$_返回上一条语句的执行结果

 $0上一个选择的DOM节点（$1,$2,$3...）

依次选中p-wrap,btn-2-wrap,flex-wrap之后，通过$0,$1,$2获取到选中的dom节点

 console的一些方法

console.log打印日志

console.error打印错误信息

console.warn打印警告信息

console.clear()清空日志

console.group()将日志分组显示

console.time()打印一段代码执行的时间

 

 console.table()将数组以表格的形式打印出来

通过日志级别，过滤日志

观察变量当前的值 

 

 断点

监听值的变化

在断点的过程中，会时刻呈现当前变量的值

 

DOM Breakpoints 

选中一个元素，右键，在弹框的对话框中选择break on，会有3个断点方式

subtree modifications：子节点被修改时的断点

attribute modifications：节点属性被修改时断点

node removal：节点被移除时断点 

尝试下attribute modifications。选中之后，节点左侧就会有个断点的图标，

 当修改该节点的属性时，代码就会停止执行

右侧也说明了执行被暂停的原因：属性发生改变。