[解決済み] 印刷スタイルシートの開発およびテストをより迅速に行う方法（毎回印刷プレビューを行わない）？

質問

これが今の私のプロセスです。

1. print.cssに変更を保存する
2. ブラウザを開き、ページを更新します。
3. 右クリックし、印刷と印刷プレビューを選択します（Firefoxでも可能です）。

困るのは手順3なんですが、プラグインか何かでカットできないものでしょうか。印刷媒体としてページを表示することを選択するだけで、あとは更新するだけで変更を確認することができます。

印刷用スタイルシートのテストはどのように行っていますか？更新後に必ず印刷プレビューをクリックするのですか？

どのように解決するのですか？

を使用することができます。 クローム メディアタイプのエミュレーション 投稿で受け入れたように ブラウザで印刷するCSSを見る .

アップデート 2017/11/21

更新されたDevToolsのドキュメントは、こちらでご覧いただけます。 印刷モードでページを表示する .

印刷モードでページを表示する場合。

1. を開く コマンドメニュー . ( tl;dr Cmd+Shift+P (Mac)または Ctrl+Shift+P (Windows、Linux))

2. 入力開始 レンダリング を選択し Show Rendering .

3. については CSSメディアをエミュレートする を選択します。 プリント .

更新日 2016年02月29日

DevToolsのドキュメントが移動したため、上記のリンクは不正確な情報を提供しています。Media type emulationに関する更新されたdocsはこちらで確認できます。 より多くのメディアタイプに対応したプレビュースタイル .

をクリックして、DevToolsのエミュレーションドロワーを開きます。 その他のオーバーライド ブラウザーのビューポートの右上にある「more overrides」アイコンをクリックします。次に、以下を選択します。 メディア をクリックすると、エミュレーションのドロワーに表示されます。

更新日 2016年04月12日

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

1. Chrome DevToolsを開く
2. ヒット エスク キーボードの
3. クリック ⋮ (垂直省略記号)
4. 選択 レンダリング
5. ダニ 紙媒体を模倣する

以下のスクリーンショットをご覧ください。

更新日 2016年06月28日

Google Developers Docs の Chrome DevTools 周りと "Emulate Media" オプションが、Chrome >51 に向けてアップデートされました。

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

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

更新日 2016年05月24日

設定のネーミングが再び変更されました。

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