Chrome DevTools 提供了一套令人惊叹的工具来帮助你在 Web 平台上进行开发。以下是一些你可能还不知道的技巧
- 在元素面板中拖放
- 在控制台中引用当前选中的元素
- 在控制台中使用上一次操作的值
- 添加 CSS 并编辑元素状态
- 查找 CSS 属性的定义位置
- 将修改的 CSS 保存到文件
- 截取单个元素的屏幕截图
- 使用 CSS 选择器查找元素
- 在控制台中使用 Shift-Enter
- 清除控制台
- 跳转到...
- 监视表达式
- XHR/Fetch 调试
- DOM 修改时调试
在元素面板中拖放
在元素面板中，你可以拖放任何 HTML 元素并改变其在页面中的位置
在控制台中引用当前选中的元素
在元素面板中选择一个节点，然后在控制台中输入 $0 来引用它。
提示：如果你使用 jQuery，可以输入
$($0)来在此元素上访问 jQuery API。
在控制台中使用上一次操作的值
使用 $_ 来引用在控制台中执行的上一次操作的返回值
添加 CSS 并编辑元素状态
在元素面板中有 2 个非常有用的按钮。
第一个让你添加一个新的 CSS 属性，可以使用任何你想要的选择器，但会预填充当前选中的元素：
第二个让你为选中的元素触发一个状态，这样你就可以看到当它处于活动、悬停、聚焦状态时应用的样式。
查找 CSS 属性的定义位置
在元素面板中 cmd-点击（Windows 上是 ctrl-点击）一个 CSS 属性，DevTools 会在源代码面板中指向该属性的定义位置
将修改的 CSS 保存到文件
点击你编辑的 CSS 文件的名称。检查器会在源代码面板中打开它，从那里你可以保存你应用的实时编辑。
这个技巧不适用于使用 + 添加的新选择器，或 element.style 属性，只适用于修改的现有选择器。
截取单个元素的屏幕截图
选择一个元素并按 cmd-shift-p（Windows 上是 ctrl-shift-p）打开命令菜单，然后选择 捕获节点屏幕截图
使用 CSS 选择器查找元素
按 cmd-f（Windows 上是 ctrl-f）在元素面板中打开搜索框。
你可以在其中输入任何字符串来匹配源代码，或者你也可以使用 CSS 选择器让 Chrome 为你生成图像：
在控制台中使用 Shift-Enter
要在控制台中编写跨越多行的命令，请按 shift-enter。
准备好后，在脚本末尾按 enter 键执行它：
清除控制台
你可以使用控制台左上角的 清除 按钮清除控制台，或者按 ctrl-l 或 cmd-k。
跳转到...
在源代码面板中：
cmd-o（Windows 上是ctrl-o），显示页面加载的所有文件。cmd-shift-o（Windows 上是ctrl-shift-o）显示当前文件中的符号（属性、函数、类）。ctrl-g跳转到特定行。
监视表达式
与其在调试会话期间一遍又一遍地写变量名或表达式，不如将其添加到 监视表达式 列表中。
XHR/Fetch 调试
从调试器打开 XHR/Fetch 断点 面板。
你可以设置它在任何时候发送 XHR / Fetch 调用时中断，或者只在特定的调用时中断：
DOM 修改时调试
右键点击一个元素并启用 子树修改时中断：每当脚本遍历该元素的子元素并修改它们时，调试器会自动停止，让你检查正在发生的事情。
