Chrome DevTool 的使用技巧

目录

1、chrome 的“命令”面板

2、截图

3、$_——在控制台引用上一次的执行结果

4、$0——打印当前选中的元素

5、快速简洁法拿到元素

（1）、$——获取某一个元素

（2）、$$——获取所有的指定元素

6、快速隐藏元素

7、快速展开点击元素后所有的元素

8、将 DOM 元素存储在全局临时变量中

9、重新发送 XHR 请求

10、监控页面加载状态

11、CSS 伪类样式的触发

12、快速调整页面上某些 DOM 元素的位置

13、表对象数组

14、复制图像为 Data URI

---

按 F12（mac 按 fn + F12）打开 chrome 控制台（开发者工具）。

1、chrome 的“命令”面板

然后使用以下快捷键打开命令菜单：

• windows：Ctrl + Shift + P

• macOS：Cmd + Shift + P

2、截图

在 chrome 的“命令”面板 中输入“截图”，就能看到：

3、$_——在控制台引用上一次的执行结果

在 chrome 控制台的控制台面板中，使用 $_ 可以直接使用控制台中上一次操作的执行结果。

4、$0——打印当前选中的元素

在 chrome 控制台的元素面板中，先选中一个元素，然后在控制台打印 $0，就会输出当前选中的元素了。

5、快速简洁法拿到元素

（1）、$——获取某一个元素

语法： $('元素名') 

$('body') ——可以快速拿到网页的 body 元素。在控制台执行该代码，可将 body 元素打印出来。

（2）、$$——获取所有的指定元素

语法： $$('元素名') 

$$('span') ——可以拿到当前网页中的所有的 span 标签。在控制台执行该代码，可将当前网页中的所有 span 元素打印出来。

6、快速隐藏元素

在调试 CSS 样式时，我们通常需要隐藏一个元素。

选择某个元素，按下键盘上的 H 键，就可以快速隐藏该元素。再按就又显示了。

7、快速展开点击元素后所有的元素

按住 Alt 键后鼠标左单击（mac 按住 option 键后鼠标单击）某个元素即可。再次点按则收起。

8、将 DOM 元素存储在全局临时变量中

如果要想在控制台中快速获取某个 DOM 元素的引用，可以执行以下操作：

选择某个元素，右键点击鼠标，存储为全局变量

9、重新发送 XHR 请求

10、监控页面加载状态

在 Chrome 开发者工具中，我们可以使用“网络”面板下的 Capture Screenshots 功能来捕获页面加载时的屏幕截图。

11、CSS 伪类样式的触发

12、快速调整页面上某些 DOM 元素的位置

在“元素”面板中，你可以拖放任何 HTML 元素来更改其在页面中的显示位置：

13、表对象数组

表对象数组，更利于阅读数据的内容：

14、复制图像为 Data URI

【推荐阅读】

Chrome 开发者工具中文文档

Chrome DevTool 教程

全新Chrome Devtool Performance使用指南

Chrome DevTools 实用技巧大全(收藏)

Chrome开发者工具的11个高级使用技巧