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

叁歲伎倆 2022-05-27 14:09 325阅读 0赞

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点，例如使用`console`和`debugger`在线编辑CSS。在这篇文章中，我们将分享一些很酷的技巧，让你能够更好的改进工作流程。

![console-edit-html.gif][]

通过 `console` 面板修改页面元素及元素内容：

*  获取元素节点
 *  右键选择 `Edit as HTML` 或者 `Edit Text`
 *  修改后的内容会实时反映在页面和 `Elements` 面板上

![five-console-tricks.gif][]

`inspect()` / `copy()` / `values()` 和 `Ctrl + L`

*  在 `console` 面板使用 `inspect(elem)` 跳转到 `elements` 面板的指定元素节点
 *  在 `console` 面板使用 `copy(values)` 将数据复制到剪贴板
 *  在 `console` 面板使用 `values(object)` 获取对象的所有属性值，返回数组
 *  使用 `Ctrl + L` 清空当前的 `console` 面板

![go-to-column.gif][]

JS 文件打开和文件内的快速跳转

*  在 `Sources` 面板使用 `CMD + O` 快捷键打开搜索框
 *  搜索框下会提示当前页面的涉及的 JS 文件，输入文件名即可打开
 *  如果输入 `:5:9`，则表示跳转到文件的第五行第九个字符

![editing-locations.gif][]

在 `Sources` 面板使用使用 `Alt + -` 和 `Alt + =` 可以在上一个鼠标位置和下一个鼠标位置之间跳转

![dom-search-by-selector.gif][]

在 `Elements` 面板使用 `CMD + F` 打开搜索框，除了常规字符串还可以使用选择器来选择 HTML 元素

![copy-as-data-uri.gif][]

在预览图片上右键选择 `copy image as Data URI`，可以将图片转换为 base64 编码

![multiple-cursors.gif][]

使用 `CMD + Click` 可以在文件中创建多个编辑点，使用 `CMD + U` 可以取消最后一处编辑点

![drag-select.gif][]

按住 `Alt` 键然后选择文件内容，可以创建一个矩形选区

![is-running.gif][]

在 `Network` 面板的 filter 输入框输入 `Is:running` 指令可以查看正在进行中的网络请求

![view-event-listeners.gif][]

在 `Elements` 面板右侧的 `Event Listeners` 选项卡中，在绑定的事件上右键可以跳转到相应的 JS 代码上

![incognito-preference-persist.gif][]

有时候我们需要在以匿名模式打开链接，现在 Chrome 可以在你匿名打开的时候仍然保持同样的开发者工具状态，比如相同的工具栏位置、大小、面板布局、设置信息等等

![get-debug-event-listeners.gif][]

在 `Console` 面板中使用 `getEventListeners(node)` 函数可以获取当前节点绑定的事件，返回一个数组

![open-in-sources-from-elements.gif][]

在 `Elements` 面板中，右键点击内联的 JS 或者 CSS 路径，选择 `open` 可以在 `Sources` 面板中打开相应的文件

![quick-change-css-values.gif][]

数值调整快捷键

*  `Up / Down`，增加或减少 1 单位
 *  `Shift + Up / Down`，增加或减少 10 单位
 *  `Alt + Up / Down`，增加或减少 0.1 单位
 *  鼠标滚轮

![cycle-panel-shortcut.gif][]

使用 `CMD + [ or ]` 可以循环切换开发者工具的各个面板

![conditional-breakpoint.gif][]

为 JS 代码设置条件断点，该断点只在条件满足时触发

![run-highlighted-code-block.gif][]

在 JS 文件中选中一段代码，通过 `Ctrl + Shift + E` 可以在 `Console` 面板中运行这段代码

![inspect-the-inspector.gif][]

将开发者工具从浏览器独立出来之后，使用 `CMD + Alt + i` 将创建另一个开发者工具，该工具可以用于修改第一个开发者工具的样式

![console-trace.gif][]

使用 `console.trace()` 可以追踪代码执行过程中的栈信息

![long-frame-times.gif][]

在 `Timeline` 面板中会有一些帧使用红色突出显示，这是因为这些帧值得引起开发者注意，它们的渲染时间通常超过了 18ms。点击这些红色的帧，即可查看相应的警告信息。通常认为每秒渲染 60 帧的页面是流畅的，这就要求每一帧的渲染不能超过 16ms。

![layout-editor.gif][]

在 Canary 版的开发者工具中，提供了一个隐藏的布局编辑器

![project-search-with-file-scope.gif][]

在 `Sources` 面板中使用 `CMD + Opt + F / Ctrl + Shift + F` 可以搜索所有文件的信息

![styles-pane-keyboard-tricks.gif][]

使用 `Tab` 键可以在 CSS 样式规则中进行遍历选定，选定的目标包括：选择器、属性和属性值。如果想跳回上一个目标，使用 `Shift + Tab`

![increment-num-dom-attr.gif][]

使用 `Up / Down` 快捷键可以修改 DOM 元素属性中的数值。

![toggle-element-classes.gif][]

调节 DOM 元素样式

![console-handled-filter.gif][]

在 `Console` 面板中提供了一系列的筛选器，用于过滤特定信息，比如 `Handled` 过滤器可以用来捕获 Promises 的 reject 状态

![console-time.gif][]

使用 `console.time('sign string')` 和 `console.timeEnd('sign string')` 获取中间的间隔时间

![console-table.gif][]

使用 `console.table(arr)` 输出数组数据

![hover-over-selector.gif][]

在 Canary 版本中，如果鼠标长时间悬停在某个选择器上，左侧的 Elements 面板会高亮显示匹配的 DOM 元素区域

![block-requests.gif][]

手动阻塞 URL 的加载，用于测试资源获取失败的页面效果

![timeline-costly-groupings.gif][]

在 Canary 版本中的 Timeline 面板新增了一个 Constly Functions 模块，用于记录四个方面的性能表现：Painting / Rendering / Scripting / Network activity

![drag-drop-panels.gif][]

通过拖拽重排开发者工具上的面板顺序

![better-inspect-element.gif][]

`Elements` 面板跟随鼠标悬停目标显示不同的 DOM 元素

![animation-inspector.gif][]

使用 animation 检查器可以检查运行中的 CSS 动画属性

![network-dependency.gif][]

[console-edit-html.gif]: /images/20220527/87f0b275a4ce4ebbbcae2f6a2abd4058.png
[five-console-tricks.gif]: /images/20220527/ba67098ca7604a8ab2572cefdbf04bd7.png
[go-to-column.gif]: /images/20220527/83cc292f7a944139ac6e3994a5ae860b.png
[editing-locations.gif]: /images/20220527/59d647567bdb4a04ab7dd9daa1d694ed.png
[dom-search-by-selector.gif]: /images/20220527/2e9d3cee61574b628637d021e26a36ab.png
[copy-as-data-uri.gif]: /images/20220527/96d596f41c664789a688f9b4af1a7233.png
[multiple-cursors.gif]: /images/20220527/b2e9116b88cd435497a62434630d449b.png
[drag-select.gif]: /images/20220527/485d7785d97c4a5d8eb9560900e0097b.png
[is-running.gif]: /images/20220527/0a3626a69a4e4befa61ccba94886d598.png
[view-event-listeners.gif]: /images/20220527/b1d8d659164c4871a8c340bba2563c88.png
[incognito-preference-persist.gif]: /images/20220527/56e38e88236649658a20f29e01162a29.png
[get-debug-event-listeners.gif]: /images/20220527/fd38b451d2f54d3aa12ed61f1df5fdcc.png
[open-in-sources-from-elements.gif]: /images/20220527/9f7326a4c7b34af69817c586c66cb6f3.png
[quick-change-css-values.gif]: /images/20220527/7c999b3b0f434b6685b35e1839a9fa6c.png
[cycle-panel-shortcut.gif]: /images/20220527/f007a578392344f28cb0878776871005.png
[conditional-breakpoint.gif]: /images/20220527/c6e78e2a646a441798a7eacea037ac80.png
[run-highlighted-code-block.gif]: /images/20220527/7509d0c9bb5f45b5bd8af847ee02f1b5.png
[inspect-the-inspector.gif]: /images/20220527/e0d0881a202343769cf0b148ed45d175.png
[console-trace.gif]: https://www.w3cplus.com/sites/default/files/blogs/2016/1601/console-trace.gif
[long-frame-times.gif]: /images/20220527/1dbaadeae3b8405fa674efaf35284b0c.png
[layout-editor.gif]: /images/20220527/06fffa6202034b62b32032565d6a26b8.png
[project-search-with-file-scope.gif]: /images/20220527/0b9fdeaa215b4097858f3b0a8bf643bb.png
[styles-pane-keyboard-tricks.gif]: /images/20220527/4a5ba74aabfd4d61a240d8f96107413a.png
[increment-num-dom-attr.gif]: /images/20220527/5870dc4fd3ec4f0ab284de4c2a3195eb.png
[toggle-element-classes.gif]: /images/20220527/92ab5496558246cf9148e1d17f3aa690.png
[console-handled-filter.gif]: /images/20220527/f145b02f492b470ca3a68bcd3925acd1.png
[console-time.gif]: /images/20220527/80d4c274caa4461fac6f9175ec410cf1.png
[console-table.gif]: /images/20220527/6481312a91884896bdc691989203431c.png
[hover-over-selector.gif]: /images/20220527/9e17c40e9a3f477e98ee8068536264fb.png
[block-requests.gif]: /images/20220527/9280065bda8e43fa8e5e4a6fdb9bdbce.png
[timeline-costly-groupings.gif]: /images/20220527/7d328443cdb044829941fef856b832fd.png
[drag-drop-panels.gif]: /images/20220527/946a44b4535b49b7aea4e3dc5e2576da.png
[better-inspect-element.gif]: /images/20220527/82abb3e4f56140d48732359834d72d3d.png
[animation-inspector.gif]: https://www.w3cplus.com/sites/default/files/blogs/2016/1601/animation-inspector.gif
[network-dependency.gif]: /images/20220527/7a173f4a138a4b1fa85624bf7cc49cae.png