【问题标题】:Using Chrome's Element Inspector in Print Preview Mode?在打印预览模式下使用 Chrome 的元素检查器?
【发布时间】:2012-03-21 09:50:57
【问题描述】:

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

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

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

【问题讨论】:

标签: google-chrome google-chrome-devtools web-inspector print-preview


【解决方案1】:

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

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

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

【讨论】:

  • 我希望它会比这更简单,但我想现在必须这样做。如果最终自动将其内置到其中一个工具中,那就太好了。
  • 当我有机会时,我一定要试一试。在那之前我可能会坚持使用@Jon-YYC 的方法。
  • 我在 mac 上使用的是 28 版,但没有看到这个选项……还有其他人有这个问题吗?
  • @AaronHill 我在 Mac 上使用的是 28 版,没有任何问题。尽管您可能实际上并没有进入设置对话框。您可以通过单击 Element Inspector 右下角的齿轮图标来找到它。
  • 这个答案现在已经过时了。
【解决方案2】:

请看This article

然后转到“覆盖”选项卡

【讨论】:

  • 这个答案现在已经过时了。
【解决方案3】:

在 Chrome 中更改 32 35+

(在 Chrome 35+ 中,“仿真”选项卡默认存在。此外,控制台可从任何主选项卡中使用。)

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

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

【讨论】:

  • 为了反映此更新,我已将其标记为正确答案。
  • Chrome 36 中不再存在 Overrides 选项卡(我不知道何时更改)。仿真选项卡默认存在。
  • 只是我还是 Chrome 36 中的 CSS 媒体选项消失了?现在只能根据特定的移动设备进行选择。更新:多哈。按照上面的说明,字面上必须点击“屏幕”。不是很明显它是可点击的。
  • 我现在使用它时发现的唯一问题是它实际上并不是 Chrome 打印出来的。这在 Bootstrap 3.x 中非常明显,其中媒体将使用 grid-md 而打印预览使用 grid-sm
  • Chrome 39 这是在“媒体”下。您必须先单击 devtools 顶部栏左侧的小电话图标来启用设备仿真,然后单击设备仿真器右上角的 3 个点。
【解决方案4】:

注意:此答案涵盖 Chrome 的多个版本,滚动查看 v52v48v46v43 v42 各有更新。

Chrome v52+:

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

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

  • 打开开发工具(CTRLSHIFTIF12
  • 单击左上角的切换设备模式按钮(CTRLSHIFTM)。李>
  • 通过单击 (1) 处菜单中的 显示控制台 确保显示控制台(如果开发人员工具栏有焦点,ESC 键将切换控制台)。
  • 在渲染选项卡上选中 Emulate print media,可以通过在 (2) 的菜单中选择 Rendering 打开该选项卡。

Chrome v46+:

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

Chrome v43+:

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

Chrome v42:

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

【讨论】:

  • 我可以确认这一点,因此我将其作为批准的答案。我不确定他们为什么坚持每隔几个版本就移动它。
  • 在 Chrome 48 中找到它,但他们再次移动它:转到抽屉中的“渲染”,选中“模拟打印媒体”。
  • 这些频繁的变化是我见过的谷歌迄今为止最愚蠢的事情!真是浪费我的时间。
  • 不幸的是,这并不总是模拟打印预览显示的相同内容,因此不适合调试。不过,这有助于了解总体布局和样式。
  • 这个“打印”模拟器完全没用。它没有正确模拟页面,因为您在浏览器中看到的内容与您在打印预览中看到的完全不同。有人有可行的解决方案吗?
【解决方案5】:

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

【讨论】:

    【解决方案6】:

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

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

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

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

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

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

    【讨论】:

    【解决方案7】:

    从 Chrome 48(可能还有几个更早的版本)开始,该功能似乎又发生了变化:

    前几个步骤不变:

    1. F12 调出开发者工具

    2. ESC打开控制台

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

    【讨论】:

      【解决方案8】:

      Chrome v50:

      方式一:

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

      方式二:

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

      【讨论】:

        【解决方案9】:

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

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

        【讨论】:

        【解决方案10】:

        Chrome v67 (mac):

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

        Mac 上 Chrome v67 的上述说明图片:

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

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

        希望对你有帮助。

        【讨论】:

          【解决方案11】:

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

          1. 打开开发者工具

            • Windows:F12Ctrl+Shift+I
            • Mac:Cmd+Opt+I
          2. 打开Command Menu

            • Windows:Ctrl+Shift+P
            • Mac:Cmd+Shift+P
          3. 键入print 并从上下文菜单中选择模拟 CSS 打印媒体类型

          看看目前最优秀的answer by lmeurs,我认为这个解决方案也可能随着时间的推移保持稳定。

          【讨论】:

          • 通过 DevTools GUI 做同样的事情:菜单 -> 更多工具 -> 渲染。请参阅“渲染选项卡”并向下滚动到“模拟 CSS 媒体类型”下拉菜单。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-04-26
          • 2014-11-25
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-10-26
          相关资源
          最近更新 更多