更快速地開發和測試打印樣式表（每次都避免打印預覽）？

Question

這是我現在的過程：

1. 保存對print.css的更改
2. 打開瀏覽器並刷新頁面。
3. 右鍵單擊並選擇“打印”>“打印預覽”（Firefox，但確實是任何瀏覽器）

這是第3步讓我煩惱，我想知道是否有可能用插件或其他東西將其刪除。 只需選擇將頁面視為打印介質，然后只需刷新即可查看更改。

你如何測試你的打印樣式表？ 刷新后是否總是單擊打印預覽？

Answer 1

您可以使用帖子中接受的Chrome 媒體類型模擬 在瀏覽器中查看print css 。

更新21/11/2017

可以在此處找到更新的DevTools文檔： 以打印模式查看頁面 。

要以打印模式查看頁面：
1.打開命令菜單 。 （ tl; dr Cmd + Shift + P （Mac）或Ctrl + Shift + P （Windows，Linux））
2.開始鍵入Rendering並選擇Show Rendering 。
3.對於Emulate CSS Media下拉列表，選擇print 。

---

更新29/02/2016

DevTools文檔已移動，上述鏈接提供了不准確的信息。 有關媒體類型仿真的更新文檔可在此處找到： 預覽更多媒體類型的樣式 。

通過單擊瀏覽器視口右上角的“ 更多覆蓋•••更多覆蓋”圖標，打開DevTools仿真抽屜。 然后，在仿真抽屜中選擇“ 媒體 ”。

更新2016年4月12日

不幸的是，似乎文檔沒有在打印仿真方面進行更新。 但是，Print Media Emulator已經（再次）移動：

1. 打開Chrome DevTools
2. 點擊鍵盤上的esc
3. 點擊⋮ （垂直省略號）
4. 選擇渲染
5. 勾選模擬打印介質

見下面的截圖：

更新28/06/2016

適用於Chrome> 51的Google Developers圍繞Chrome DevTools和“Emulate Media”選項的文檔已經更新：

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

要在打印預覽模式下查看頁面，請打開DevTools主菜單，選擇“ 更多工具” >“ 渲染設置” ，然后啟用“ 模擬媒體”復選框，並將下拉菜單設置為“ 打印” 。

更新2016年5月24日

設置的命名再次改變：

要在打印預覽模式下查看頁面，請打開DevTools主菜單，選擇“ 更多工具” >“ 渲染” ，然后啟用“ 模擬CSS媒體”復選框，並將下拉菜單設置為“ 打印” 。

Answer 2

在Firefox中，您可以鍵入Shift+F2以打開開發人員工具欄命令行，然后鍵入media emulate print

您也可以通過這種方式模擬其他媒體類型。

Answer 3

Firefox + Web Developer工具欄擴展有一種啟用/禁用各種樣式表的方法。

在CSS菜單下查看。 有一個菜單可以禁用和啟用單個樣式表，也可以使用“按媒體類型顯示”菜單。

此外，要減少在Firefox中訪問PrintPreview的步驟，請嘗試PrintPreview擴展 ，這將創建一個工具欄按鈕。

對於Chrome，有一個該擴展程序的端口 。 根據我的Chrome版本，您可以選擇“顯示打印樣式”

Answer 4

我不會使用任何不涉及打印預覽的測試方法。 存在太多差異：背景圖像在打印時根本不起作用，但在正常的屏幕環境中顯示為主要的。

在Chrome中， control+p立即進入打印預覽。 （忘了留意你的菜單欄）。 這很簡單。

Answer 5

在測試時，您可以簡單地禁用屏幕樣式並將介質類型更改為“屏幕”以用於打印樣式表。 這與使用真正的打印預覽（分頁符，文檔寬度等）不完全相同，但它仍然為您提供了一個非常好的主意。

Answer 6

對我來說簡單 （沒有@screen部分或類似的¹ ） 與FF ：

• 將@media print { ...部分放在CSS內容的末尾
• out-comment僅包裝聲明/*@media print {*/ ... /*}*/
  • 因此，將印刷品應用於您的樣式，並在適用的情況下立即覆蓋它們
• （我正在使用LiveReload，因此我的瀏覽器頁面在保存更改后立即刷新 ）
• （ 否則 ，如果不使用LiveReload :)按CTRL+R重新加載頁面
• 現在你已經可以進行很多典型的打印CSS調整（字體樣式，字體大小，間距，顏色） ，其中一個不需要打印預覽
• 按ALT+F+V打開打印預覽，按ALT+W再次關閉它

¹ ：如果有人擁有它們，那么根據你的測試媒體來評論那些，否則可能不是什么大問題

Answer 7

如其他帖子（ 在打印預覽模式下使用Chrome的元素檢查器？ ）中所述，您可以使用chrome來簡單地模擬打印樣式表。 這很棒，因為您可以使用檢查器查看樣式的來源，而不是在您看到打印對話框出現時猜測。

單擊Chrome的Element Inspector右下角的齒輪圖標，訪問“覆蓋設置”對話框。 然后選擇print作為目標媒體類型。

真棒！

Answer 8

至少在Chrome中：在開發過程中，添加到body標簽onload="window.print()" 。 這將導致刷新后立即打開打印模式。

不幸的是，開發人員工具似乎並沒有多大用處，因為它本質上是一個嵌入式PDF。

順便提一下，有一些方法可以消除第2步。一個流行的是LiveReload。

Answer 9

在Chrome 62中，cmd-R / cmd-P在Mac上運行良好，可以預覽@media打印樣式頁面。

這可以通過瀏覽器窗口右上角的垂直省略號（不是開發者工具）/打印來訪問...

使用esc取消預覽窗口。

因此，對於我使用IntelliJ IDEA和Chrome的工作流程，它是：cmd-s，cmd-tab，cmd-r，cmd-p，esc，cmd-tab，我回到IDE中。

Windows 10中的Chrome 62在同一位置具有相同的Print ...菜單，可通過ctrl-p訪問：

Answer 10

您可以嘗試暫時刪除常規樣式表，並僅在帶有普通鏈接標記的打印樣式中加載。