谷歌浏览器如今是web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点，例如使用 console 和 debugger 在线编辑css。在这篇文章中，我们将分享一些很酷的技巧，让你能够更好的改进工作流程。
通过 console 面板修改页面元素及元素内容：
获取元素节点 右键选择 edit as html 或者 edit text 修改后的内容会实时反映在页面和 elements 面板上
inspect() / copy() / values() 和 ctrl + l
在 console 面板使用 inspect(elem) 跳转到 elements 面板的指定元素节点 在 console 面板使用 copy(values) 将数据复制到剪贴板 在 console 面板使用 values(object) 获取对象的所有属性值，返回数组 使用 ctrl + l 清空当前的 console 面板
js 文件打开和文件内的快速跳转
在 sources 面板使用 cmd + o 快捷键打开搜索框 搜索框下会提示当前页面的涉及的 js 文件，输入文件名即可打开 如果输入 :5:9 ，则表示跳转到文件的第五行第九个字符
在 sources 面板使用使用 alt + - 和 alt + = 可以在上一个鼠标位置和下一个鼠标位置之间跳转
在 elements 面板使用 cmd + f 打开搜索框，除了常规字符串还可以使用选择器来选择 html 元素
在预览图片上右键选择 copy image as data uri ，可以将图片转换为 base64 编码
使用 cmd + click 可以在文件中创建多个编辑点，使用 cmd + u 可以取消最后一处编辑点
按住 alt 键然后选择文件内容，可以创建一个矩形选区
在 network 面板的 filter 输入框输入 is:running 指令可以查看正在进行中的网络请求
在 elements 面板右侧的 event listeners 选项卡中，在绑定的事件上右键可以跳转到相应的 js 代码上
有时候我们需要在以匿名模式打开链接，现在 chrome 可以在你匿名打开的时候仍然保持同样的开发者工具状态，比如相同的工具栏位置、大小、面板布局、设置信息等等
在 console 面板中使用 geteventlisteners(node) 函数可以获取当前节点绑定的事件，返回一个数组
在 elements 面板中，右键点击内联的 js 或者 css 路径，选择 open 可以在 sources 面板中打开相应的文件
数值调整快捷键
up / down ，增加或减少 1 单位 shift + up / down ，增加或减少 10 单位 alt + up / down ，增加或减少 0.1 单位 鼠标滚轮
使用 cmd + [ or ] 可以循环切换开发者工具的各个面板
为 js 代码设置条件断点，该断点只在条件满足时触发
在 js 文件中选中一段代码，通过 ctrl + shift + e 可以在 console 面板中运行这段代码
将开发者工具从浏览器独立出来之后，使用 cmd + alt + i 将创建另一个开发者工具，该工具可以用于修改第一个开发者工具的样式
使用 console.trace() 可以追踪代码执行过程中的栈信息
在 timeline 面板中会有一些帧使用红色突出显示，这是因为这些帧值得引起开发者注意，它们的渲染时间通常超过了 18ms。点击这些红色的帧，即可查看相应的警告信息。通常认为每秒渲染 60 帧的页面是流畅的，这就要求每一帧的渲染不能超过 16ms。
在 canary 版的开发者工具中，提供了一个隐藏的布局编辑器
在 sources 面板中使用 cmd + opt + f / ctrl + shift + f 可以搜索所有文件的信息
使用 tab 键可以在 css 样式规则中进行遍历选定，选定的目标包括：选择器、属性和属性值。如果想跳回上一个目标，使用 shift + tab
使用 up / down 快捷键可以修改 dom 元素属性中的数值。
调节 dom 元素样式
在 console 面板中提供了一系列的筛选器，用于过滤特定信息，比如 handled 过滤器可以用来捕获 promises 的 reject 状态
使用 console.time('sign string') 和 console.timeend('sign string') 获取中间的间隔时间
使用 console.table(arr) 输出数组数据
在 canary 版本中，如果鼠标长时间悬停在某个选择器上，左侧的 elements 面板会高亮显示匹配的 dom 元素区域
手动阻塞 url 的加载，用于测试资源获取失败的页面效果
在 canary 版本中的 timeline 面板新增了一个 constly functions 模块，用于记录四个方面的性能表现：painting / rendering / scripting / network activity
通过拖拽重排开发者工具上的面板顺序
elements 面板跟随鼠标悬停目标显示不同的 dom 元素
使用 animation 检查器可以检查运行中的 css 动画属性
可视化资源依赖关系：绿色资源为初始化资源，红色资源由绿色资源引入
参考资料 如何更专业的使用chrome开发者工具 15个你不得不知道的chorme dev tools的小技巧 google devtools dev tips
南北 前端开发者，关注性能优化和动效设计，活跃于 github @pinggod 、微博@ping4god 和博客 pinggod.com ，替身众多。如果你沉醉于 kairosoft、午时三刻工作室的游戏，请来和我做朋友:)。