Chrome Dev Tools: Detailed Guide
Chrome DevTools is a robust toolkit integrated into the Google Chrome browser. With its extensive range of features, one can seamlessly debug, test, and inspect web applications within the browser itself.
In this tech blog, I will discuss the various features and capabilities of Chrome DevTools.
1) Element
Chrome DevTools allows you to inspect the HTML and CSS of a web page. You can simply right-click on an element and select “Inspect” to open up the Elements tab or simply press CMD+Option+I (Mac ) / Ctrl+Shift+I(Windows)
You can also modify the code in real time and see the changes reflected on the page. This feature is particularly useful for web designers who want to experiment with different styles and layouts.
For testers, if you want to find the locator of a web element, you can do it from the Elements tab. Find the locator and search for it.
2) Console
The Console is one of the most important features of Chrome DevTools. This is the tab that allows you to log messages, run JavaScript code, and debug errors. You can also use it to test out small code snippets and evaluate expressions. ( Below is a sample JS print message)
You can also check if there is a script failure on the page. You can access this page from Chrome Dev Tools either by selecting the tab or using the Keyboard shortcut Cmd+Option+J (Mac) / Ctl+Shift+J (Windows).
You can perform some calculations as well(Example: sum of 2 numbers). Instead of opening the calculator, you can do that directly in the console.
This tab is also used to verify the data layers ( It is a JavaScript object that contains information about user interactions and website events. It is commonly used in website analytics and marketing tracking.)
You can track the events triggered on the page using datalayer.
3) Network Panel
This is one of the most used tab in Chrome Dev Tools. It displays all the requests made by the browser to load a web page. This includes a list of all the resources that are loaded when you access a web page, including HTML, CSS, JavaScript files, images, and other media. Each resource is displayed with its URL, type, status code, and size.
Using Network Tab, you can perform below functions:
a. Filtering: You can filter the resources by service name, custom text string, etc.
In the below example, you can see there are multiple APIs called on the webpage and in the second screenshot, I am trying to filter the “collector” API.
This tab is very useful when you want to check any API details ( Request/Response) etc.
b.Request and Response details:
You can inspect the headers, cookies, and query parameters of each request, as well as the headers and content of the response. It is useful for debugging purposes if any API is throwing bad requests or internal server errors. You can easily check from the Network tab, the details about API.
You can also copy the CURL of the API and import it into a tool like POSTMAN where you can perform different actions ( Modify the request and check different scenarios) and debug it.
(i)Open Chrome Dev Tools> Network tab.
(ii) Select the API and do a right-click.
(iii) Select “Copy as CURL”
Open Postman and import the copied curl (just like shown below):
Clicking on import will open a pop-up like below:
You can paste the copied curl( from the Network tab) here in Postman
Using the above approach, you can copy the curl and test it manually using POSTMAN.
c. Timing and performance metrics: You can see detailed timing and performance metrics for each request, including the time taken to send and receive data, DNS lookup, SSL handshake, and server response time.
d. Throttling: You can simulate different network conditions, such as slow 3G or offline mode, to test how your application performs under different network conditions. This is very useful for QA and Devs when you want to verify the web application’s behavior for different network conditions.
4). Device Mode:
This tab helps to simulate mobile devices. You can check the responsiveness of the web application (i.e Check whether the web application functions properly and the page remains intact when the user opens it in various viewport/dimensions).
Device Mode allows you to test a web page on different devices and screen sizes. You can simulate different devices and orientations, and test how the page looks and behaves on them.
To open device mode, go to Chrome Dev Tools and select Toggle Device Toolbar to open the UI that enables you to simulate a mobile viewport.
You can test the responsiveness for different provided viewports. For example, if you want to verify if your web application works fine on Android Device, In that case, you can select an Android device like Samsung or if you want to verify responsiveness on Iphone, then you can select the Iphone provided in the Dimensions list.
5). Security Panel
The Security panel shows you the security status of a web page. It checks if the page is using HTTPS, if the SSL certificate is valid, and if there are any security issues. You can use it to identify and fix security vulnerabilities in your web applications.
You can also view detailed information about the website’s SSL/TLS certificate, including the certificate’s issuer, expiration date, and any other relevant details. ( just by clicking view certificate)
6). Sources Panel
The Sources panel allows you to debug JavaScript code. You can set breakpoints, step through the code, and inspect variables. You can view all the resources that the page has loaded. This is useful for debugging complex JavaScript applications.
You can also run Javascript scripts from Source Panel. You can create a Snippet (Snippets are scripts that you can run on any page) and run it .
let newDiv = document.createElement('div');
newDiv.textContent = 'Hello, world!';
document.body.appendChild(newDiv);In this example, we’re creating a new div element using the document.createElement() method, setting its textContent property to a string and appending it to the body element of the HTML document using the appendChild() method. This code creates a new div element with the text "Hello, world!" inside it and adds it to the end of the document body.
If you run this code in a JavaScript environment, you will see the new element appear on the page with the text content displayed inside it.
In the above screenshot, you can see “Hello World!” gets added to the page after executing the script snippet.
7). Application Panel:
With the Application Panel, you can inspect and manage various aspects of a web application, including network requests, caching, and storage.
Below is a brief overview of some of the features of the Application panel:
a. Cookies:
These are small text files that a website can store on a user’s computer to remember their preferences or login information
b. Local Storage: This is a key-value storage that allows websites to store data on a user’s computer. It allows web applications to store data locally within the user’s browser.
This data persists even after the browser is closed or the computer is shut down. This makes Local Storage a good choice for storing user preferences or other types of data that should persist across browser sessions. It’s commonly used to store user preferences or data that needs to persist across multiple sessions.
c. Session Storage: Similar to local storage, but the data is only stored for the duration of the current browser session. When the user closes the browser window or tab, the data stored in Session Storage is cleared.
This makes Session Storage a good choice for storing temporary data that doesn’t need to persist beyond a single browser session.
Conclusion:
Overall, Chrome DevTools is a powerful set of debugging and development tools that allow QA and Devs to efficiently inspect, debug, and optimize web applications. Whether you are a beginner or an experienced developer, Chrome DevTools can help you to improve your productivity, streamline your workflow, and enhance your overall development experience.
Hope you like the article. Thanks for reading!
Happy learning! AB
Thanks, Naveen AutomationLabs for your guidance and support!
