ページのコーディングの際に印刷に対応したいことがありまして、あまりやらないことなのでデバッグ方法を忘れそうなのでメモしておきます。
print用cssをheadに追加
今回は一部のページのみ印刷時に表示を変えたかったので、印刷用のcssを用意しました。
<link rel="stylesheet" href="print.css" media="print">
各種ブラウザのデバッグ方法
Chrome
デベロッパーツールの右上の縦3点リーダ > More Tools > Rendering「Emulate CSS media type」のセレクトボックスを「No Emulation」から「Print」に変更。
FireFox
アドオン「Web Developer」からCSS > Display Print Stylesをチェック。
Edge
デベロッパーツールの横3点リーダ > その他のツール > レンダリング「CSSメディアの種類をエミュレートする」のセレクトボックスを「エミュレーションなし」から「印刷」に変更。
（Chromeを日本語にしただけで全く同じという…）
IE11について
印刷プレビューができないので、背景色を表示させることができないので省きます。
（背景色を表示させる方法があるかもですが、サポートも来年までですし）
出会ったバグ・表示設定について
imgタグの画像が表示されない
imgタグにdisplay:block;（もしくはinline-block）をかけると画像が表示されました。
（自分が触っているサイト固有の問題のような気もしますがどうなんだろう）
「印刷プレビュー」したら背景色が表示されない
[ctrl + P]で印刷プレビューした際、背景色が表示されてない場合は、Chrome・FireFox・Edgeであれば印刷プレビューのオプションで背景を表示させるかどうかのチェックボックスがあったので、それをチェックすれば表示されました。