很酷的Chrome DevTools提示和技巧列表
Check out the overview of Chrome DevTools if you’re new to them
如果您不熟悉Chrome DevTools，请查看它们的概述
在“元素”面板中拖放 (Drag and Drop in the Elements panel)
In the Elements panel you can drag and drop any HTML element and change its position across the page
在“元素”面板中，您可以拖放任何HTML元素并更改其在页面中的位置
在控制台中引用当前选定的元素 (Reference the currently selected element in the Console)
Select a node in the Elements panel, and type $0 in the console to reference it.
在“元素”面板中选择一个节点，然后在控制台中键入$0进行引用。
Tip: if you’re using jQuery, you can enter
$($0)to access the jQuery API on this element.提示：如果您使用的是jQuery，则可以输入
$($0)来访问此元素上的jQuery API。
使用控制台中上一次操作的值 (Use the value of the last operation in the Console)
Use $_ to reference the return value of the previous operation executed in the Console
使用$_引用在控制台中执行的上一个操作的返回值
添加CSS并编辑元素状态 (Add CSS and edit the element state)
In the Elements panel there are 2 super useful buttons.
在“元素”面板中，有2个超级有用的按钮。
The first lets you add a new CSS property, with any selector you want but pre-filling the currently selected element:
首先，您可以添加一个新CSS属性，以及所需的任何选择器，但要预先填充当前选定的元素：
The second one lets you trigger a state for the selected element, so you can see the styles applied when it’s active, hovered, on focus.
第二个控件可让您触发所选元素的状态，因此您可以查看其处于活动状态，悬停且焦点对准时所应用的样式。
查找定义CSS属性的位置 (Find where a CSS property is defined)
cmd-click (ctrl-click on Windows) a CSS property in the Elements panel, the DevTools will point you to the place where that is defined, in the Source panel
cmd-click “元素”面板中CSS属性(在Windows上为ctrl-click )，DevTools会将您指向“源”面板中定义的位置。
将修改后CSS保存到文件 (Save to file the modified CSS)
Click the name of the CSS file that you edited. The inspector opens it into the Sources pane and from there you can save it with the live edits you applied.
单击您编辑CSS文件的名称。 检查器将其打开到“源”窗格中，然后可以将其与您应用的实时编辑一起保存。
This trick does not work for new selectors added using +, or into the element.style properties, but only for modified, existing ones.
此技巧不适用于使用+添加到element.style属性中的新选择器，仅适用于已修改的现有选择器。
截图单个元素 (Screenshot a single element)
Select an element and press cmd-shift-p (or ctrl-shift-p in Windows) to open the Command Menu, and select Capture node screenshot
选择一个元素，然后按cmd-shift-p (或Windows中的ctrl-shift-p )打开“命令”菜单，然后选择“ 捕获”节点屏幕截图
使用CSS选择器查找元素 (Find an element using CSS selectors)
Pressing cmd-f (ctrl-f in Windows) opens the search box in the Elements panel.
按cmd-f (在Windows中为ctrl-f )可在“元素”面板中打开搜索框。
You can type any string in there to match the source code, or you can also use CSS selectors to have Chrome generate an image for you:
您可以在其中键入任何字符串以匹配源代码，也可以使用CSS选择器让Chrome为您生成图像：
在控制台中按Shift键 (Shift-enter in the Console)
To write commands that span over multiple lines in the Console, press shift-enter.
要在控制台中编写跨多行的命令，请按shift-enter 。
Once you’re ready, press enter at the end of the script to execute it:
准备就绪后，请在脚本末尾按Enter以执行它：
清除控制台 (Clear the Console)
You can clear the console using the Clear button on the top-left of the console, or by pressing ctrl-l or cmd-k.
您可以使用控制台左上方的“ 清除”按钮或按ctrl-l或cmd-k来清除控制台。
去… (Go to…)
In the Sources panel:
在“源”面板中：
-
cmd-o(ctrl-oin Windows), shows all the files loaded by your page.cmd-o(在Windows中为ctrl-o)，显示页面加载的所有文件。 -
cmd-shift-o(ctrl-shift-oin Windows) shows the symbols (properties, functions, classes) in the current file.cmd-shift-o(在Windows中为ctrl-shift-o)显示当前文件中的符号(属性，函数，类)。 -
ctrl-ggoes to a specific line.ctrl-g转到特定行。
手表表情 (Watch Expression)
Instead of writing again and again a variable name or an expression you are going to check a lot during a debug session, add it to the Watch Expression list.
您无需在调试会话中一遍又一遍地写一个变量名或一个表达式，而是将其添加到“ 监视表达式”列表中。
XHR /提取调试 (XHR/Fetch debugging)
From the debugger open the XHR/Fetch Breakpoints panel.
在调试器中，打开XHR / Fetch Breakpoints面板。
You can set it to break any time an XHR / Fetch call is sent, or just on specific ones:
您可以将其设置为在发送XHR / Fetch调用时中断，或者仅在特定的调用时中断：
调试DOM修改 (Debug on DOM modifications)
Right-click an element and enable Break on Subtree Modifications: whenever a script traverses that element children and modifies them, the debugger stops automatically to let you inspect what’s happening.
右键单击一个元素并启用Break on Subtree Modifications ：每当脚本遍历该元素子元素并对其进行修改时，调试器将自动停止以让您检查正在发生的事情。