Guide To Chrome Developer Tools
Tags: devloper, webdev, tools, development
Published: 2023-12-07 05:23:38

For front-end developers and testers, finding and fixing bugs in the web app can be tough sometimes because of unexpected data from the API call and uncertain user interactions. All modern browsers have a developer tool to debug errors in the code.

Developer tools allow developers and testers to view and modify the HTML/CSS and JavaScript of the web page opened. It can also modify the DOM elements directly through the browser.
>  [**Extract text from JSON](https://www.lambdatest.com/free-online-tools/extract-text-from-json?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) data with our powerful and easy-to-use online free tool. Get the data you need quickly and efficiently, no technical skills required. **

Google Chrome, one of the most popular browsers, also has built-in developer tools called **Chrome Developer Tools**. This article will guide you on using Chrome developer tools for debugging and testing web applications.

## What are Chrome Developer Tools?

Chrome Developer Tools or Chrome DevTools is a set of web development tools built into the Google Chrome browser that lets us inspect, edit, and debug our code and measure our page’s performance. These tools let developers see the changes on web pages in real time, diagnose problems more quickly, and build a better website. Explore [25 Best Debugging Tools for 2023](https://www.lambdatest.com/blog/best-debugging-tools/?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=blog), which will help you debug seamlessly.

## How to Access Chrome Developer Tools?

To access the Chrome developer tools, developers may use the following three methods:

* The easiest one is using keyboard shortcuts i.e. **Ctrl + Shift + J** in Windows and **cmd + Option + J** in Mac.

* Open the browser menu by clicking on the three dots in the upper right corner, scroll down to the **More tools** option, and select the **Developer tools** option.

* *Right-click* on the web page to debug and click on the **Inspect** option.

## Different Components of Chrome Developer Tools

![](https://cdn-images-1.medium.com/max/2924/0*jgUeNT2CW_pKGIa0.png)

As you can see in the above image, the Chrome debugger has nine panels. All these panels are responsible for different debugging tasks. Here is a quick summary of what each panel is mainly responsible for.

 1. **Elements:** It can inspect and edit HTML elements and CSS style attributes.

 2. **Console:** Mainly responsible for viewing logs and executing JavaScript code.

 3. **Sources:** Used to debug JavaScript, edit JavaScript, add breakpoints, etc.

 4. **Network:** Responsible for viewing and debugging network-related activities.

 5. **Performance:** Used to analyze the web page load speed and optimization.

 6. **Memory:** Assists in tracking memory usage and fixing memory-related issues.

 7. **Application:** It inspects cookies, localStorage, sessionStorage, IndexDB, and any other local database.

 8. **Security:** Used to debug certificates and other security problems.

 9. **Lighthouse:** It audits the web app/website’s SEO, performance, quality, accessibility, etc.

Let’s have a detailed look at all these nine panels in detail.
>  [**JSON Validator](https://www.lambdatest.com/free-online-tools/json-validator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) is a free and easy-to-use tool to validate JSON data, which makes it easier to fix the issue by providing error line and character position. **

## Elements Panel

The *elements* panel lets developers inspect and modify the HTML and CSS of the web page. With the *elements* panel, we can modify the code directly in the browser and see those changes instantly reflected on the web page.

Developers and testers mainly use the elements panel to experiment with the HTML structure or the web page’s design. Its features include a color picker, responsive screen sizes, CSS editor, layout analyzer, animation builder, event listeners, and rulers.

![](https://cdn-images-1.medium.com/max/3040/0*o_8-YxtiIfYpw1SB.png)

To inspect and modify any component we need to select that using the selection tool icon on the top right corner or by pressing **Ctrl + Shift + C** or **Cmd + Shift + C** as a shortcut. This will display the HTML/[Document Object Model](https://www.lambdatest.com/blog/document-object-model/?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=blog) (DOM) and CSS for that component in the *elements* panel. Next, we can modify the HTML or CSS for that component. Any changes we make will be immediately reflected on the page and will not affect the source file directly.
>  **Don’t waste time debugging your YAML files. Use our free [YAML validator](https://www.lambdatest.com/free-online-tools/yaml-validator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) tool to validate your YAML code quickly and identify syntax errors and fix them. **

## Console Panel

The *console* panel of the Chrome debugger is primarily used to write and execute JavaScript codes. We can also see the log output created by our website in this panel. To open the *console* panel, we can click on the *console* panel tab in the Chrome devTools.

![](https://cdn-images-1.medium.com/max/2852/0*k6yWQ_X2PCxSYx6u.png)

This permits real-time examination of variable values using the Chrome developer tools’ *console* panel. Developers and testers may put various *console.log()* statements in their code and then see their output in the console panel as the user interacts with the browser.

## Sources Panel

The *sources* panel allows developers and testers to view source code or bundle output. This panel is primarily used for complex JavaScript debugging. Here, we can view our source files and set up multiple breakpoints, watch variables and their values, and perform the majority of debugging. It contains a file tree that can navigate through all source code files. To open the sources panel, we can click the sources panel tab in the Chrome developer tools.

![](https://cdn-images-1.medium.com/max/2922/0*DLPbF3s1y6gfCUlD.png)

As shown in the image above, the *sources* panel has three primary components.

* On the left, we have the **File Navigator** pane; it lists a file tree of the web app, including HTML, CSS, JavaScript, and other files, including assets attached to the web app. Chrome extensions’ files may also appear here.

* In the center, the **Code Editor** pane displays all the source codes for the files selected from the File Navigator.

* On the right, we have the **JavaScript Debugging** pane, which is especially used for debugging the JavaScript code.
>  **Keep your JavaScript code safe from syntax errors with our free online [JS Escape](https://www.lambdatest.com/free-online-tools/js-escape?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) tool by quickly and easily converting special characters in your JavaScript. **

## Network Panel

The *network* panel is mainly used to detect any upload or download request made by the webpage using the network. We can log and analyze all network activity in the log section.

The *network panel* in Chrome DevTools has a waterfall graph for all the resources loaded in the web app. This waterfall graph helps us measure the individual performance of each asset, resource, and API endpoint; hence, it can be used to improve the network performance of the web app. Furthermore, we can filter our time required by different types of resources like Fetch/XHR (for API requests), JavaScript, CSS, Img, Media, Font, Doc, and others.

To analyze the web app’s network performance using the Chrome Developer’s tool we can open the *network* panel by clicking on the *Network* tab. Next, we may clear all previous logs by clicking on the clear icon. Finally, we can refresh our web page to get the network log and real time waterfall graph of the website.

![](https://cdn-images-1.medium.com/max/3032/0*R0Yf0K6DGHtyUE_X.png)

The *network* panel is used to monitor the number of requests made by a web page, total data transferred, loading time taken, resources downloaded or uploaded, caching performance, and other network-related activities. This information helps developers and testers to optimize individual resources and the web app.

## Performance Panel

The *performance* panel in Chrome DevTools allows developers and testers to measure the page load performance of a web app. This is achieved by running a performance analysis on the web page and generating metrics on various aspects of the page load process, like the time taken by the web page to display, various network resources to load, and the web page to be interactive. To open the *performance* panel, we can click on the *performance* tab on the Chrome developer tools.

![](https://cdn-images-1.medium.com/max/3002/0*ZZFNjIA1-UneiCwN.png)

The *record* and *reload page* button in the *performance* panel of Chrome DevTools allows developers and testers to run performance analysis on a web page and view detailed metrics about how the page is rendering and loading. By clicking the reload button, the tool will simulate a user visiting and interacting with the web page, providing information about the page load process in graphs and screenshots.

Detailed performance analysis on the LambdaTest website is shown below.

![](https://cdn-images-1.medium.com/max/2796/0*tPKZBR0Tbt9spUtm.png)

We can even interact with call stacks and check functions that may consume more time, block the main thread, and delay the TTI (Time To Interactive) metric. Selecting a function provides all kinds of information for that function. We can check how long that function was executed and what other functions it called, and we can also open the function in the *sources *panel.
>  **Minify your JS code without changing its functionality with our easy-to-use [JS Minifier](https://www.lambdatest.com/free-online-tools/js-minify?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) that reduces the size of your scripts and improve website speed. **

## Memory Panel

The *memory* panel in Chrome developer tools provides advanced insight into the web page’s memory consumption. We can inspect memory usage by component, snapshot heap allocation, and record allocation timelines.

The *memory* panel detects and fixes memory-related issues like leaks, bloats, and garbage collections. To open the memory *panel*, we can click on the *memory* tab on the Chrome developer tools.

![](https://cdn-images-1.medium.com/max/2788/0*WVfQ_0BZ5jg7YnsX.png)

This screen shows a summary of the memory used by the web page by analyzing the total JavaScript heap size of the web page. Detailed memory consumption data by the web page can be generated by clicking on the **Take Snapshot** button.

The Chrome DevTools memory panel allows us to select from three profiling types.

* **Heap Snapshot
**This is one of the most commonly used memory profiling types. It allows you to take a snapshot of the JavaScript heap at a specific point in time. This snapshot shows the memory distribution between various JavaScript and related DOM elements of the web page.

* **Allocation instrumentation on time
**This profiling type provides us with the memory distribution between various JavaScript and DOM elements over time while scrolling and interacting with the web page.

* **Allocation Sampling
**The Allocation Sampling view maps memory consumption for individual page components like frames, documents, web workers, and graphics layers. This profiling type indicates the source of any high memory consumption.

## Application Panel

The *application* panel in Chrome developer tools is used to inspect and edit the manifest file, service worker, cookies, localDB, sessionStorage, and other local databases. This panel is also used to view the website’s metadata, protocols, and icons.

To open the *application* panel, click on the *Application* tab in the Chrome DevTools.

![](https://cdn-images-1.medium.com/max/2796/0*Fl-pR9VQ7MNOh8QI.png)

The *application* panel is mainly helpful in inspecting the progressive web apps that use local storage and API. This helps developers and testers manage storage, caches, and databases; inspect and clear cookies; and inspect Resources.
>  **Make your XML code easy to read and understand with our free online [XML Prettify](https://www.lambdatest.com/free-online-tools/xml-prettify?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) tool. Format your code for better readability and save time! **

## Security Panel

The *security* panel in Chrome developer tools displays connection security information for all network requests. This panel is used to determine if the data collected through network requests are secure or not. The website or network request will display a green lock icon if it is secure.

This panel can be used to view SSL certificates and encryption types of each network request and overall website. To open the *security panel*, we can click on the *Security* tab in the Chrome DevTools.

![](https://cdn-images-1.medium.com/max/2544/0*9-gJ0NfvR8KlOvh0.png)

As shown in the image above, the security panel provides information about

* Certificate verification, indicating whether the website has proven its identity with a TLS certificate.

* TLS connection, indicating whether the website uses a modern and secure protocol.

* Subresource security indicates whether the website loads insecure HTTP subresources (mixed content).

## Lighthouse Panel

Google Lighthouse is an open-source, free tool that can help developers and testers analyze and improve the website’s performance, speed, and overall experience by generating a Lighthouse report.

The lighthouse panel in Chrome developer tools is equipped with Google Lighthouse, which can audit the website without any extra plugins or widgets. To audit a website on Chrome DevTool follow the steps below:

 1. Navigate to the *Lighthouse* tab on Chrome developer tools.

 2. Click on the “Generate Report” button in the image below.

![](https://cdn-images-1.medium.com/max/2000/0*4o5EF1f49Ktw3GR_.png)

It allows us to assess a website’s SEO, performance, accessibility, best practices in code, and progressive web app. It is also highly configurable, making it flexible and useful for all types of sites, from the simple to the highly complex. This flexibility includes several categories to run audits on both mobile and desktop devices.

Auditing the website uses a 1 to 100 scoring system based on tests run against a simulated 4G connection of the selected data. A generated report for the LambdaTest home page is shown below.

![](https://cdn-images-1.medium.com/max/2544/0*eMfRiS01ipjpmVF-.png)
>  **Use our free online [Random Number Generator](https://www.lambdatest.com/free-online-tools/random-number-generator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) tool to create unique non-repeating random numbers. Input your lower and upper range and get numbers with a click. **

## Common Use Cases of Chrome Developer Tools

Chrome developer tools can be used in various scenarios to help us develop better websites. Here are a few common use cases of Chrome developer tools:

* **Check responsiveness
**Front-end developers and testers most commonly use Chrome developer tools to check the responsiveness of websites. It allows managing viewport appearance using both free scaling and preselected sizes. This feature is available in the elements panel.

* **Style into the website
**If we are trying to improve the design of an existing web page, we can navigate to one already existing and inspect it with Chrome developer tools. So if layout, sizing, colors, or design is an issue, we can modify the CSS and check if our copy still looks good in the environment it will be displayed. Finally, we can make the same change in our actual code base by copy-pasting.

* **Identify issues in the website
**Chrome developer tools are commonly used to identify bugs and issues in the code. We can check the API requests and responses, JavaScript source files, and HTML files. We can even analyze and audit our page’s performance to improve our website.

* **Catch non-working plugins
**Almost every website relies on a third-party plugin and widgets. Whether for analytics tools, form or popup tools, or chat add-ons, it’s crucial to keep track of whether they are working properly. Chrome DevTools can greatly help us in testing the performance of these tools.

## Cloud Based Developer Tools

Although the Chrome developer tools running on our physical devices can greatly help us analyze and improve the website performance in various aspects, we must ensure that our website performs the same in all different browser versions, platforms, and devices. To achieve this, we may run [real time testing](https://www.lambdatest.com/learning-hub/real-time-testing?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=learning_hub) on cloud based testing tools.

Cloud-based automation tools are handy because they can test our app in almost all popular browsers and platforms, ensuring better quality assurance for the web app. One such popular cloud based testing platform trusted by large enterprises as well as startups is LambdaTest.

With LambdaTest you can pace up [cross browser testing](https://www.lambdatest.com/online-browser-testing?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=webpage) while performing interactive and live testing on desktop and mobile browsers with our native cloud-based [browser developers tools](https://www.lambdatest.com/support/docs/developer-tools/#how-to-launch-developer-tools-on-mobile-browsers?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=support_doc).
>  **Stop using the same password for everything! Create strong and unique passwords that are difficult to guess with our [Random Password Generator](https://www.lambdatest.com/free-online-tools/random-password-generator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools). Try it now! **

## How To Launch Developer Tools On LambdaTest?

To launch developer tools on LambdaTest, we can follow the steps below:

 1. Before proceeding we must create a [LambdaTest](https://accounts.lambdatest.com/register?_gl=1*xzbc9*_gcl_au*ODM5MzMzMTY0LjE2OTE5MjU5Mzk.) account by registering for free and then navigate to the dashboard.

 2. Navigate to the real time testing dashboard by clicking the **Real Time** button from the left navigation menu.

![](https://cdn-images-1.medium.com/max/3200/1*gc1pgrtRvWgaOVuv_gE-Zw.png)

3.  Select the test configuration as per your choice. You can select from 8 different browsers on desktop and phone devices & their hundreds of versions to perform a real time test session. You may also select from multiple operating systems and screen resolutions for evaluating the website when rendered across various devices of different screen sizes.

![](https://cdn-images-1.medium.com/max/3200/1*H9Aho7qvA5l0t5pB-tBmBg.png)



4. After selecting browser configuration, enter a URL and hit the **Start** button to start testing.

![](https://cdn-images-1.medium.com/max/3200/1*nIbUq0stLTtv-hGO8pbO4A.png)
>  **Generate custom QR codes for your business or personal needs with our fast and easy-to-use [QR code generator](https://www.lambdatest.com/free-online-tools/qr-code-generator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) online tool in seconds. Try it now! **

**5. For desktop devices**: Once the desired virtual machine is launched and operable, *Right-click* anywhere on the loaded webpage and click on the **Inspect** option.

![](https://cdn-images-1.medium.com/max/3200/0*xRSZ_4WZ3GWy6-FT.png)

**6. For mobile devices:** If your selected configuration of VM is a mobile device and once it is launched and operable, you can notice controller buttons on the left side of the screen. Click the icon button with the tools icon to open developer tools.

![](https://cdn-images-1.medium.com/max/3200/1*UfhIOo8ScBHKHisbYqK-Eg.png)

## Bonus Chrome Developer Extension for Pro Debugging

LambdaTest brings a brand new Chrome extension called [LT Debug](https://www.lambdatest.com/lt-debug?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=webpage) to make the life of testers and developers easy and fuss-free while debugging. This free developer tool is simple to use with over nine amazing features used by web developers and testers during debugging on a day-by-day basis.

Even though there are various debugging tools in the market, we believe we are one among them! Here are some top reasons to trust our LT Debug Chrome extension:

* It’s free to use forever.

* All you need to do is fill out a simple form and start your debugging.

* It provides access to 100+ extensions, to make the life of developers and testers easier.
>  **Need a barcode for your products? Create high-quality custom barcodes using our online [barcode generator](https://www.lambdatest.com/free-online-tools/barcode-generator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools). Try our barcode generator tool and get one in seconds! **

Here is our simple step-by-step guide on the installation process of LT debug:

**Step 1:** Go to the official [LT Debug Chrome Extension](https://www.lambdatest.com/lt-debug?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=webpage) page.

![](https://cdn-images-1.medium.com/max/3200/0*_nVsySQHy5AIpryH.png)

**Step 2:** Press the **Add to Chrome** button. You will be redirected to the Chrome web store.

![](https://cdn-images-1.medium.com/max/3200/0*m7t4T0zu6kD30t61.png)

![](https://cdn-images-1.medium.com/max/3200/0*CpNVplDgMlUglkq1.png)
>  **Need a list of names for your project or looking a way to find cool and funky names? Use our [Random Name Generator](https://www.lambdatest.com/free-online-tools/random-name-generator?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) tool to generate unique and creative names instantly. **

**Step 3:** Now press the **Add to Chrome** button on the top right. A pop-up will appear asking if you want to add “*LT Debug*” to the browser. Tap on **Add extension**.

![](https://cdn-images-1.medium.com/max/3200/0*xerWBgxbnNiZFT_L.png)

**Step 4:** All done! Now, you can select the feature you want to use and start debugging.

![](https://cdn-images-1.medium.com/max/3200/0*Ji2YwLTTnHZKnIjk.png)


>  **Tired of manually splitting long text strings? Try out our free online [String Split by Delimiter](https://www.lambdatest.com/free-online-tools/string-split-by-delimiter?utm_source=devto&utm_medium=organic&utm_campaign=dec_07&utm_term=vs&utm_content=free_online_tools) tool to quickly split text strings into separate chunks using any delimiter of your choice. **

## Conclusion

So there you have it! This article provides a basic overview of how Chrome developer tools can be used to test and debug your web apps and how you can use developer tools to test your web apps with cloud based testing tools. We also discussed some common use cases where Chrome developer tools can greatly help the developers.