私はウェブサイトの開発に取り組んでおり、印刷ビューで作業する必要があります。通常、レイアウトの問題がある場合は、Chrome の要素インスペクタを使用します。ただし、これは印刷プレビュー モードには存在しません。
Chrome プラグイン、または Chrome 自体で表示媒体を変更して、ページをプリンターのように表示する他の方法はありますか? Chrome 固有のソリューションである必要はないと思いますが、これが私の主なブラウザなので、ブラウザ内ソリューションがあると便利です。
現在は印刷プレビュー メディアだけに焦点を当てていますが、サポートされているメディア タイプ (すべて/点字/エンボス/ハンドヘルド/印刷/投影/画面/音声/tty/テレビなど) のいずれかに変更できれば理想的です。
ベストアンサー1
注: この回答は Chrome のいくつかのバージョンをカバーしています。スクロールして、更新された変更が含まれたv52、v48、v46、v43、v42をそれぞれ確認してください。
Chrome v52以降:
- 開発者ツールを開きます（Windows：F12またはCtrl+ Shift+ I、Mac：Cmd+ Opt+ I）
- DevTools のカスタマイズと制御のハンバーガー メニュー ボタンをクリックし、その他のツール > レンダリング設定(新しいバージョンではレンダリング) を選択します。
- [レンダリング]タブの[印刷メディアのエミュレート]チェックボックスをオンにし、印刷メディアの種類を選択します。
Chrome v48+ (気づいてくださったAlexさん、ありがとうございます):
- 開発者ツール（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)。
