使用Chrome的Element Inspector在打印预览模式下?

发布时间 2023-11-02 20:31:25作者: 小满独家

内容来自 DOC https://q.houxu6.top/?s=使用Chrome的Element Inspector在打印预览模式下?

我正在开发一个网站,需要在打印预览模式下进行工作。通常,当我遇到布局问题时,我会使用Chrome的Element Inspector。然而,在打印预览模式下并不存在Element
Inspector。

是否有Chrome插件或其他方法可以在Chrome本身中更改您的查看介质,以查看页面作为打印机?我想这不一定是Chrome特定的解决方案,但我的主要浏览器是Chrome,所以有一款浏览器内的解决方案会很好。

目前我只关注打印预览媒介,但能够切换到任何支持的媒介类型(例如:全部/盲文/浮雕/手持设备/打印/投影/语音/电视)将会更好。


注意:此答案涵盖了多个版本的Chrome,滚动查看 v52v48v46v43v42 ,每个版本都有其更新的变化。

Chrome v52+:

  • 打开 开发者工具(Windows:F12Ctrl+Shift+I,Mac:Cmd+Opt+I
  • 点击 自定义和控制开发者工具 汉堡菜单按钮,选择 更多工具>渲染设置(或新版本中的 渲染)。
  • 渲染 选项卡中选中 模拟打印媒体 复选框,并选择 打印 媒体类型。

Chrome v52+

Chrome v48+ (感谢Alex的提醒):

  • 打开开发者工具(CTRL``SHIFT``IF12
  • 点击左上角的 切换设备模式 按钮(CTRL``SHIFT``M)。
  • 确保通过在(1)菜单中点击 显示控制台 来显示控制台(ESC 键可以在开发者工具栏具有焦点时切换控制台)。
  • 在(2)菜单中的 渲染 选项中选中 模拟打印媒体

Chrome v48+

Chrome v46+:

  • 打开开发者工具(CTRL``SHIFT``IF12
  • 点击左上角的 切换设备模式 按钮(1)。
  • 确保通过点击菜单按钮(2)> 显示控制台(3)或按 ESC 键切换控制台(仅当开发者工具栏具有焦点时有效)。
  • 打开 Emulation(4)> Media(5) 选项卡,选中 CSS media 并选择 print(3)。

Chrome v46+ support

Chrome v43+:

  • 第二步中的抽屉图标已更改。

Emulate print media query on Chrome v43

Chrome v42:

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

Emulate print media query on Chrome v42