Web前端开发资源网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
未经允许不得转载：Web前端开发资源网 » 分享一些实用的Chrome DevTools技巧
推荐阅读：