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 !

Tagged in

2 comments on “How to enable ‘print view’ in Google Chrome debugger

  1. While handy, this is not print-preview. It applies the print stylesheet to the screen, but still does not show the margins of a page, or where a page-break occurs, or page headers/footers, and it will still show background images and colors. The screen is still the canvas, not a 8.5x11in or another size “page”

Leave a Comment

Your email address will not be published. Required fields are marked *