小编典典

在打印预览模式下使用 Chrome 的元素检查器?

all

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

是否有 Chrome 插件或其他方式来更改 chrome 本身的查看媒体,以像打印机一样查看页面?我想它没有特定于 Chrome
的解决方案,但那是我的主要浏览器,所以有一个浏览器内的解决方案会很好。

现在我只关注打印预览媒体,但最好能够更改为任何支持的媒体类型(即全部/盲文/浮雕/手持/打印/投影/屏幕/语音/tty/电视)。


阅读 124

收藏
2022-03-03

共1个答案

小编典典

注意:这个答案涵盖了 Chrome 的多个版本,滚动查看v52v48v46v43v42每个版本及其更新的更改。

Chrome v52+:

  • 打开开发者工具(Windows:F12或Ctrl ,Mac :Shift )ICmdOptI
  • 单击自定义和控制 DevTools汉堡菜单按钮,然后选择更多工具 > 渲染设置(或在较新版本中渲染)
  • 选中渲染选项卡上的模拟打印媒体复选框并选择打印媒体类型。

铬 v52+

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

  • 打开开发者工具(CTRLSHIFTI或F12)
  • 单击左上角的切换设备模式CTRLSHIFTM按钮 ( )。
  • 确保通过单击(1) 处的在菜单中显示控制台ESC来显示控制台(如果开发人员工具栏具有焦点,则该键切换控制台)。
  • 在渲染选项卡上选中模拟打印媒体,可以通过在 (2) 处的菜单中选择渲染来打开该选项卡。

铬 v48+

Chrome v46+:

  • 打开开发者工具(CTRLSHIFTI或F12)
  • 单击左上角的切换设备模式按钮 (1)。
  • 确保通过单击菜单按钮 (2) >显示控制台(3) 或按下ESC键来切换控制台来显示控制台(仅当开发人员工具栏具有焦点时才有效)。
  • 打开仿真 (4) > 媒体 (5)选项卡,检查CSS 媒体并选择打印(3)。

Chrome v46+ 支持

Chrome v43+:

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

在 Chrome v43 上模拟打印媒体查询

Chrome v42:

  • 打开开发者工具(CTRLSHIFTI或F12)
  • 单击左上角的切换设备模式按钮 (1)。
  • 确保通过单击显示抽屉按钮 (2) 或按ESC键切换抽屉来显示抽屉。
  • Emulation > Media下检查CSS media并选择print (3)。

在 Chrome v42 上模拟打印媒体查询

2022-03-03