CSS: Mac 環境で CSS プリントのデバッグを行う方法

Web サイトやアプリ開発において、プリンタ出力時のスタイルを定義する必要がある要件もあるかと思います。
Mac の場合、デフォルトブラウザが Safari ですが、残念ながら Safari の Web インスペクタにプリントデバッグの機能はありません。
したがって、今回は Mac 版 Chrome を使用し、プリントのスタイルを確認する方法を説明したいと思います。

目次

• CSS プリントのデバッグを行う方法
• まとめ

CSS プリントのデバッグを行う方法

Chrome が未インストールの方は Chrome 公式サイトから ダウンロード します。

1. Chrome のメインメニューより 表示 -> 開発/管理 -> デベロッパーツール を起動します。
   
2. デベロッパーツールの下部ペインの Rendering タブ の下の方にある Emulate CSS media より print を選択すれば 印刷用CSS での出力が確認できます。
   

まとめ

Safari は Mac や iOS デバイスのデバッグに適した Web インスペクタ が用意されていますが、Web 開発のデバッグ時には Chrome のように軽快に動作しない場面も少なからずあります。

iOS アプリ開発時の Safari の Web インスペクタによるデバッグはとても使いやすいので、次期 macOS で改善されればいいのですが。。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。