谷歌浏览器前端开发的调试技巧

痛点描述:CHROME DEVTOOLS提供了一套惊人的工具来帮助您在WEB平台上进行开发。以下是您可能还不知道的一些技巧:

image.png

在“元素”面板中拖放

在“元素”面板中,您可以拖放任何HTML元素并更改其在整个页面中的位置

在“元素”面板中拖放 | left

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

在“元素”面板中选择一个节点,然后$0在控制台中键入以引用它。

控制台中的参考元素 | left

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

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

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

使用最后的结果 | left

添加CSS并编辑元素状态

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

第一个允许您添加一个新的CSS属性,使用您想要的任何选择器,但预先填充当前选定的元素:

添加CSS规则 | left

第二个允许您触发所选元素的状态,因此您可以看到在焦点上激活,悬停和应用的样式。

元素状态 | left

查找定义CSS属性的位置

cmd-clickctrl-click在Windows上)“元素”面板中的CSS属性,DevTools将指向“源”面板中定义的位置

查找定义CSS属性的位置 | left

保存到修改后的CSS文件

单击您编辑的CSS文件的名称。检查员将其打开到“源”窗格中,然后您可以使用所应用的实时编辑将其保存。

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

保存到文件修改后的CSS | left

屏幕截图单个元素

选择一个元素并按cmd-shift-p(或ctrl-shift-p在Windows中)打开命令菜单,然后选择捕获节点屏幕截图

屏幕截图单个元素 | left

使用CSS选择器查找元素

cmd-fctrl-f在Windows中)将打开“元素”面板中的搜索框。

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

使用CSS选择器查找元素 | left

按住SHIFT键进入控制台

要在控制台中编写跨越多行的命令,请按shift-enter

准备好后,按脚本末尾的Enter键执行:

按住Shift键进入控制台 | left

清除控制台

您可以使用控制台左上角的“ 清除”按钮清除控制台,或按ctrl-lcmd-k

在“来源”面板中:

  • cmd-octrl-o在Windows中),显示页面加载的所有文件。
  • cmd-shift-octrl-shift-o在Windows中)显示当前文件中的符号(属性,函数,类)。
  • ctrl-g 去特定的路线。

文件列表 | left

监视表达式

而不是一次又一次地写一个变量名或表达式,你将在调试会话期间检查很多,将它添加到监视表达式列表中。

观看表达式 | left

XHR / FETCH调试

从调试器中打开XHR / Fetch Breakpoints面板。

您可以在发送XHR / Fetch调用时将其设置为中断,或者仅在特定的调用时设置:

XHR和Fetch调试 | left

调试DOM修改

右键单击一个元素并启用Break on Subtree Modifications:只要脚本遍历该元素子元素并修改它们,调试器就会自动停止,以便您检查发生了什么。

调试DOM修改 | left

打赏作者

说点什么

发表评论

  Subscribe  
提醒
%d 博主赞过: