A Little Note on Chrome Dev Tools

Chrome DevTools is a set of some powerful web developer tools by Google Developers integrated into the Google Chrome browser. You can diagnose, analyze, even solve the issues with your web pages easily and quickly. Using DevTools, someone with basic knowledge of HTML or CSS or JavaScript can view and change any webpage easily. Let’s dive into the features of DevTools.

Discover DevTools

You can open Chrome DevTools by clicking ⋮ > More Tools > Developer Tools.

There are so many tabs for us to analyze.

• Device
• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Audits

Here we go… Let’s start with some basics.

Device Mode

DevTools lets you change the viewport width and height so that you can make sure your website is fully responsive. You can enable the device mode by clicking on this icon

at the upper left corner of the DevTools window.

Now you are able to resize the viewport as you want to do. Here is how it look like:

In this screenshot, I’m browsing Google Homepage as in a Pixel 2 XL device. There are some built-in viewport dimensions. You can select one of the devices from the dropdown list given in the window. Change it to Responsive so that you can change viewport size to any length you want. Options to control Zoom, Throttling, and Device Orientation is also given in the panel.

Element Panel

You can view and manipulate the DOM and CSS of any elements in your web page from Elements Tab.

Here are some links to Google Developers Web Documentations to use Elements Tab:

• Get Started With Viewing And Changing CSS
• Inspect and Tweak Your Pages
• Edit Styles
• Edit the DOM
• Inspect Animations

Console Panel

Log diagnostic information during development or interact with the JavaScript on the page.

Yup, you can also execute JavaScript on the Console tab.

Learn More:

• Get Started With The Console
• Using the Console
• Interact from Command Line
• Console API Reference

Sources Panel

Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor.

Learn more:

• Get Started With Debugging JavaScript
• Pause Your Code With Breakpoints
• Set Up Persistence with DevTools Workspaces
• Run Snippets Of Code From Any Page
• JavaScript Debugging Reference

Network Panel

Optimize page load performance and debug request issues.

Learn more:

• Get Started
• Network Issues Guide
• Network Panel Reference

Performance Panel

Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site.

Learn more:

• Get Started With Analyzing Runtime Performance
• Performance Analysis Reference
• Analyze runtime performance
• Diagnose Forced Synchronous Layouts

Memory Panel

Profile memory usage and track down leaks.

Learn more:

• Fix Memory Problems
• JavaScript CPU Profiler

Application Panel

Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.

Learn more:

• Debug Progressive Web Apps
• Inspect and Manage Storage, Databases, and Caches
• Inspect and Delete Cookies
• Inspect Resources

Security Panel

Debug mixed content issues, certificate problems, and more.

Learn more:

• Understand Security Issues

Audits Panel

Run audits of your websites in five different categories:

• Performance
• Progressive Web App
• Developer Best Practices
• Accessibility
• SEO

Let’s thank the Lighthouse and Chrome UX team for giving a beautiful report for us.

Check it out.

This is a short introduction to Chrome Developer Tools. There are the lot of things you can do with DevTools. It is really a powerful and efficient tool for every web developer.

Thanks :)