Chrome 35个开发者工具的小技巧

谷歌浏览器现在是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

来源：w3cplus - 南北（@ping4god）

网址：http://www.w3cplus.com/tools/dev-tips.html