Guide To Chrome Developer Tools

Different Components of Chrome Developer Tools

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.

• Elements: It can inspect and edit HTML elements and CSS style attributes.
• Console: Mainly responsible for viewing logs and executing JavaScript code.
• Sources: Used to debug JavaScript, edit JavaScript, add breakpoints, etc.
• Network: Responsible for viewing and debugging network-related activities.
• Performance: Used to analyze the web page load speed and optimization.
• Memory: Assists in tracking memory usage and fixing memory-related issues.
• Application: It inspects cookies, localStorage, sessionStorage, IndexDB, and any other local database.
• Security: Used to debug certificates and other security problems.
• 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.

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.

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

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.

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.

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.

Learn How To Debug JavaScript Using Chrome Debugger.

Note: Elevate JavaScript based web app testing with TestMu AI’s AI-Orchestrated cloud. Test smarter. Try TestMu AI Today!

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.

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.

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 TestMu AI website is shown below.

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.

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.

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.

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.

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.

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:

• Navigate to the Lighthouse tab on Chrome developer tools.
• Click on the “Generate Report” button in the image below.

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 TestMu AI home page is shown below.

Note: Test your website’s compatibility on the cloud Selenium Grid of 3000+ real browsers. Try TestMu AI Today!

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

With TestMu AI you can pace up cross browser testing while performing interactive and live testing on desktop and mobile browsers with our native cloud-based browser developers tools.

How To Launch Developer Tools On TestMu AI?

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

• Before proceeding we must create a TestMu AI account by registering for free and then navigate to the dashboard.
• Navigate to the real time testing dashboard by clicking the Real Time button from the left navigation menu.

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

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

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

  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.