Print Styles? Inspect Element, duh!

Did you know you could emulate print styles using Inspect Element? No? Me either!

The other day I was working on a client site and we had to do some pretty specific print stylesheets. Now I haven’t done anything with a print.css file in years, but it turns out that sometimes it’s required.

So there I was. Code. Save. Print Preview. View. Make Notes. Code. Repeat.

Then, it hit me – a quick Google search let me know that I COULD use inspect element to show your site as if it were printed. A gift of a timesaver – I couldn’t believe it was that easy!

So, to do this – follow these steps:

For debugging print styles in Firefox open the Developer Toolbar and enter media emulate print in the input field at the bottom of the browser window and press enter. The active tab will act as if the media type was print until you close it or refresh the page.

In Chrome open DevTools and show the console drawer (Esc), open the rendering pane, check Emulate CSS Media and select Print.

Simple, eh?!