更专业的使用chrome开发者工具

原文链接在此https://medium.com/jotform-form-builder/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3

如你所想Chrome DevTools 是一个允许Web开发人员通过浏览器干扰和操控web 应用，有了这个工具，您可以：

• 管理界面

• 使用断点调试javascript 代码

• 代码优化

打开DevTools ，你可以在页面任意位置单击鼠标右键，选择检查元素，或则从右上角的菜单选择 “更多工具>开发者工具”

下面实例使用的是Chrome Canary 版本

 

1.快速编辑HTML元素

方法

• 选择“Elements”面板。

• 选择Elements面板编辑器中的DOM元素。

• 双击标签就可以编辑它

当你编辑完成后，闭合标签也会自动更改

 

2.转到行号

方法

在Source面板，使用“:行号:列号” 这样的格式快速定位到你想要到的行数

快捷键CMD+ O (win Ctrl+O)

 

3.展开所有子节点

方法

• 选择“Elements”面板。

• 在“Elements”面板编辑器中选择一个DOM元素，按住Alt ，然后单击箭头即可展开所有子节点。

4.更改DevTools 位置

方法：

快捷键

• CMD + SHIFT + D

Dock 选项：

• 取消停靠

• 停靠在底部

• 停靠在右边

5. 通过CSS 选择器，搜索DOM

方法：

• CMD + F / CTRL + F，然后输入你要查询的类名或者id名称 进行搜索

6.Material 和自定义调色板

方法：

你可以点击十六进制的颜色代码前面的小图标来进行选择：

1. 页面颜色：这个调色板是根据你网站css自动生成的

2. Material Design：这个面板自动从Material Design生成三原色

7. 多光标

方法：

• 按住CMD/CTRL ,然后单击编辑的位置即可多出光标，你也可以通CMD/CTRL+U 来撤消你最后一次的添加的光标

8 复制图片转化成Data URI

方法：

选择“Network”面板

在Resources 面板选择你要转化的图片，然后右键选择copy image as a Data URI

在Console面板，粘贴即可转化成Data URI

9.拖动选择列

方法：

选择sources 面板

选择文件，在源代码面板编辑

按住ALT 键拖动鼠标

10. 用”$0” 获取当前元素

方法:

1. 选择“Elements”面板

2. 在”Elements”面板编辑器里面选择一个DOM元素

3. 单击Console面板，输入$0进行使用