在列印預覽模式下使用Chrome的Element Inspector？ Chrome v52+: Chrome v52 +： Chrome v48+ (Thanks Alex for noticing): Chrome v48 +（感謝Alex注意到）： Chrome v46+: Chrome v46 +： Chrome v43+: Chrome v43 +： Chrome v42: Chrome v42：

本文翻譯自：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将向您顯示頁面的列印版本，您可以像浏覽器版本一樣檢查元素和故障排除。