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


Using Chrome's Element Inspector in Print Preview Mode?

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

有没有Chrome插件或其他方法来改变你在Chrome中的查看介质，像打印机一样查看页面？我想它没有一个特定于Chrome的解决方案，但这是我的主要浏览器，所以最好有一个浏览器内的解决方案。

现在，我只关注打印预览媒体，但最好能够更改为任何支持的媒体类型(即all/braille/embossed/handheld/print/projection/screen/speech/tty/tv)。

相关讨论

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

铬V52+：

  • 打开开发人员工具(windows:f12或ctrl+shift+i，mac:cmd+opt+i)
  • 单击"自定义和控制DevTools汉堡"菜单按钮，然后选择"更多工具>渲染设置"(或在较新版本中渲染)。
  • 选中"渲染"选项卡上的"模拟打印介质"复选框，然后选择打印介质类型。

Chrome v52+

Chrome v48+(感谢Alex注意到这一点)：

  • 打开开发人员工具(ctrlshifti或f12)
  • 单击左上角的"切换设备模式"按钮(ctrlshiftsmabbkbd)。
  • 通过单击(1)菜单中的"显示控制台"，确保显示控制台(esc键在开发者工具栏有焦点时切换控制台)。
  • 选中"渲染"选项卡上的"模拟打印介质"，可通过在(2)的菜单中选择"渲染"打开该选项卡。

Chrome v48+

铬V46＋：

  • 打开开发人员工具(ctrlshifti或f12)
  • 单击左上角的"切换设备模式"按钮(1)。
  • 通过单击菜单按钮(2)>显示控制台(3)或按esc键切换控制台(仅当开发人员工具栏具有焦点时才有效)，确保显示控制台。
  • 打开Emulation(4)>Media(5)选项卡，选中CSS Media并选择Print(3)。

Chrome v46+ support

铬V43+：

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

Emulate print media query on Chrome v43

铬V42：

  • 打开开发人员工具(ctrlshifti或f12)
  • 单击左上角的"切换设备模式"按钮(1)。
  • 通过单击"显示抽屉"按钮(2)或按esc键切换抽屉，确保显示抽屉。
  • 在"仿真>媒体"下，检查CSS媒体并选择"打印"(3)。

Emulate print media query on Chrome v42

相关讨论

铬合金变化3235+

(在Chrome35+中，"Emulation"选项卡默认存在。此外，控制台可从任何主选项卡中获得。)

  • 在devtools中，转到settings->overrides->strike>
  • enable"show emulation view in console drawer"
  • 关闭设置，转到"元素"选项卡
  • 点击esc打开控制台
  • 选择"仿真"选项卡，单击"屏幕"
  • 向下滚动至"CSS媒体"，选择"打印"

    • 这个选项(还没有？)可在控制台选项卡中找到。

    Enable Overrides

    相关讨论

    由于Chrome32，您在抽屉Emulation选项卡的Screen部分有CSS media选项。

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

    ></P><P>如果看不见抽屉，请使用<kbd>esc</kbd>。</P></p> <div class=

    相关讨论

    从Chrome48(可能更早的几个版本)开始，该功能似乎再次移动：

    前几个步骤不变：

  • 按f12打开开发人员工具

  • 按esc打开控制台

    • 根据前面的答案，可以在"仿真"选项卡下找到设置。如下图所示，它现在已被移动到"渲染"选项卡，可以通过单击"控制台"选项卡左侧的三个点来显示。

    Tab selection

    Setting selection

    请看这篇文章

    Open chrome dev tools inspector

    然后转到"覆盖"选项卡

    Open config/Settings

    相关讨论

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

  • 打开dev tools–ctrl/cmd+shift+iakbd，或右键单击页面并选择"检查"。

  • 点击esc打开额外的抽屉。

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

  • 选中"模拟打印介质"复选框。

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

    Image of Chrome 49+ Print Preview option in Dev Tools

    相关讨论

    如果使用Google Chrome中的"打印为PDF"调试CSS，并且没有显示CSS元素背景色，请确保选中"背景图形"复选框。我花了将近30分钟调试我的CSS，想知道是什么导致我的CSS背景被忽略。

    Google Chrome Print background color ignored

    相关讨论

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

    Chrome v51 MacEmulate media selector appears in the bottom

    感谢所有其他的海报，感谢那些没有图片的答案。

    相关讨论

    铬V67(Mac)：

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

    • Mac上Chrome V67的上述描述图像：

    "渲染"选项卡的位置：单击右侧的...，然后选择："更多工具">>"渲染"

    screenshot 1

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

    screenshot 2

    希望它有帮助。

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

  • 打开开发人员工具

    • Windows:f12或ctrl+shift+i
    • MAC:CMDABBBD+OPTABBBD+ABCD

  • 打开命令菜单

    • Windows:CtrL+Shift+Pbakbd
    • MAC:CMDABBBD+SHIFAT+PABBD

  • 键入print并从上下文菜单中选择"模拟CSS打印介质类型"

    Change Media Type Emulation Via Command Menu

    • 考虑到LMeurs出色的和目前最乐观的回答，我认为这个解决方案也可能会随着时间的推移保持稳定。

    铬V50：

    方式1：

  • 菜单>更多工具>渲染设置(见图像)
  • 向下：渲染选项卡>模拟媒体"打印"

    • 方式2：

  • 打开控制台
  • 控制台菜单>渲染