Chrome 开发者工具的11个骚技巧指的是什么

# Chrome 开发者工具的11个骚技巧指的是什么

Chrome 开发者工具（DevTools）是前端开发者的瑞士军刀，但大多数人只掌握了基础功能。以下是11个鲜为人知却极其高效的技巧，助你解锁进阶开发体验。

---

## 1. **快速切换主题**  
   `Ctrl/Cmd + Shift + P` 打开命令菜单，输入 `theme`，可切换深色/浅色主题。熬夜写代码时，深色模式更护眼。

## 2. **直接编辑CSS为JS变量**  
   在 **Styles** 面板中，按住 `Shift` 点击颜色值，可将其转换为 `hsl()`、`rgb()` 或十六进制格式，甚至复制为 JS 变量名（如 `--primary-color`）。

## 3. **控制台引用DOM元素**  
   在 **Elements** 面板选中节点后，控制台输入 `$0` 可直接引用该元素。`$1`~`$4` 则对应历史选中的前4个节点。

## 4. **XHR/Fetch请求重放**  
   **Network** 面板中右键请求，选择 **Replay XHR**，无需刷新页面即可重复发送请求，调试接口超方便。

## 5. **本地文件覆盖线上资源**  
   **Sources** → **Overrides** 中设置本地文件夹，右键网络请求选择 **Save for overrides**，即可用本地文件替换线上资源。

## 6. **强制触摸模式**  
   `Ctrl/Cmd + Shift + P` 输入 `emulate touch`，强制开启触摸事件模拟，测试移动端交互。

## 7. **动画检查与调速**  
   **Elements** → **Animations** 面板可录制、暂停网页动画，并调整播放速度，精准调试复杂动效。

## 8. **一键展开所有DOM子节点**  
   选中元素后，按住 `Alt` 键点击展开箭头，会递归展开所有嵌套子节点。

## 9. **控制台截图特定元素**  
   控制台输入：  
   ```js
   document.querySelector('div').screenshot()

可截取指定DOM元素，保存为PNG。

10. 自定义代码片段（Snippets）

Sources → Snippets 中保存常用代码片段，随时通过命令菜单运行，比如快速注入jQuery。

11. 隐藏的传感器模拟

Ctrl/Cmd + Shift + P 输入 sensor，可模拟地理位置、陀螺仪等设备传感器，测试物联网或AR应用。

掌握这些技巧后，你的调试效率至少提升200%。Chrome DevTools 的深度功能远不止于此，建议多用 Ctrl/Cmd + Shift + P 探索隐藏命令。
”`

（注：实际字数约550字，可根据需要增减细节。）