Open In App

9 Features of Chrome Developer Tools That You Must Know

Last Updated : 29 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

We all know the popularity of the Chrome browser. This browser has made life easier for developers and being a developer using its built-in developer tool is nothing new for you. The chrome developer tool has made debugging a lot easier. The built-in developer tool allows you to edit the page, debug it and also give them access to work on the internal web browser and application. 

9-Features-of-Chrome-Developer-Tools-That-You-Must-Know

This one boosts the productivity of the developers, and also it makes the easy diagnosis of the website. In this article, we are going to discuss the different features of Chrome DevTools. We will discuss, what are the purpose of different tabs and how it works. 

Accessing the developer tool is very easy. You can press Ctrl+Shift+C, or you can right-click on an element on the website and select Inspect from here. You will see a lot of panels or tabs in devTool. These tabs give you a lot of functionalities. Let’s discuss the features of DevTools one by one.

1. Easy Access on Desktop or Mobile

The second tab in the left corner is used to check your application view on mobile or desktop. It allows you to check how your application will look on different devices or different screen sizes. By default, you will see the desktop mode for your application. It is mainly used to check the responsiveness of your website. You will find different screen resolution options to check the responsiveness of your website.

2. Element Tab

This tab is mainly used to debug the code of HTML and CSS in your website. Whenever you need to change something in the styling of your HTML and CSS and you want to see how it will reflect in your website, you can do that with the help of this tab. Elements tab allows you to interact with the DOM, change it and view it. 

This section is mainly divided into two parts. The left panel displays the HTML elements. How the elements are embedded in the DOM tree. You can modify the changes in your CSS or HTML file once you see the changes in real-time using this tab. You can check which tag is doing what on your web page and their position on your screen. This tab helps you in taking a closer look at DOM structure and identifying the HTML elements rendered in it.

3. Console

This tab helps you in debugging the JavaScript code. You can view the logged message and run the JavaScript code here. This tab helps you in showing the error along with the line number in your source code. This property is really helpful in debugging the source code. 

Also, you can monitor the events, set the breakpoints, style output, count statements, or measure the execution or loading time as well. This tool will be used very often. 

4. Network

This tab is mainly used to detect the upload or download request made by a webpage. You can log all network activity in the Network log. You can open the network panel and then reload the webpage. In the Network log, you will see the resources are represented chronologically in each row. 

  • Status: HTTP response code.
  • Type: The resource type.
  • Initiator: What caused a resource to be requested.
  • Time: Time which is taken by the request. 
  • Waterfall: Different stages of request are represented graphically. 

You also have the option to check the layout of the page and how it behaves when some resources are not loaded in. 

5. Performance

As the name suggests, this tab is used to optimize the loading speed of your website. You can analyze the runtime performance of the web page. Capture setting allows you to capture the performance metrics settings. 

You can find the throttling dropdown list in the Network and CPU list. For CPU, you can select 2X slowdown. Your Devtools throttles your CPU to make it two times slower than normal. This will help you in checking the website performance on mobile devices. You will also find the record and reload button in this tab. The record button starts profiling the website’s various events during this period. After clicking on Stop, you will find the results and timings of each event.  

6. Memory Track Down Memory Leaks

This tab displays the profile memory usage, the page uses with the Chrome task manager. You can track down all the issues that affect the page performance, for example, memory leaks and bloats. Websites that consume more memory give bad experiences.

This tab provides profiling mainly in three different ways…

  • Heap Snapshot: This is used to take the heap snapshot that displays the distribution of memory among JavaScript Objects and DOM nodes.
  • Record Allocation Time: You can track down the memory leaks in a website JS heap.
  • Record Allocation Profiles: Displays the memory allocation from the JavaScript functions. You’re also allowed to record the profile with actions.

7. Application: Inspect Resources

This tab helps you in managing the resources such as cookies, local storage, application cache, fonts, stylesheets, images, registered service workers, session storage, SQL databases, and indexed DB. You can perform some other tasks as well which are given below… 

  • The application tab helps you to inspect and trigger the web app’s manifest with the help of the Manifest pane.
  • You can use the Service worker’s pane to perform the service worker-related tasks such as unregistering, stopping, going offline, etc.
  • You can inspect the Service worker cache using the Cache Storage pane.
  • Using Clear Storage, you can inspect and clear all the storage, caches, and service workers.
  • Use Frames pane to organize resources using various filters.
  • On a Web SQL database, you can execute various statements.

8. Security

You will be using this tab for any kind of security concern. This tab is used to ensure that HTTPS is properly implemented on a page. You can also view the SSL certificate issued on the web page. The authenticity of the page gets certified with the help of this tab. 

9. Audits or Lighthouse

This tab identifies the issues that affect the website’s page load performance, accessibility, and user experience. You can resolve these issues with the help of this tab. Lighthouse which is an open-source, automated tool is used to improve the quality of the web page. Using this tab, you mainly check standards for Progressive Web App, performance, best practices accessibility concerns. 

Conclusion

From all the above tabs explanation, you might have understood the importance of all the tabs. These tabs are really useful in debugging your application and resolving the issues in it. Each tab serves its own purpose and once you will start building your application, you will get to know more features included in that. 



Similar Reads

Top 5 Features of Java 17 That You Must Know
Change is the only constant thing and according to Darwin's Theory of Survival of the fittest, the individual who adapts to the evolving world will sustain itself in the long run. Looks like this theory is true for Java also, as it is continuously evolving and serving for more than two decades. From JDK 1.0 to Java 17 (LTS) it has come a long way.
6 min read
Top 10 Deep Learning Tools You Must Know [2024]
Have you ever wondered,  How do large conglomerates and businesses make decisions?   Do they make predictions for future investments? Do they take intuition-based decisions? Well, Large organizations invest heavily in technology to make their investments and make better decisions. And, one such technology is Deep Learning. Deep Learning is a subfie
9 min read
Top 5 Skills You Must Know Before You Learn ReactJS
Do you know enough javascript before jumping into React??Do you know how to use the map() method to loop through an array in javascript or ReactJS?? If you are learning React and you get stuck on these kinds of above questions then definitely you are making mistakes in your learning process. There is no doubt that ReactJS is the most popular librar
8 min read
Top Android Developer Skills You Must Know in 2024
As technology continues evolving to the advanced pick at a rapid pace, the role of an Android developer remains significant in shaping today's digital landscape and bringing more innovations in mobile application development. In the year 2024 also the expectations for Android developers have grown, which require diverse technical and non-technical
8 min read
Top 10 Python Developer Skills That You Must Know in 2024
The tech industry is a whirlwind of innovation, and Python stands tall as one of the most in-demand programming languages fueling this progress. According to a recent Stack Overflow survey, Python reigns supreme as the most preferred language among developers. This translates to a goldmine of opportunity for those seeking high-paying careers in Pyt
7 min read
Top 7 Web Development Myths That You Must Know
In this ever-evolving technological world - e-commerce, websites, networking, and online apps have made a strong effect. Considering all these services under one head, we call it Web development. Apart from creating a dynamic website, it has other features too. For example, web engineering, network configurations, content management, etc. Different
6 min read
I Can’t Do Computer Programming – 7 Common Myths You Must Know
If we ask to imagine a picture of a programmer then what would be your answer? Close your eyes for 30 seconds and think about it...What's your answer? You might have pictured a boring person sitting alone with a computer and writing some complex mathematical stuff in English (syntax which you are unable to understand...).You might have pictured a g
8 min read
Top 7 Database You Must Know For Software Development Projects
A database is just like a room in an office where all the files and important information can be stored related to a project. Every company needs a database to store and organize the information. The information that we store can be very sensitive so we always have to be careful while accessing or manipulating the information in the database. Choos
6 min read
5 Online Education Etiquette That You Must Know in 2020
Desperate situations require desperate solutions. This pandemic has forced us to transfer our education system online while maintaining a social distancing formula which is the only cure for this virus. Online learning and teaching have their pros and cons. While efforts are made to make the online experience as smooth as possible, certain things a
5 min read
7 Best Career Options After BCA You Must Know
Bachelor of Computer Applications (BCA) is undoubtedly one of the most popular and preferred tech graduation programs alongside Bachelor of Technology (B.Tech) in our country. As the name suggests, this 3-year undergraduate program allows individuals to explore the world of computers & their applications and subsequently makes them eligible for
6 min read
Article Tags :