All of us need to capture the screenshot of the browser one time or another and I have used many third party freemium extensions over time but nothing could be as good as something built in to the browser itself.

Chrome now includes a way to capture the screen shot through Dev Tools. To Open Dev Tools Press F12 or  Ctrl + Shift + I or from the hamburger menu in Chrome select More Tools –> Developer Tools

a picture showing how to open Developer Tools in Chrome form hambuger menu

Developer Tools

 

Click on device toggle to select device mode

 

a picture should where to toggle device mode in Chrome

Device Toggle

 

Select the Device to capture the screenshot

a picture showing where to select device in chrome device mode window

Device Select

 

Go to 3 dots menu on the right and select Capture Screenshot.

 

a picture showing where to find the Capture Screenshot option

Capture Screenshot

 

And volla. there you have your screenshot.

 

a picture of the screenshot capture in chrome with device selected as iPhone

Sreenshot iPhone

 

Note – If you not want the device border then you could disable it from the 3 dots menu in the right

 

a picture showing where to hide the device frame in chrome

Hide Device Frame

 

I know what you are thinking. What if I want the screenshot in a desktop / laptop browser size and not a device. There is a simple way to do that. In the Device selection menu select Responsive

 

a picture showing where to select Device as Responsive in Chrome device menu in dev tools

Responsive Device

 

Now drag to resize the area of the responsive device and then click on capture screenshot.

 

a picture showing the points to grab to resize responsive area in chrome device

Resize Device

 

Ans here is your screenshot.

 

a screenshot capture using chrome

Screnshot Responsive

 

Hope this helps you. Any feedback, questions and comments are welcome.