分享一些实用的Chrome DevTools技巧

Chrome 开发工具提供了一套非常出色的工具来帮助我们在 Web 平台上开发。

有一些您可能还不知道的小功能，现在给大家分享一下：

在“Elements”面板中拖放

在“Elements”面板中，您可以拖放任何 HTML 元素来更改其位置。

在控制台中引用当前选定的元素

在“Elements”面板中选择一个节点，然后在控制台输入 $0 就可以引用它。

提示：如果您使用jQuery，则可以输入$($0)以访问此元素上的jQuery API。

使用控制台中操作的最后一个值

使用 $_ 引用在控制台执行的前一操作的返回值

添加 CSS 并编辑元素状态

在“Elements”面板中有2个超级有用的按钮。

第一个 + 号可以添加一个新的 CSS 属性，也可以修改原本的 CSS 属性：

第二个 :hov 可以查看所选元素触发的状态，这样就可以看到当它处于活动状态，悬停状态，焦点状态的样式。

找到CSS属性的定义位置

cmd+click（在 Windows 上是 ctrl+click）元素面板中的 CSS 属性，DevTools 会在 Source 面板中将您指向定义的位置。

保存到修改后的CSS文件

点击您编辑的 CSS 文件的名称。会将其打开到“Sources”窗格，然后可以使用您应用的实时编辑进行保存。

这个技巧不适用于使用 + 添加的新选择器，也不适用于 element.style 属性，仅适用于已修改的现有选择器。

截图单个元素

选择一个元素并按 cmd+shift+p（在 Windows 中是 ctrl+shift+p）打开命令菜单 输入 SCREEN，然后选择捕捉节点截图。

使用 CSS 选择器查找元素

按 cmd+f（在Windows中是 ctrl+f）打开“Elenemts”面板中的搜索框。

您可以在其中键入任何字符串以匹配源代码，或者也可以使用 CSS 选择器让 Chrome 为您生成一个图像：

按住 Shift 键进入控制台

要编写跨越控制台多行的命令，请按 shift+enter。准备就绪后，在脚本末尾按 Enter 键即可执行该操作：

清除控制台

您可以使用控制台左上角的清除按钮或按 ctrl+l 或清除控制台 cmd+k 。

在“来源”面板中：

cmd+o（在Windows中是 ctrl+o）显示您的页面加载的所有文件。

cmd+shift+o（在 Windows 中是 ctrl+shift+o）显示当前文件中的符号（属性，函数，类）。

ctrl+g 去特定的路线。

Watch 操作

不需要一次又一次地写一个变量名或一个表达式，您可以在调试会话期间检查很多变量名或表达式，将它添加到 Watch 表列表中就行了。

XHR /获取调试

从调试器打开 XHR / Fetch 断点面板。

您可以将其设置为在任何时候发送 XHR / Fetch 请求，或者仅限于特定的呼叫：

调试DOM修改

右键单击某个元素并在子树修改上启用 Break：每当脚本遍历该元素的子元素并修改它们时，调试器将自动停止以让您检查发生了什么。

参考文献：https://flaviocopes.com/chrome-devtools-tips/#drag-and-drop-in-the-elements-panel

未经允许不得转载：w3h5 » 分享一些实用的Chrome DevTools技巧