原文链接在此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 和自定义调色板
方法：
你可以点击十六进制的颜色代码前面的小图标来进行选择：
-
页面颜色：这个调色板是根据你网站css自动生成的
-
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” 获取当前元素
方法:
-
选择“Elements”面板
-
在”Elements”面板编辑器里面选择一个DOM元素
-
单击Console面板，输入$0进行使用