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.