印刷プレビューモードでChromeのElement Inspectorを使用する
私はウェブサイトの開発に取り組んでおり、印刷ビューで作業する必要があります。通常、レイアウトの問題があるときは、ChromeのElement Inspectorを使います。ただし、これは印刷プレビューモードにはありません。
Chromeプラグインなど、プリンタ自体のようにページを表示するために、クロム自体の中に表示媒体を変更する方法はありますか。私はそれがChrome固有のソリューションではないと思いますが、それが私の主なブラウザなので、ブラウザ内ソリューションを持つのがいいでしょう。
今は印刷プレビューメディアだけに焦点を当てていますが、サポートされているメディアタイプ（all/braille/embossed/handheld/print/projection/screen/speech/tty /など）に変更できるのが理想的です。テレビ）。
注：この回答は、Chromeのいくつかのバージョンを対象としています。スクロールしてv52、v48、v46、v43およびv42それぞれに更新された変更が含まれます。
Chrome v52 +：
- 開発ツール（Windows： F12 または Ctrl+Shift+I、 マック： Cmd+Opt+I）
- DevToolsのカスタマイズと制御ハンバーガーメニューボタンをクリックし、その他のツール>レンダリング設定（または新しいバージョンではレンダリング）を選択します。
- レンダリングタブの印刷メディアのエミュレートチェックボックスをオンにし、印刷メディアタイプを選択します。
Chrome v48 +（注意してくれてありがとうAlex）：
- 開発者ツールを開きます（CTRLSHIFTI または F12）
- 左上の[デバイスモードの切り替え]ボタンをクリックします（CTRLSHIFTM）。
- （1）のメニューでShow consoleをクリックして、コンソールが表示されていることを確認します（ESC 開発者ツールバーにフォーカスがある場合、キーはコンソールを切り替えます）。
- （2）のメニューでRenderingを選択して開くことができるレンダリングタブで印刷メディアのエミュレートをチェックします。
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以降では、「エミュレーション」タブがデフォルトで表示されています。また、このコンソールはどの主要タブからでも利用できます。）
DevToolsで、settings-> Overridesに進みます。[コンソールドロワーにエミュレーションビューを表示]を有効にします。設定を閉じて、[要素]タブに移動します- ヒット Esc コンソールを起動する
- タブ "エミュレーション"を選択し、 "画面"をクリック
- 「CSSメディア」までスクロールし、「印刷」を選択します
このオプションは（まだ）コンソールタブでは利用できません。
Chrome 32以降、引き出しのScreenタブのEmulationセクションにCSS mediaオプションがあります。
有効にして、ターゲットのメディアタイプとしてprintを選択してください。そうすれば、あなたのページは印刷されるのとほぼ同じようにレンダリングされます。
つかいます Esc 見えない場合は引き出しを開く。
Chrome 48（およびおそらくそれ以前のいくつかのバージョン）の時点で、この機能はまだまた動いているようです：
最初のいくつかの手順は変わりません。
押す F12 開発者ツールを起動する
押す ESC コンソールを開く
以前の回答によると、設定は「エミュレーション」タブの下にあります。下の図に示すように、[コンソール]タブの左側にある3つの点をクリックすると表示できる[レンダリング]タブに移動しました。
Chrome 48以降、次の手順で印刷プレビューにアクセスできます。
オープン開発ツール - Ctrl/Cmd + Shift + I またはページを右クリックして[検査]を選択します。
ヒット Esc 追加の引き出しを開く。
「レンダリング」がまだ表示されていない場合は、3ドットのケバブをクリックして「レンダリング」を選択します。
[印刷メディアのエミュレート]チェックボックスをオンにします。
そこからChromeはあなたのページの印刷版を見せ、あなたはブラウザ版と同じように要素を調べてトラブルシューティングすることができます。
Google ChromeでPrint As PDFを使用してCSSをデバッグしていて、CSS要素の背景色が表示されていない場合は、[Background graphics]チェックボックスをオンにします。私はCSSをデバッグするのに30分近く費やし、CSSの背景が無視されている原因を疑問に思いました。
Mac上のChrome v51では、右上隅をクリックして[その他のツール]> [レンダリング設定]を選択し、ウィンドウ下部のオプションで[メディアのエミュレート]ボタンをクリックしてレンダリング設定を確認しました。
私をこれに導いた他のすべてのポスターに感謝し、そして画像なしで答えを提供したものに敬意を表します。
Chrome v67（Mac）：
- 長押し Cmd+opt+j 開発ツールを開く
- 右側の
...をクリックして、その他のツール>>レンダリングを選択してください。 - [レンダリング]ウィンドウが画面の下部に表示されたら、[CSSメディア]セクションをエミュレートして、ドロップダウンから[画面]を選択します。
- [ファイル] >> [印刷]をクリックすると、印刷したいビューが表示されます。
Mac上のChrome v67についての上記の説明の画像：
[レンダリング]タブの場所：右側にある...をクリックして、[その他のツール] >> [レンダリング]を選択します。
「スクリーン」ビューを印刷する方法：レンダリングウィンドウがスクリーンの一番下に表示されたら、「CSSメディア」セクションをエミュレートし、ドロップダウンから「スクリーン」を選択します。
それが役に立てば幸い。
利用可能なショートカットで、最も速い方法は
開発者ツールを開きます
- Windows： F12 または Ctrl+Shift+I
- マック： Cmd+Opt+I
- Windows： Ctrl+Shift+P
- マック： Cmd+Shift+P
printと入力して、コンテキストメニューからCSS印刷メディアタイプをエミュレートを選択します。![Change Media Type Emulation Via Command Menu]()
優れた、そして現在最も支持されている lmeursによる答え を見て、私はこの解決策も時間が経っても安定しているかもしれないと思います。
Chrome v50：
方法1：
- メニュー>その他のツール>レンダリング設定 （画像を参照）
- 下：レンダリングタブ>メディアの印刷をエミュレートする
方法2：
- コンソールを開く[esc]
- コンソールメニュー>レンダリング