Chromeでmedia printを確認・デバッグする方法

求人
Chromeでmedia printを確認・デバッグする方法

Chromeで印刷時の確認したい場合に、毎回印刷していると紙がもったいないですね。

私はとにかくエコなので、印刷時のmedia printを確認できないか調べてみたところ、どうやらChrome,FireFoxなら可能なようです。ただ、FireFox派じゃないのでChromeでの確認(デバッグ)方法をご紹介します。

まず、F12で開発者ツールを開きます。

右上にある三点リーダーをクリックして「More tools」-「Rendering」を選択します。

Chromeでmedia printを確認・デバッグする方法

Chromeでmedia printを確認・デバッグする方法

Renderingタブが開くので、一番下にスクロールします。

すると、「Emulate CSS media」があるので「print」選択します。

Chromeでmedia printを確認・デバッグする方法

Chromeでmedia printを確認・デバッグする方法

これでブラウザがプリントアウトされる時と同じ状態になります。開発者ツールを閉じるとEmulateは解除されます。

現状、IEでこのような機能は見つけることができませんでした。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA