729

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

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

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

4

11 回答 11

1249

注意：这个答案涵盖了 Chrome 的多个版本，滚动查看v52、v48、v46、v43和v42每个版本及其更新的更改。

铬 v52+：

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

铬 v52+

Chrome v48+（感谢 Alex 的注意）：

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

铬 v48+

铬 v46+：

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

Chrome v46+ 支持

铬 v43+：

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

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

铬 v42：

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

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

于 2015-04-30T07:53:38.560 回答
169

在 Chrome 32 35+中更改

（在 Chrome 35+ 中，默认情况下存在“仿真”选项卡。此外，控制台可从任何主选项卡中使用。）

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

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

启用覆盖

于 2014-01-16T08:38:21.397 回答
74

从 Chrome 32 开始，您可以在抽屉选项卡CSS media的Screen部分中选择。Emulation

只需启用它，选择print目标媒体类型，然后 - 看 - 您的页面将 [几乎] 以打印方式呈现。

如果抽屉不可见，可用于Esc拉起抽屉。

于 2012-03-09T14:54:42.873 回答
24

从 Chrome 48（可能还有几个更早的版本）开始，该功能似乎又发生了变化：

前几个步骤不变：

  1. 按下F12以调出开发者工具

  2. 按下ESC打开控制台

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

选项卡选择

设定选择

于 2016-01-27T14:55:06.483 回答
20

请看这篇文章

打开 chrome 开发工具检查器

然后转到“覆盖”选项卡

打开配置/设置

于 2013-02-26T18:27:32.720 回答
14

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

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

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

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

  4. 选中“模拟打印媒体”复选框。

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

开发工具中 Chrome 49+ 打印预览选项的图像

于 2015-11-23T19:09:22.773 回答
7

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

谷歌浏览器打印背景颜色被忽略

于 2015-10-18T06:27:56.930 回答
7

使用快捷方式，最快的方法是

  1. 打开开发者工具

    • 窗户：F12或Ctrl+ Shift+I
    • 麦克：Cmd+ Opt+I

  2. 打开命令菜单

    • 窗户：Ctrl+ Shift+P
    • 麦克：Cmd+ Shift+P

  3. 键入并从上下文菜单中print选择模拟 CSS 打印媒体类型

    通过命令菜单更改媒体类型仿真

看看 lmeurs 给出的出色且目前最受欢迎的答案，我认为这个解决方案也可能随着时间的推移保持稳定。

于 2019-04-25T06:29:59.593 回答
6

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

铬 v51 Mac 模拟媒体选择器出现在底部

感谢所有其他将我引向此的海报，并感谢那些在没有图像的情况下提供答案的人。

于 2016-05-27T12:45:11.357 回答
5

铬 v67 (mac):

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

mac 上 Chrome v67 的上述描述的图像：

在哪里可以找到“渲染”选项卡：单击...右侧的 ，然后选择：更多工具 >> 渲染

截图 1

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

截图 2

希望能帮助到你。

于 2018-06-15T08:38:09.547 回答
1

铬 v50：

方式一：

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

方式二：

  1. 打开控制台 [esc]
  2. 控制台菜单 > 渲染
于 2016-05-11T15:28:29.817 回答