印刷スタイルシートを開発およびテストするためのより速い方法（毎回の印刷プレビューを避ける）？

これは今私のプロセスです：

1. 変更をprint.cssに保存します
2. ブラウザを開いてページを更新します。
3. 右クリックして[印刷]> [印刷プレビュー]を選択します（Firefoxですが、実際にはすべてのブラウザ）。

バグがあるのはステップ3で、プラグインなどを使用してプロセスから切り離すことができるかどうか疑問に思っています。ページを印刷メディアとして表示することを選択し、更新して変更を確認します。

印刷スタイルシートをどのようにテストしますか？更新後、常に印刷プレビューをクリックしますか？

Chrome Media Type Emulationは、投稿で受け入れられているとおりに使用できます。ブラウザで「cssを印刷」を参照してください。

2017年11月21日更新

更新されたDevToolsドキュメントはここにあります：印刷モードでページを表示します。

印刷モードでページを表示するには：
1 . コマンドメニューを開きます。（tl; dr Cmd+Shift+P（Mac）またはCtrl+Shift+P（Windows、Linux））
2.入力Renderingを開始し、を選択しますShow Rendering。
3. [ CSSメディアのエミュレート ]ドロップダウンで、[ 印刷 ]を選択します。

2016年2月29日更新

DevToolsのドキュメントは移動し、上記のリンクは不正確な情報を提供しています。メディアタイプのエミュレーションに関する更新されたドキュメントは、次の場所にあります：より多くのメディアタイプのプレビュースタイル。

ブラウザービューポートの右上隅にある[ その他のオーバーライド]アイコンをクリックして、DevToolsエミュレーションドロワーを開きます。次に、エミュレーションドロワーで[ メディア]を選択します。

更新2016年4月12日

残念ながら、印刷エミュレーションに関してはドキュメントが更新されていないようです。ただし、印刷メディアエミュレータは（再び）移動しました。

1. Chrome DevToolsを開きます
2. ヒット escキーボードの
3. Clickをクリックします（縦の省略記号）を
4. レンダリングを選択
5. Tick Emulate印刷メディア

下のスクリーンショットを参照してください。

2016年6月28日更新

Chrome DevToolsに関するGoogle Developersドキュメントと「メディアのエミュレート」オプションがChrome> 51向けに更新されました。

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

印刷プレビューモードでページを表示するには、DevToolsのメインメニューを開き、[ その他のツール] > [ レンダリング設定]を選択し、ドロップダウンメニューを[ 印刷 ]に設定して[ メディアをエミュレート ]チェックボックスをオンにします。

更新24/05/2016

設定の名前が再び変更されました：

印刷プレビューモードでページを表示するには、DevToolsのメインメニューを開き、[ その他のツール] > [ レンダリング ]を選択し、ドロップダウンメニューを[ 印刷 ]に設定して[ CSSメディアのエミュレート ]チェックボックスをオンにします。

Firefoxでは、タイプShift+F2して開発者ツールバーのコマンドラインを開き、次にタイプすることができますmedia emulate print

この方法で他のメディアタイプをエミュレートすることもできます。

Firefox + Web Developerツールバー拡張には、さまざまなスタイルシートを有効/無効にする方法があります。

CSSメニューの下を見てください。個々のスタイルシートを無効または有効にするメニューと、「メディアタイプで表示」メニューもあります。

また、FirefoxでPrintPreviewにアクセスする手順を減らすために、ツールバーボタンを作成するPrintPreview拡張機能を試してください。

Chromeの場合、その拡張機能の移植版があります。Chromeバージョンでわかることから、「印刷スタイルを表示」を選択できます

印刷プレビューを含まないテスト方法は使用しません。相違点が多すぎます。背景画像は印刷ではまったく機能しませんが、通常の画面コンテキストで表示されるので、その中の主役です。

Chromeでは、control+pすぐに印刷プレビューに進みます。（メニューバーまでのマウス操作は忘れてください）。とても簡単です。

テスト中に、画面スタイルを無効にして、印刷スタイルシートのメディアタイプを「画面」に変更するだけです。これは、実際の印刷プレビュー（改ページ、ドキュメントの幅など）を使用する場合とまったく同じではありませんが、それでもかなり良いアイデアが得られます。

私にとってはFFを使用した単純な（@screen部品または同様のものが^1ない）：

• CSSコンテンツの最後にパーツを配置し@media print { ...ます
• ラッパー宣言のみをコメントアウトする/*@media print {*/ ... /*}*/
  • したがって、印刷物をスタイルに適用して、該当する場合はすぐに上書きします
• （LiveReloadを使用しているため、保存後すぐにブラウザーページが更新されます変更ます）
• （それ以外の場合、LiveReloadを使用しない場合:)を押しCTRL+Rてページを再読み込みします
• これで、印刷プレビューをまだ必要としない、多くの一般的な印刷CSS調整（フォントスタイル、フォントサイズ、間隔、色）をすでに実行できます。
• 押しALT+F+Vて印刷プレビューを開きALT+W、もう一度閉じます

¹：テスト済みのメディアによっては、それらがある場合、それらをアウト/インコメントすることは、大したことではないかもしれません

この他の投稿で説明されているように（印刷プレビューモードでChromeのElement Inspectorを使用しますか？）で chromeを使用して印刷スタイルシートを単純にエミュレートできます。インスペクタを使用して、印刷ダイアログが表示されたときに、スタイルを推測するのではなく、どこから来ているのかを確認できるので、これは素晴らしいことです。

ChromeのElement Inspectorの右下隅にある歯車のアイコンをクリックして、[Overrides Settings]ダイアログにアクセスします。次に、ターゲットメディアタイプとして印刷を選択します。

驚くばかり！

少なくともChromeの場合：開発中にbodyタグに追加します onload="window.print()"ます。これにより、更新した直後に印刷モードが開きます。

残念ながら、それは本質的に埋め込みPDFであるため、開発者ツールはあまり使用されていないようです。

ちなみに、ステップ2を削除する方法があります。人気のある方法の1つはLiveReloadです。

通常のスタイルシートを一時的に削除して、通常のリンクタグが付いた印刷物のみをロードしてみることができます。

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では、同じ場所に同じ印刷...メニューがあり、ctrl-pでアクセスできます。