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

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

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

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

注意:此答案涵盖多个版本的Chrome,请滚动查看v52v48v46v43v42各自的更新更改。

Chrome v52 +:

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

Chrome v52 +

Chrome v48 +(感谢Alex注意):

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

Chrome v48 +

Chrome v46 +:

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

Chrome v46 +支持

Chrome v43 +:

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

在Chrome v43上模拟打印介质查询

Chrome v42:

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

在Chrome v42上模拟打印介质查询

在Chrome 32 35+中更改

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

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

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

启用覆盖

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

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

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

请参阅这篇文章

打开chrome开发工具检查器

然后转到“覆盖”选项卡

打开配置/设置

从Chrome 48(也许还有几个版本)开始,这个function似乎再次发生了变化:

前几个步骤是不变的:

  1. F12调出开发人员工具

  2. ESC键打开控制台

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

标签选择

设置选择

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

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

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

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

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

Chrome v51 Mac仿真媒体选择器出现在底部

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

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

Google Chrome打印背景颜色被忽略

Chrome v50:

方式1:

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

方式2:

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