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

我正在开发一个网站，需要在打印视图上工作。 通常当我有布局问题时，我使用Chrome的元素检查器。 但是，这在打印预览模式下不存在。

是否有Chrome浏览器插件或其他方式来改变Chrome浏览器本身的查看介质，以查看打印机页面？ 我想这不是一个Chrome特定的解决scheme，但这是我的主要浏览器，所以有一个浏览器内解决scheme将是很好的。

现在我只关注打印预览介质，但是能够更改为任何支持的介质types（即全部/盲文/压印/手持/打印/投影/屏幕/语音/ tty /电视）。

Answer 1

注意：此答案涵盖多个版本的Chrome，请滚动查看v52 ， v48 ， v46 ， v43和v42各自的更新更改。

Chrome v52 +：

• 打开开发工具 （Windows： F12或Ctrl + Shift + I ，Mac： Cmd + Opt + I ）
• 单击自定义并控制DevTools汉堡包菜单button，然后select更多工具>渲染设置 （或在新版本中渲染 ）。
• 在“ 渲染”选项卡上选中“ 模拟打印介质”checkbox，然后select“ 打印介质types”。

Chrome v48 +（感谢Alex注意）：

• 打开开发工具（CTRL + SHIFT + I或F12）
• 点击左上angular的切换设备模式button（CTRL + SHIFT + M）。
• 确保通过单击（1）菜单中的显示控制台来显示控制台 （如果开发人员工具栏具有焦点，则按ESC键切换控制台）。
• 在（2）的菜单中select渲染 （ Rendering） ，检查渲染选项卡上的仿真打印介质 。

Chrome v46 +：

• 打开开发工具（CTRL + SHIFT + I或F12）
• 点击左上angular的切换设备模式button（1）。
• 确保通过单击菜单button（2）> 显示控制台 （3）或按ESC键切换控制台（仅在开发人员工具栏具有焦点时才能使用） 显示控制台 。
• 打开仿真（4）>介质（5）选项卡，选中CSS介质并select打印 （3）。

Chrome v43 +：

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

Chrome v42：

• 打开开发工具（CTRL + SHIFT + I或F12）
• 点击左上angular的切换设备模式button（1）。
• 确保通过单击显示抽屉button（2）或按下ESC键切换抽屉来显示抽屉。
• 在仿真>媒体下检查CSS媒体并select打印 （3）。

Answer 2

在Chrome 32 35+中更改

（在Chrome 35+中，“Emulation”选项卡默认存在，而且控制台可以在任何主选项卡上使用。）

1. 在DevTools中，进入设置 – >覆盖
2. 启用“在控制台抽屉中显示仿真视图”
3. closures设置，进入“元素”选项卡
4. 打ESC来调出控制台
5. select标签“仿真”，点击“屏幕”
6. 向下滚动到“CSS媒体”，select“打印”

该选项在控制台选项卡中不可用（还没有？）。

Answer 3

自Chrome 32以来，您在抽屉“ Emulation选项卡的“ Screen部分中拥有CSS media选项。

只要启用它，selectprint作为目标媒体types，并且 – 请注意 – 您的页面几乎将以打印的方式呈现。

如果不可见，使用Esc调出抽屉。

Answer 4

请参阅这篇文章

然后转到“覆盖”选项卡

Answer 5

从Chrome 48（也许还有几个版本）开始，这个function似乎再次发生了变化：

前几个步骤是不变的：

1. 按F12调出开发人员工具

2. 按ESC键打开控制台

根据以前的答案，可以在“仿真”选项卡下find该设置。 如下图所示，现在它已经被移动到“渲染”选项卡，可以通过点击“控制台”选项卡左侧的三个点来提出。

Answer 6

从Chrome 48+开始，您可以通过以下步骤访问打印预览：

1. 打开开发工具 – Ctrl / Cmd + Shift + I或右键单击页面并select“检查”。
2. 点击逃生打开额外的抽屉。
3. 如果“渲染”还没有显示，点击3点烤肉串并select“渲染”。
4. 选中“仿真打印介质”checkbox。

从那里Chrome浏览器将显示您的页面的打印版本，您可以检查元素和像浏览器版本的疑难解答。

Answer 7

在Mac版本的Chrome v51下，通过点击右上angular的select更多工具>渲染设置，然后在窗口底部提供的选项中选中仿真媒体button，find了渲染设置。

感谢所有其他的海报，让我这样做，并信任那些提供了答案没有图像。

Answer 8

如果您在Google Chrome浏览器中使用Print As PDF来debuggingCSS，并且CSS元素背景颜色未显示，请确保勾选了“背景graphics”checkbox。 我花了近30分钟debugging我的CSS，并想知道是什么导致我的CSS背景被忽略。

Answer 9

Chrome v50：

方式1：

1. 菜单>更多工具>渲染设置（见图）
2. 向下：渲染选项卡>仿真媒体“打印”

方式2：

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