很酷的Chrome DevTools提示和技巧列表

Chrome DevTools提供了一组惊人的工具,可帮助您在Web平台上进行开发。这里有一些您可能不知道的提示

看看Chrome DevTools概述如果您是他们的新手

在“元素”面板中拖放

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

Drag and Drop in the Elements Panel

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

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

Reference elements in the Console

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

使用控制台中上一次操作的值

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

Use the last result

添加CSS并编辑元素状态

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

首先,您可以添加一个新的CSS属性,以及所需的任何选择器,但要预先填充当前选定的元素:

Add a CSS rule

第二个选项可让您触发所选元素的状态,因此您可以查看其处于活动状态,悬停在焦点上时所应用的样式。

Element state

查找定义CSS属性的位置

cmd-clickctrl-clickWindows上的CSS属性,在“元素”面板中,DevTools会将您指向在“源”面板中定义的位置。

Find where a CSS property is defined

将修改后的CSS保存到文件

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

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

Save to File the modified CSS

截图单个元素

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

Screenshot a single element

使用CSS选择器查找元素

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

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

Find an element using CSS selectors

在控制台中按Shift键

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

准备就绪后,请在脚本末尾按Enter键以执行它:

Shift-enter in the Console

清除控制台

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

去…

在“源”面板中:

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

Files list

手表表情

您无需在调试会话中一遍又一遍地写一个变量名或一个表达式,而是将其添加到手表表情列表。

Watch Expressions

XHR /提取调试

从调试器中打开XHR /获取断点控制板。

您可以将其设置为在任何时候中断XHR/拿来呼叫已发送,或仅发送特定的呼叫:

XHR and Fetch debugging

调试DOM修改

右键单击一个元素并启用中断子树修改:每当脚本遍历该元素的子元素并对其进行修改时,调试器就会自动停止以让您检查正在发生的事情。

Debug on DOM modifications


更多devtools教程: