google-chrome - 在打印预览模式下使用 Chrome 的元素检查器？

Question

我正在开发一个网站，需要处理打印 View 。通常，当我遇到布局问题时，我会使用 Chrome 的 Element Inspector。但是，这在打印预览模式中不存在。

是否有 Chrome 插件或其他一些方法可以在 chrome 本身中更改您的查看媒体，以便像打印机一样查看页面？我想它没有特定于 Chrome 的解决方案，但这是我的主要浏览器，因此拥有浏览器内解决方案会很好。

现在我只专注于打印预览媒体，但能够更改为任何支持的媒体类型(即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/tty/电视)。

Answer 1

注意:此答案涵盖多个版本的 Chrome，滚动查看 v52 , v48 , v46 , v43 和 v42 每个都有更新的更改。
Chrome v52+:

打开开发者工具(Windows:F12 或 Ctrl+Shift+I，Mac:Cmd+Opt+I)

单击自定义和控制 DevTools 汉堡菜单按钮，然后选择更多工具 > 渲染设置(或在较新版本中渲染)。

选中渲染选项卡上的模拟打印介质复选框，然后选择打印介质类型。

Chrome v48+(感谢 Alex 的关注):

打开开发人员工具(CTRLSHIFTI 或 F12)

单击左上角的切换设备模式按钮 (CTRLSHIFTM)。

通过单击 (1) 处的菜单中的显示控制台来确保显示控制台(如果开发人员工具栏具有焦点，则 ESC 键会切换控制台)。

在渲染选项卡中选中模拟打印媒体，可以通过在 (2) 处的菜单中选择渲染来打开该选项卡。

Chrome v46+:

打开开发人员工具(CTRLSHIFTI 或 F12)

单击左上角的切换设备模式按钮 (1)。

确保通过单击菜单按钮 (2) > 显示控制台 (3) 或按 ESC 键切换控制台来显示控制台(仅当开发人员工具栏具有焦点时才有效)。

打开仿真 (4) > 媒体 (5) 选项卡，选中 CSS 媒体并选择打印 (3)。

Chrome v43+:

步骤 2 中的抽屉图标已更改。

Chrome v42:

打开开发人员工具(CTRLSHIFTI 或 F12)

单击左上角的切换设备模式按钮 (1)。

通过单击显示抽屉按钮 (2) 或按 ESC 键切换抽屉，确保显示抽屉。

在仿真 > 媒体下检查 CSS 媒体并选择打印 (3)。