本文翻译自：Using Chrome's Element Inspector in Print Preview Mode?

I am working on developing a website and need to work on the print view. 我正在开发一个网站，需要处理打印视图。 Typically when I have layout issues I use Chrome's Element Inspector. 通常，当我遇到布局问题时，我会使用Chrome的Element Inspector。 However this does not exist in print preview mode. 但是，这在打印预览模式下不存在。

Is there a Chrome plugin or some other way to change your viewing medium within chrome itself, to view a page as a printer would? 是否有Chrome插件或其他方式来更改Chrome本身的查看媒体，以打印机的形式查看页面？ I suppose it doesn't have a be a Chrome specific solution, but that is my primary browser so it would be nice to have an in-browser solution. 我认为它没有特定于Chrome的解决方案，但这是我的主要浏览器，所以拥有一个浏览器内的解决方案会很不错。

Right now I'm focused just on the print preview medium, but it would be ideal to be able to change to any of the supported media types (ie all/braille/embossed/handheld/print/projection/screen/speech/tty/tv). 现在我只专注于打印预览媒体，但是能够更改为任何支持的媒体类型（即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /电视）。

#1楼

参考：https://stackoom.com/question/e22w/在打印预览模式下使用Chrome的Element-Inspector

#2楼

Please see This article 请参阅本文

Then goto the "overrides" tab 然后转到“覆盖”选项卡

#3楼

Changed in Chrome 32 35+ 已在Chrome 32 35+中更改

(In Chrome 35+ the "Emulation" tab is present by default. Also, the console is available from any primary tab.) （在Chrome 35+中，默认情况下存在“仿真”选项卡。此外，控制台可从任何主要选项卡中获得。）

In DevTools, go to settings-> Overrides 在DevTools中，转到settings-> Overrides
enable "Show Emulation view in console drawer" 启用“在控制台抽屉中显示仿真视图”
Close settings, go to 'Elements' tab 关闭设置，转到“元素”选项卡
Hit Esc to bring up console 点击Esc调出控制台
Choose tab "Emulation", click "Screen" 选择“仿真”选项卡，然后单击“屏幕”
Scroll down to "CSS Media", select "print" 向下滚动到“CSS Media”，选择“print”

This option is not (yet?) available in the console tab. 此选项在控制台选项卡中不可用（尚？）。

#4楼

Note: This answer covers several versions of Chrome, scroll to see v52 , v48 , v46 , v43 and v42 each with their updated changes. 注意：这个答案涉及铬的几个版本中，滚动查看V52，V48，V46，V43和V42每一个与他们的更新变化。

Chrome v52+: Chrome v52 +：

Open the Developer Tools (Windows: F12 or Ctrl + Shift + I , Mac: Cmd + Opt + I ) 打开开发人员工具 （Windows： F12或Ctrl + Shift + I ，Mac： Cmd + Opt + I ）
Click the Customize and control DevTools hamburger menu button and choose More tools > Rendering settings (or Rendering in newer versions). 单击自定义并控制DevTools汉堡包菜单按钮，然后选择更多工具>渲染设置 （或在较新版本中渲染）。
Check the Emulate print media checkbox at the Rendering tab and select the Print media type. 选中“ 渲染”选项卡上的“ 模拟打印介质”复选框，然后选择“ 打印介质类型”。

Chrome v48+ (Thanks Alex for noticing): Chrome v48 +（感谢Alex注意到）：

Open the Developer Tools ( CTRL SHIFT I or F12 ) 打开开发人员工具（ CTRL SHIFT I或F12 ）
Click the Toggle device mode button in the left top corner ( CTRL SHIFT M ). 单击左上角的“ 切换设备模式”按钮（ CTRL SHIFT M ）。
Make sure the console is shown by clicking Show console in menu at (1) ( ESC key toggles the console if Developer Toolbar has focus). 通过单击（1）菜单中的显示控制台确保显示控制台 （如果开发人员工具栏具有焦点，则ESC键切换控制台）。
Check Emulate print media at the rendering tab which can be opened by selecting Rendering in menu at (2). 选中“渲染”选项卡上的“ 模拟打印介质 ”，可以通过选择（2）中的菜单中的“ 渲染”来打开该介质。

Chrome v46+: Chrome v46 +：

Open the Developer Tools ( CTRL SHIFT I or F12 ) 打开开发人员工具（ CTRL SHIFT I或F12 ）
Click the Toggle device mode button in the left top corner (1). 单击左上角的“ 切换设备模式”按钮（1）。
Make sure the console is shown by clicking the menu button (2) > Show console (3) or pressing the ESC key to toggle the console (only works when Developer Toolbar has the focus). 通过单击菜单按钮（2）> 显示控制台 （3）或按ESC键切换控制台（仅在开发人员工具栏具有焦点时有效），确保显示控制台 。
Open the Emulation (4) > Media (5) tabs, check CSS media and select print (3). 打开仿真（4）>媒体（5）选项卡，检查CSS媒体并选择打印（3）。

Chrome v43+: Chrome v43 +：

The drawer icon at step 2 has changed. 步骤2中的抽屉图标已更改。

Chrome v42: Chrome v42：

Open the Developer Tools ( CTRL SHIFT I or F12 ) 打开开发人员工具（ CTRL SHIFT I或F12 ）
Click the Toggle device mode button in the left top corner (1). 单击左上角的“ 切换设备模式”按钮（1）。
Make sure the drawer is shown by clicking the Show drawer button (2) or pressing the ESC key to toggle the drawer. 通过单击“ 显示”抽屉按钮（2）或按ESC键切换抽屉，确保显示抽屉。
Under Emulation > Media check CSS media and select print (3). 在Emulation> Media下检查CSS媒体并选择print （3）。

#5楼

If you are debugging your CSS using Print As PDF in Google Chrome and your CSS element background colors are not showing, then make sure the 'Background graphics' checkbox is ticked. 如果您使用Google Chrome中的“打印为PDF”调试CSS并且未显示CSS元素背景颜色，请确保勾选“背景图形”复选框。 I spent almost 30 minutes debugging my CSS and wondering what is causing my CSS background being ignored. 我花了差不多30分钟调试我的CSS，并想知道是什么导致我的CSS背景被忽略。

#6楼

As of Chrome 48+, you can access the print preview via the following steps: 自Chrome 48+起，您可以通过以下步骤访问打印预览：

Open dev tools – Ctrl/Cmd + Shift + I or right click on the page and choose 'Inspect'. 打开开发工具 - Ctrl / Cmd + Shift + I或右键单击页面并选择“检查”。
Hit Esc to open the additional drawer. 点击Esc打开附加抽屉。
If 'Rendering' isn't already being show, click the 3 dot kebab and choose 'rendering'. 如果尚未显示“渲染”，请单击3点烤肉串并选择“渲染”。
Check the 'Emulate print media' checkbox. 选中“模拟打印介质”复选框。

From there Chrome will show you a print version of your page and you can inspect element and troubleshoot like you would the browser version. 从那里Chrome将向您显示页面的打印版本，您可以像浏览器版本一样检查元素和故障排除。

在打印预览模式下使用Chrome的Element Inspector？相关推荐

chrome 打印布局_在打印预览模式下使用Chrome的Element Inspector？
慕容大雪花 Chrome v52 +:打开开发人员工具(Windows:F12或Ctrl+ Shift+ I,Mac:Cmd+ Opt+ I)单击自定义并控制DevTools汉堡包菜单按钮,然后选择更 ...
android关闭人脸检测功能,【Android知识】录像预览模式下打开人脸检测
开发的一款高通平台Android 9.0基于Camera2实现的预览界面通过侧键实现拍照,录像等功能的应用中,预览界面默认是采用的原生的VideoModule.java界面实现,测试发现设置中开启人脸 ...
TML 打印预览问题，怎么设置有些内容不出现在打印预览页面上。怎么控制，有下代码看得不是很懂求解释...
HTML <style> 标签的 media 属性 HTML <style> 标签实例针对两种不同媒介类型的两种不同的样式(计算机屏幕和打印): <html> ...
1.11 Illustrator视图的预览模式 [Illustrator CC教程]
原文:http://coolketang.com/staticDesign/5a977fad0b61607bf6c47b93.html 1. 本节课将为您演示系统的四种图像显示模式,用户可以在绘图的过 ...
word文档打印预览有阴影_在打印预览中编辑Microsoft Word 2007文档
word文档打印预览有阴影 When working on Word 2007 documents for the office wouldn't it be nice to edit them wh ...
.NET环境下有关打印页面设置、打印机设置、打印预览对话框的实现
原文:.NET环境下有关打印页面设置.打印机设置.打印预览对话框的实现我个人认为,开发MIS,首先就得解决网格的问题,而开发工具为我们提供了如DataGrid.MSHFlexGrid的控件.其次,是 ...
chrome html 打印预览,Chrome打印预览错误
我想打印一个html页面.html页面是由我开发的,这个页面可以用mozilla打印,即. 在Chrome中:当按下CTRL + P时会弹出预览窗口,但它会显示:"打印预览失败", ...
.NET环境下有关打印页面设置、打印机设置、打印预览对话框的实现与应用(1)
From: http://blog.csdn.net/flygoldfish/article/details/77208 .NET环境下有关打印页面设置.打印机设置.打印预览对话框的实现我个人认为, ...
.Net环境下有关打印页面设置、打印机设置、打印预览对话框的实现(开源)---转
作者:周方勇我个人认为,开发MIS,首先就得解决网格的问题,而开发工具为我们提供了如DataGrid.MSHFlexGrid的控件.其次,是打印的问题,将业务单据与数据报表打印出来.可想而知,即使一 ...

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

#1楼

#2楼

#3楼