分享一些实用的Chrome DevTools技巧

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

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

在“Elements”面板中拖放

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

分享一些实用的Chrome DevTools技巧 经验总结 第1张在控制台中引用当前选定的元素

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

分享一些实用的Chrome DevTools技巧 经验总结 第2张

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

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

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

分享一些实用的Chrome DevTools技巧 经验总结 第3张

添加 CSS 并编辑元素状态

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

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

分享一些实用的Chrome DevTools技巧 经验总结 第4张

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

分享一些实用的Chrome DevTools技巧 经验总结 第5张

找到CSS属性的定义位置

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

分享一些实用的Chrome DevTools技巧 经验总结 第6张

保存到修改后的CSS文件

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

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

分享一些实用的Chrome DevTools技巧 经验总结 第7张

截图单个元素

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

分享一些实用的Chrome DevTools技巧 经验总结 第8张

使用 CSS 选择器查找元素

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

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

分享一些实用的Chrome DevTools技巧 经验总结 第9张

按住 Shift 键进入控制台

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

分享一些实用的Chrome DevTools技巧 经验总结 第10张

清除控制台

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

在“来源”面板中:

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

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

ctrl+g 去特定的路线。

分享一些实用的Chrome DevTools技巧 经验总结 第11张

Watch 操作

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

分享一些实用的Chrome DevTools技巧 经验总结 第12张

XHR /获取调试

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

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

分享一些实用的Chrome DevTools技巧 经验总结 第13张

调试DOM修改

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

分享一些实用的Chrome DevTools技巧 经验总结 第14张


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

未经允许不得转载:前端资源网 - w3h5 » 分享一些实用的Chrome DevTools技巧

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)