Easily debug print view with emulate css media as print option in chrome dev tools

Whoever worked on creating a print view, should have faced lot of issues in aligning the content to perfection

Most of the times we used to check with print preview with a trail and error basis.

Have different text styling for screen and print

We can leverage the entire dev tools features for debugging the print view too.

Steps

• Open the Developer Tools (Windows: F12 or Ctrl+Shift+I, Mac: Cmd+Opt+I)
• Click the options menu button and choose More tools > Rendering
• Set Emulate CSS media type as print

Print media is emulated so print view can debugged with dev tools

media print has been selected to due to emulation