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:
- With Google Chrome open, press F12 on your keyboard
- The DevTools console (debugger) will open
- Click on the menu at the top right
- Open ‘More Tools‘ -> ‘Rendering’
- Scroll down to the bottom, until ‘Emulate CSS media type’
- Change to ‘print’
- The web page currently loaded, and any other pages opened – will display how it will be printed
- 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 !
