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.
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.
