Select Page


I know that this topic has been already talked about and thousand of liters of ink has been poured out, but today I am sharing this with you because for me as a beginner is so useful.

Hi 👋, I am Luc, a fresh front-end developer in his early 40’s.

Quick background.

I am not thrilled with long introductions, actually, I don’t like them at all. Nearly every time I have to read a tutorial I bumped in an a long introduction. Just for the sake of the introduction, I am telling you that the “long screenshot” in the dev tool has been there and I didn’t know about it.

The tool.

Chrome has many utilities. I used to struggle when I wanted to make a layout to present to the client. It was tedious work for me. But, my good ol’friend showed me one of his articles on Dev. to written in Spanish and I decided to share this with you. If you are a Spanish speaker you can find the article here.

How to do it

Option 1.

You can access the Chrome dev tool by right-click on your mouse and choose “Inspect” option.

Option 2

You can right click on the three dots on the upper right corner. After the drop menu is showing, you can choose from there the option to activate the dev- tool by pressing the … developer tools.

Once you:

👉 open the developer tool by right-click on your mouse;

👉 press the following keyboards: CMD + SHIFT + P (on MacBook), this will bring (4) four self-explanatory options that you can choose to use according to your need.

This is it!

Now, with this tool, we can take screenshots of our work for free.

I hope this article helped you. Until next week, happy coding.