Designing the Print Preview - Chrome Dev Tools

Designing the Print Preview - Chrome Dev Tools

Have you ever wondered, how would your webpage look when printed? 🤔 And you don't have a printer? or you don't want to waste a ton of papers for development?

Chrome dev tools got you covered!

Following are the steps to check your print preview in Chrome,

Step 1: Open developer Tools - Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)

Step 2: Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu.

Screen Shot 2021-01-02 at 7.25.39 PM.png

Step 3: Type rendering, select Show Rendering, and then press Enter.

Step 4: rendering window will be available now. Under Emulate CSS media select print.

Screen Shot 2021-01-02 at 7.29.27 PM.png

Normal View

Screen Shot 2021-01-02 at 7.31.19 PM.png

Screen Shot 2021-01-02 at 7.31.50 PM.png

Let's consider, as per requirement, we don't need to show the social icons at the bottom while printing the page. For changing a particular CSS attribute while printing, we need to get the 'CSS Selector' of the elements that need to change. In our scenario, all the social icons have a class of .social. Adding the below media query to our styles will hide the social icons only during print.

@media print {
    .social {
        display: none;
    }
}

And voila,

Screen Shot 2021-01-02 at 7.41.44 PM.png

Hope you find this useful. Let me know if it could be improved in the comments and feel free to follow on Twitter - radnerus93