it-swarm.dev

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

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

是否有Chrome插件或其他方式来更改Chrome本身的查看媒体,以打印机的形式查看页面?我认为它没有特定于Chrome的解决方案,但这是我的主要浏览器,所以拥有一个浏览器内的解决方案会很不错。

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

606
David Stinemetze

注意:这个答案涵盖了几个版本的Chrome,滚动查看v52v48v46v4v42每个都有更新的更新。

Chrome v52 +:

  • 打开开发人员工具(Windows: F12 要么 Ctrl+Shift+I, 苹果电脑: Cmd+Opt+I
  • 单击自定义并控制DevTools汉堡菜单按钮并选择更多工具>渲染设置(或渲染在较新的版本中)。
  • 检查渲染选项卡上的模拟打印介质复选框,然后选择打印媒体类型。

Chrome v52+

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

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

Chrome v48+

Chrome v46 +:

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

Chrome v46+ support

Chrome v43 +:

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

Emulate print media query on Chrome v43

Chrome v42:

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

Emulate print media query on Chrome v42

1070
lmeurs

已在Chrome中更改 32 35+

(在Chrome 35+中,默认情况下会出现“仿真”选项卡。此外,控制台可从任何主要选项卡中获得。)

  1. 在DevTools中,转到settings-> Overrides
  2. 启用“在控制台抽屉中显示仿真视图”
  3. 关闭设置,转到“元素”选项卡
  4. 击中 Esc 调出控制台
  5. 选择“仿真”选项卡,然后单击“屏幕”
  6. 向下滚动到“CSS Media”,选择“print”

此选项在控制台选项卡中不可用(尚?)。

Enable Overrides

165
Noco

从Chrome 32开始,您在抽屉Screen标签的Emulation部分中有CSS media选项。

只需启用它,选择print作为目标媒体类型,并且 - 看哪 - 您的页面几乎以其打印方式呈现。

使用 Esc 如果抽屉不可见,则将其抬起。

72
Alexander Pavlov

从Chrome 48(以及之前的几个版本)开始,该功能似乎再次发生了变化:

前几个步骤没有变化:

  1. 按 F12 提出开发者工具

  2. 按 ESC 打开控制台

根据之前的答案,可以在“仿真”选项卡下找到该设置。如下图所示,它现在已移至“渲染”选项卡,可通过单击“控制台”选项卡左侧的三个点来显示该选项卡。

Tab selection

Setting selection

21
Halle Knast

请参阅 这篇文章

Open chrome dev tools inspector

然后转到“覆盖”选项卡

Open config/Settings

20
adardesign

自Chrome 48+起,您可以通过以下步骤访问打印预览:

  1. 开放开发工具 - Ctrl/Cmd + Shift + I 或右键单击页面并选择“检查”。

  2. 击中 Esc 打开额外的抽屉。

  3. 如果尚未显示“渲染”,请单击3点烤肉串并选择“渲染”。

  4. 选中“模拟打印介质”复选框。

从那里Chrome将向您显示页面的打印版本,您可以像浏览器版本一样检查元素和故障排除。

Image of Chrome 49+ Print Preview option in Dev Tools

13
NilsyNils

如果您使用Google Chrome中的Print As PDF调试CSS并且未显示您的CSS元素背景颜色,请确保选中“背景图形”复选框。我花了差不多30分钟调试我的CSS,并想知道是什么导致我的CSS背景被忽略。

Google Chrome Print background color ignored

7
Rosdi Kasim

在Mac上的Chrome v51下,我通过单击右上角找到渲染设置,选择更多工具>渲染设置,然后在窗口底部提供的选项中选中模拟媒体按钮。

Chrome v51 MacEmulate media selector appears in the bottom

感谢所有其他导致我这样做的海报,并感谢那些提供没有图像答案的人。

6
user2182349

Chrome v67(mac):

  1. 等一下 Cmd+opt+j 打开开发工具
  2. 单击右侧的...,然后选择:更多工具>>渲染
  3. 当“渲染”窗口显示在屏幕底部时,“模拟CSS媒体”部分并从下拉列表中选择“屏幕”。
  4. 转到“文件>>打印”,您应该看到要打印的视图。

以上针对Mac上的Chrome v67的描述图片:

在何处查找“渲染”选项卡:单击右侧的...,然后选择:更多工具>>渲染

screenshot 1

如何打印“屏幕”视图:当“渲染”窗口显示在屏幕底部时,“模拟CSS媒体”部分并从下拉列表中选择“屏幕”。

screenshot 2

希望能帮助到你。

2
Matt

有了快捷方式,最快捷的方法就是

  1. 打开开发人员工具

    • 视窗: F12 要么 Ctrl+Shift+I
    • 苹果电脑: Cmd+Opt+I
  2. 打开命令菜单

    • 视窗: Ctrl+Shift+P
    • 苹果电脑: Cmd+Shift+P
  3. 键入print并选择从上下文菜单中模拟CSS打印介质类型

    Change Media Type Emulation Via Command Menu

看看优秀的,目前最受欢迎的 通过lmeurs回答 ,我认为这个解决方案可能会随着时间的推移保持稳定。

1
Kariem

Chrome v50:

方式1:

  1. 菜单>更多工具>渲染设置 (见图)
  2. 向下:渲染选项卡>模拟媒体“打印”

方式2:

  1. 打开控制台[esc]
  2. 控制台菜单>渲染
1
Ben Richter