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

本文翻译自：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+中，默认情况下存在“仿真”选项卡。此外，控制台可从任何主要选项卡中获得。）

1. In DevTools, go to settings-> Overrides 在DevTools中，转到settings-> Overrides
2. enable "Show Emulation view in console drawer" 启用“在控制台抽屉中显示仿真视图”
3. Close settings, go to 'Elements' tab 关闭设置，转到“元素”选项卡
4. Hit Esc to bring up console 点击Esc调出控制台
5. Choose tab "Emulation", click "Screen" 选择“仿真”选项卡，然后单击“屏幕”
6. 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+起，您可以通过以下步骤访问打印预览：

1. Open dev tools – Ctrl/Cmd + Shift + I or right click on the page and choose 'Inspect'. 打开开发工具 - Ctrl / Cmd + Shift + I或右键单击页面并选择“检查”。

2. Hit Esc to open the additional drawer. 点击Esc打开附加抽屉。

3. If 'Rendering' isn't already being show, click the 3 dot kebab and choose 'rendering'. 如果尚未显示“渲染”，请单击3点烤肉串并选择“渲染”。

4. 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将向您显示页面的打印版本，您可以像浏览器版本一样检查元素和故障排除。