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.
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.
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
You can access the Chrome dev tool by right-click on your mouse and choose “Inspect” option.
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.
👉 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.