How to Take Screenshots Using Developer Tools in Google Chrome
Reading Time: 3 minutesWhile taking screenshots is pretty standard for most, Chrome’s Developer Tools packs a screenshot tool with some extra features. Here’s how to use it.
Screenshots are a flexible tool for everyday tasks, from showcasing work to sharing information. You can take screenshots using keyboard commands, apps, and browser extensions, but have you ever tried to take screenshots directly through Google Chrome?
Here’s a scenario, you need a screenshot of an entire web page. Instead of taking multiple screenshots of the page, which can be tedious, why not do it in one go? Here is where Developer Tools come in.
This guide will explain how you can use Chrome’s Developer Tools to take a screenshot of your web pages easily.
What Is Google Chrome’s Developer Tools?
Chrome’s developer tools are powerful integrated debugging tools built into the Google Chrome browser. The tools allow developers to test, debug, and optimize web applications to make them faster and more reliable.
Some features include viewing and editing a web page’s code in real-time, viewing its network traffic, and analyzing its performance, including loading times and memory usage.
How to Take a Screenshot in Chrome Using Developer Tools
To take a screenshot of a web page using the developer tools in Google Chrome, follow the steps below:
First, open Google Chrome and then head to a website or a specific webpage. Then right-click anywhere on the page and click Inspect at the bottom of the dropdown menu to open the Developer Tools panel. Alternatively, you can use Ctrl + Shift + C.
Toggle the Device Toolbar by clicking the second icon in the top-left corner or Ctrl + Shift + M. You can see how the page looks on different devices, such as phones and tablets.
In the top-left, there is a dropdown menu called Dimensions. Clicking on it will reveal a menu with different devices. Clicking on an option will show you what the page looks like on that device. You can also see the page width and height and a zoom-in and out option.
Optionally, you can choose the device and orientation to take a screenshot using Device Mode. When you are happy with how everything looks, click on the three vertical dots in the dimensions bar and click either Capture screenshot or Capture full size screenshot.
Alternatively, you can use Ctrl + Shift + P to open the command menu and type the word screenshot in the text box. When you type the word out, you will notice four types of screenshot-capturing options appear in a dropdown menu:
- Capture area screenshot: takes a screenshot of an inspected element.
- Capture full size screenshot: takes a screenshot of the entire page.
- Capture node screenshot: drag a specified area of the page you want to capture.
- Capture screenshot: takes a screenshot of all visible content on the page.
The screenshot will automatically save into your Downloads folder as a PNG image file, as long as you don’t have any issues downloading files. From there, you can make any adjustments to the image.
A New Way to Take Screenshots in Google Chrome
Taking a screenshot using Google Chrome’s Developer Tools can help you get more done and save time. It also gives you a new way to take screenshots, whether you are a developer, designer, or regular user.
The next time you need to take a screenshot in a different orientation or on another device, using Developer Tools is a quick and efficient way that is always available. When we download files, they save to our default Downloads folder. But if you want to change the folder, you can easily do it in Google Chrome.
Reference: https://www.makeuseof.com/google-chrome-developer-tools-screenshots/
Ref: makeuseof
MediaDownloader.net -> Free Online Video Downloader, Download Any Video From YouTube, VK, Vimeo, Twitter, Twitch, Tumblr, Tiktok, Telegram, TED, Streamable, Soundcloud, Snapchat, Share, Rumble, Reddit, PuhuTV, Pinterest, Periscope, Ok.ru, MxTakatak, Mixcloud, Mashable, LinkedIn, Likee, Kwai, Izlesene, Instagram, Imgur, IMDB, Ifunny, Gaana, Flickr, Febspot, Facebook, ESPN, Douyin, Dailymotion, Buzzfeed, BluTV, Blogger, Bitchute, Bilibili, Bandcamp, Akıllı, 9GAG