Viewing Your Website in Print Mode when Creating Print Stylesheets

Don't want to hit print, then save as PDF, then open the PDF viewer ... again and again and again?

Firefox

I'm a bit of a Firefox junkie, so let's go with that first. It's quite simple really:

  1. Open Firefox Developer Tools
  2. Click on the Print Icon (see image above)

That's it. Your site will now be rendered as it will look when printed.

Chrome

Chrome is quite easy as well, but not as easy as firefox.

  1. Open Chrome Developer Tools
  2. Click on the dev tools hamburger menu
  3. Select "More tools"
  4. Choose "Rendering"
  5. Scroll down the list to "Emulate CSS Media"
  6. Choose 'Print"

Safari

Anyone still using Safari?

Filed Under:

  1. CSS
  2. Frontend Development
  3. Firefox