How to enable ‘print view’ in Google Chrome debugger

How well a website prints is often not considered by web developers – but it can still be an important part of the user experience – especially if you have long-form content which some users may want to print to read offline.

The debugger tool in Google Chrome allows you to view a website an “print view” – making it easier for developers to customise the layout used when pages are printed.

To open “print view” in Google Chrome:

  1. With Google Chrome open, press F12 on your keyboard
  2. The DevTools console (debugger) will open
  3. Click on the menu at the top right
  4. Open ‘More Tools -> ‘Rendering’
  5. Scroll down to the bottom, until ‘Emulate CSS media type’
  6. Change to ‘print’
  7. The web page currently loaded, and any other pages opened – will display how it will be printed
  8. If the page doesn’t change – or it includes content which is not suitable for print (e.g. the menu) – there’s work to do !

Related Articles

Leave a Reply

Your email address will not be published.