DevTools 技巧合集十二

模拟不同设备截图页面

拍摄移动设备或平板电脑的照片非常麻烦，因为你需要处理指纹、眩光和对焦问题。使用设备模拟可以大大简化这一过程。
要在设备框架内截取网页截图，请使用 Chrome 或 Edge（或任何 Chromium 浏览器）：

• 1. 在DevTools中，通过点击图标或按 Ctrl + Shift + M（在 Mac 上按 Cmd + Shift + M）启用设备模拟。
• 2. 从设备下拉菜单中选择一个设备。请注意，并非所有设备都有，你也可以自定义尺寸。
     设备下拉菜单打开，显示所有选项。
     
• 3. 点击 … 按钮（更多选项），然后选择显示设备框架。
     在设备模拟工具的更多选项菜单中启用设备框架。
     
• 4. 再次点击 … 按钮，选择捕获截图。
     
     从更多选项菜单中选择截图选项。
     就是这样，现在你有了在透明背景上设备中的网页截图。

     查找并导出 CSS 更改

     如果你在 DevTools 中花时间更改了 CSS，无论是在 Firefox 的规则面板，还是在 Chrome 或 Edge 的源文件或样式面板中，但不记得你所做的所有更改，你可以轻松地查找和提取这些更改：

     在 Firefox 或 Safari 中：

• 使用更改面板（在检查器中），它允许你复制所有更改，或复制给定的 CSS 规则。

  在 Chrome 或 Edge 中：

• 使用更改面板（你可以通过按 Ctrl+Shift+P 或 Cmd+Shift+P 打开命令菜单来打开它）。