# 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1609595763299/7w4BtXIZY.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596030530/Elqddo2AJ.png)

### Normal View

![Screen Shot 2021-01-02 at 7.31.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596185248/LWrXQAwDe.png)

### Print View

![Screen Shot 2021-01-02 at 7.31.50 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596202444/rUiMSjHzw.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.


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

And voila,

![Screen Shot 2021-01-02 at 7.41.44 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609596727289/3_VNKZh-o.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](https://twitter.com/radnerus93)