你真的会使用Chrome开发者工具吗（一）

原文 How to use Chrome DevTools like a Pro

Chrome开发工具是一个web开发者的利器，使用她你可以实现：

• 管理界面元素

• 断点调试JavaScript代码

• 优化你的代码

这里将列出一些非常实用的使用技巧，帮助你更加高效的工作

1. 快速编辑HTML元素

• 选择开发工具面板的Elements

• 在Elements下的元素编辑器中选择一个DOM元素

• 双击选中的DOM元素标签，然后进行编辑

完成相应的编辑之后，页面会立即发生相应改变。

2. 快速定位到行

• 打开开发工具面板，快捷键Ctrl+O (Mac:CMD+O)

• 输入:行号:列号 来进行定位

3. 展开所有子节点元素

• 选择Elements面板

• 选择一个DOM元素，按下Alt键并且鼠标双击选择DOM元素前面的箭头，就会展开该DOM元素下的所有字节点元素

4. 改变开发工具的位置

打开开发工具面板，按下快捷键Ctrl+Shift+D (Mac:CMD + Shift + D)，或者直接在开发工具面板右侧进行相应选项设置：浮动，底部，右侧

5. 通过CSS选择符进行DOM元素搜索

快捷键Ctrl + F(Mac:CMD+F),试试在搜索栏输入ID选择符或者类选择符就可以定位到元素啦

6. Material风格和自定义调色板

Elements面板右侧的Style编辑器中，点击颜色十六进制编码前的小色块，会弹出一个调色板：

• 可以自定义颜色值，也可以使用拾色器进行取色

• 调色板下方可以选择Material Design的主要色系

7. 多光标

在Sources面板中选择一个资源文件进行编辑，如css文件，通过按住Ctrl键可以添加多个编辑光标，同时对多处进行编辑。按下Ctrl + U可以撤销编辑。

8. 获取图片的Data URI

• 选择Network面板

• 选择一张图片，在右侧图片上鼠标右键选择copy it as a Data URI,就可以获取图片的Data URL (base64编码)

9. 触发伪类

• Elements面板右键执行DOM元素节点，选择Force Element State

• 或者，点击右侧Toggle Element State图标

10. 多列内容选择

• 选择Sources面板

• 选择一个资源文件

• 按住Alt键并拖动鼠标进行多列内容选择

11. 使用$0获取当前选中元素

• 在Elements面板下选择一个DOM元素

• 切换到Console下，使用$0可以获取到选择的元素

12. 元素展示

• 在Console面板中获取指定内容，比如：document.getElementById('xxx')

• 选择内容右键，选择Reveal in Elements Panel

下篇：你真的会使用Chrome开发者工具吗（二）