私はウェブサイトの開発に取り組んでおり、印刷ビューで作業する必要があります。通常、レイアウトに問題がある場合は、ChromeのElement Inspectorを使用します。ただし、これは印刷プレビューモードでは存在しません。

プリンターのようにページを表示するために、ChromeプラグインまたはChrome内の表示メディアを変更する他の方法はありますか？Chrome固有のソリューションはないと思いますが、それが私の主要なブラウザーであるため、ブラウザー内のソリューションがあればよいでしょう。

現在、私は印刷プレビューメディアだけに焦点を当てていますが、サポートされているメディアタイプ（つまり、すべて/点字/エンボス/ハンドヘルド/印刷/投影/画面/音声/ tty /）に変更できることが理想的です。テレビ）。

注：この回答はChromeのいくつかのバージョンをカバーしています。スクロールしてv52、v48、v46、v43、およびv42を確認し、それぞれの変更が更新されていることを確認してください。

Chrome v52以降：

• 開発者ツールを開きます（Windows：F12またはCtrl+ Shift+ I、Mac：Cmd+ Opt+I）
• [ DevToolsハンバーガーのカスタマイズと制御 ]メニューボタンをクリックし、[ その他のツール]> [レンダリング設定]（または新しいバージョンのレンダリング）を選択します。
• [ レンダリング ]タブの[ 印刷メディアをエミュレートする ] チェックボックスをオンにし、印刷メディアタイプを選択します。

Chrome v48 +（アレックスにご連絡いただきありがとうございます）：

• 開発者ツールを開く（CTRLSHIFTIまたはF12）
• 左上隅にある[ デバイスモードの切り替え ]ボタン（CTRLSHIFTM）をクリックします。
• （1）のメニューにある[ コンソールの表示 ]をクリックして、コンソールが表示されていることを確認します（ESC開発者ツールバーにフォーカスがある場合は、キーでコンソールを切り替えます）。
• チェックエミュレート印刷メディアを選択することで開くことができ、レンダリング]タブでレンダリングを（2）のメニューに。

Chrome v46以降：

• 開発者ツールを開く（CTRLSHIFTIまたはF12）
• 左上隅にある[ デバイスモードの切り替え ]ボタンをクリックします（1）。
• メニューボタン（2）> コンソールを表示（3）をクリックするか、ESCキーを押してコンソールを切り替えることにより、コンソールが表示されていることを確認します（開発者ツールバーにフォーカスがある場合にのみ機能します）。
• エミュレーション（4）>メディア（5）タブを開き、CSSメディアをチェックして、印刷（3）を選択します。

Chrome v43以降：

• 手順2の引き出しアイコンが変更されました。

Chrome v42：

• 開発者ツールを開く（CTRLSHIFTIまたはF12）
• 左上隅にある[ デバイスモードの切り替え ]ボタンをクリックします（1）。
• 引き出しを表示するには、[ 引き出しを表示]ボタン（2）をクリックするか、ESCキーを押して引き出しを切り替えます。
• 下のエミュレーション>メディアチェックCSSメディアを選択し、印刷（3）。

Chrome 32で変更35+

（Chrome 35以降では、「エミュレーション」タブがデフォルトで表示されます。また、コンソールは任意のプライマリタブから利用できます。）

1. DevToolsで、[設定]-> [上書き]に移動します
2. 「コンソールドロワーにエミュレーションビューを表示する」を有効にします
3. 設定を閉じて、「要素」タブに移動します
4. ヒットEscしてコンソールを表示します
5. 「エミュレーション」タブを選択し、「画面」をクリックします
6. [CSSメディア]までスクロールし、[印刷]を選択します

このオプションは（まだ？）コンソールタブでは使用できません。

Chrome 32以降、引き出しのセクションにCSS mediaオプションがありますScreenEmulationます。

有効にしprintて、ターゲットメディアタイプとして選択します。-見よ-ページは、[ほぼ]印刷される方法でレンダリングされます。

Esc引き出しが見えない場合は、引き出しを開くために使用します。

Chrome 48（およびおそらく以前のいくつかのバージョン）の時点で、関数は再び移動したようです。

最初のいくつかのステップは変更されていません。

1. 押すF12と開発者ツールが表示されます

2. 押しESCてコンソールを開きます

以前の回答によると、設定は「エミュレーション」タブの下にあります。以下の画像に示すように、「レンダリング」タブに移動しました。「レンダリング」タブは、「コンソール」タブの左側にある3つの点をクリックして表示できます。

こちらの記事をご覧ください

次に、「上書き」タブに移動します

Chrome 48以降では、次の手順で印刷プレビューにアクセスできます。

1. 開発ツールを開く– Ctrl/Cmd+ Shift+ Iまたはページを右クリックして[検査]を選択します。

2. ヒットEsc追加の引き出しを開きます。

3. 「レンダリング」がまだ表示されていない場合は、3つのドットのケバブをクリックして「レンダリング」を選択します。

4. [印刷メディアをエミュレートする]チェックボックスをオンにします。

そこからChromeにページの印刷バージョンが表示され、ブラウザバージョンと同じように要素を検査してトラブルシューティングを行うことができます。

Google ChromeでPrint As PDFを使用してCSSをデバッグしていて、CSS要素の背景色が表示されない場合は、[背景のグラフィック]チェックボックスがオンになっていることを確認してください。CSSのデバッグに30分近く費やし、CSSの背景が無視されている原因は何だろうと思いました。

MacのChrome v51で、右上隅をクリックし、[その他のツール]> [レンダリング設定]を選択して、ウィンドウの下部にあるオプションの[メディアのエミュレート]ボタンをチェックすると、レンダリング設定が見つかりました。

これに私を導いた他のすべてのポスターに感謝します、そして画像なしで答えを提供したポスターに感謝します。

Chrome v67（Mac）：

1. 押しCmd+opt+j続けると開発ツールが開きます
2. ...右側のをクリックして、次の項目を選択します。その他のツール>>レンダリング
3. 画面の下部に[レンダリング]ウィンドウが表示されたら、[CSSメディアをエミュレート]セクションで、ドロップダウンから[画面]を選択します。
4. 「ファイル>>印刷」に移動すると、印刷したいビューが表示されます。

Mac上のChrome v67に関する上記の説明の画像：

[レンダリング]タブの場所：...右側のをクリックして、次の項目を選択します：その他のツール>>レンダリング

「画面」ビューを印刷する方法：レンダリングウィンドウが画面の下部に表示されたら、[CSSメディアをエミュレート]セクションを選択し、ドロップダウンから[画面]を選択します。

それが役に立てば幸い。

利用可能なショートカットを使用すると、最も簡単な方法は

1. 開発者ツールを開く

   • Windows：F12またはCtrl+ Shift+I
   • Mac：Cmd+ Opt+I

2. コマンドメニューを開く

   • Windows：Ctrl+ Shift+P
   • Mac：Cmd+ Shift+P

3. コンテキストメニューから「CSS印刷メディアタイプをエミュレート」を入力printして選択します

   

lmeurs による優れた現在最も支持されている回答を見ると、このソリューションも長期にわたって安定している可能性があると思います。

Chrome v50：

方法1：

1. メニュー>その他のツール>レンダリング設定 （画像を参照）
2. 下：[レンダリング]タブ>メディアの「印刷」をエミュレート

方法2：

1. コンソールを開く[esc]
2. コンソールメニュー>レンダリング