Chrome – DevTools: A Complete Guide

Chrome DevTools is a joint set of web developer tools built into the Google Chrome browser. It’s a powerful toolkit that lets you inspect, edit, and debug your code and measure your pages’ performance. In this guide, we’ll go over how to use all of the features of DevTools to test and debug your web pages.

Why Do You Need Chrome Debugging Tools / DevTools?

There are some reasons why you need Chrome Debugging Tools for testing:

  • DevTools gives you powerful tools for inspecting and editing your code. With DevTools, you can quickly find and fix any errors in your code.
  • DevTools lets you measure the performance of your pages. You can use the Performance panel to find and fix bottlenecks in your code and see how your page performs on different devices and browsers.
  • DevTools lets you simulate different types of devices and browsers. With Device Mode, you can test your page on different devices and see how it looks and performs. The Browser Mode also lets you simulate different versions of browsers, making sure your page looks good and functions correctly in all browsers.

How To Get Started with DevTools

To get started with DevTools, open the Chrome browser and go to the URL you want to inspect. Then, right-click on any element on that page and select “Inspect Element.” This will open up the DevTools panel.

The DevTools panel is divided into a few different sections:

  • The Elements panel lets you inspect and edit the HTML and CSS of your page. With the Elements panel, you can make changes to your code and see those changes immediately reflected on the page.
  • The Console panel lets you run JavaScript code on your page. With the Console, you can test code snippets or debug your code.
  • The Sources panel lets you view and edit your page’s JavaScript and CSS code. With the Sources panel, you can set breakpoints, step through code, and see the values of variables.
  • The Network panel lets you see how your page is loading. With the Network panel, you can see what resources are being loaded and how long each resource takes to load.
  • The Performance panel lets you see how quickly your page is loading and rendering. With the Performance panel, you can find bottlenecks in your code and optimize your page for better performance.
  • The Memory panel lets you see how much memory your page is using. With the Memory panel, you can track down memory leaks and optimize your code for better memory usage.
  • The Application panel lets you inspect the application state of your page. With the Application panel, you can view and edit localStorage, cookies, and sessionStorage.

The DevTools panel also has a few other features that we’ll go over later in this guide:

  • The Device Mode lets you simulate different types of devices. With Device Mode, you can test how your page looks and performs on different devices.
  • The Browser Mode lets you simulate different versions of browsers. With Browser Mode, you can ensure your page looks good and functions correctly in all browsers.
  • The Network Throttling lets you throttle the network speed to simulate different connection speeds. You can test how your page performs on slow connections with Network Throttling.

Now that we’ve gone over the basics of DevTools let’s take a closer look at each of the panels.

Don’t Rely on iOS Emulators & Android Simulators. Test on Real Devices.

The Elements panel and how to use it

The Elements panel lets you inspect and edit the HTML and CSS of your page. With the Elements panel, you can make changes to your code and see those changes immediately reflected on the page.

Select an element on the page to get started with the Elements panel. This will bring up the HTML for that element in the Elements panel. From here, you can edit the HTML or CSS for that element. Any changes you make will be immediately reflected on the page.

You can also generate new elements to your page with the Elements panel. To generate a new element, click the “Add Element” button at the panel’s top. This shows a dialog box where you can enter the HTML for the new element. Once you’ve entered the HTML, click “OK” to add the element to your page.

The Console panel and how to use it

The Console panel lets you run JavaScript code on your page. With the Console, you can test code snippets or debug your code.

To get started with the Console panel, enter some JavaScript into the Console and press “Enter.” The Console will evaluate the code and print the result. You can also use the Console to debug your code. To do this, set a breakpoint in your code with the “debugger” keyword. When the code execution hits the breakpoint, the Console will pause and let you step through the code.

The Sources panel and how to use it

The Sources panel lets you view and edit your page’s JavaScript and CSS code. With the Sources panel, you can set breakpoints, step through code, and see the values of variables.

Select a file in the “Files” pane to get started with the Sources panel. This will bring up the contents of that file in the “Editor” pane. From here, you make changes to the code and see those changes immediately reflected on the page.

You can easily set breakpoints in your code with the Sources panel too. To set a breakpoint, click on the line number where you want to set the breakpoint. This will be showing a dialog where you can enter the breakpoint conditions. Once you’ve entered the breakpoint conditions, click “OK” to set the breakpoint.

The Network panel and how to use it

The Network panel lets you see how your page is loading. With the Network panel, you can see what resources are being loaded and how long each resource takes to load.

Select a resource in the “Resources” pane to start with the Network panel. This will bring up the details of that resource in the “Details” pane. From here, you can see when the resource was loaded, how long it took to load, and what type of resource it was.

You can use the Network panel to throttle the network speed too. To throttle the network speed, click the “Network Throttling” button at the panel’s top. This will show dialog box where you can select the desired connection speed. Once you’ve selected the connection speed, click “OK” to throttle the network.

The Performance panel and how to use it

The Performance panel lets you see how your page is performing. With the Performance panel, you can see what resources are taking up time and where bottlenecks are occurring.

Select a resource in the “Resources” pane to get started with the Performance panel. This will bring up the details of that resource in the “Details” pane. You can check how much time it is taking to load, what type of resource it is, and what size it is.

You can also use the Performance panel to record a performance profile. To record a performance profile, click the “Record” button at the panel’s top. This will start recording information about your page’s performance. Once you have finished recording then just click the “Stop” button to save the performance profile.

Enable distributed and crowdsourced testing with secure low-latency access to your remote devices. Learn more.

The Memory panel and how to use it

The Memory panel lets you see how much memory your page is using. With the Memory panel, you can see what resources are taking up memory and where any memory leaks are occurring.

Select a resource in the “Resources” pane to get started with the Memory panel. This will bring up the details of that resource in the “Details” pane. From here, you can check how much of the memory the resource uses, what type of resource it is, and when it was last accessed.

You can also use the Memory panel to take a snapshot of your page’s memory usage. To take a snapshot, click the “Take Snapshot” button at the top of the panel. This will save a copy of your page’s current memory usage. Once you’ve taken a snapshot, you can browse through the snapshot to see what resources are taking up memory.

The Applications panel and how to use it

The Application panel lets you inspect the resources that make up your web application. With the Application panel, you can see what files are loaded and what cookies and local storage are used.

Select a resource in the “Resources” pane to get started with the Application panel. This will bring up the details of that resource in the “Details” pane. You can just see and check what files are being loaded and what cookies and local storage are being used.

You can also use the Application panel to clear your web application’s data. To clear your web application’s data, click the “Clear” button at the top of the panel. This will clear all of your web application’s data, including cookies, local storage, and the browser cache.

The security panel and how to use it

The Security panel lets you inspect the security settings of your web page. With the Security panel, you can see what permissions your page has and what security vulnerabilities may be present.

Select a resource in the “Resources” pane to get started with the Security panel. This will bring up the details of that resource in the “Details” pane. From here, you can see what permissions your page has and what security vulnerabilities may be present.

You can also use the Security panel to change your web page’s security settings. To change your web page’s security settings, click the “Security” button at the top of the panel. This show a dialog where you can change your web page’s security settings.

The Settings panel and how to use it

The Settings panel lets you customize the behavior of DevTools. With the Settings panel, you can enable or disable features and change the theme and keyboard shortcuts.

To get started with the Settings panel, click the “Settings” button at the top of the DevTools window. This will bring up the Settings panel. From here, you can either turn on or disable features and change the theme and keyboard shortcuts.

Features of Chrome Debugging Tools

Now that you know how to use the Debugging Tools let’s take a look at some of the features that make it so powerful.

With DevTools, you can:

  1. Inspect as well as modify the HTML and CSS of your pages.
  2. Debug JavaScript code.
  3. Measure the performance of your pages.
  4. Simulate different types of devices and browsers.
  5. Inspecting and modifying HTML and CSS

Let’s study these features in detail:

Inspecting Elements

With DevTools, you can inspect and edit the HTML and CSS of your pages. This is useful for finding and fixing errors in your code.

To inspect the HTML of a page:

  1. First, Right-click on the page and select Inspect from the menu.
  2. The DevTools window will open.
  3. Click on the Elements tab to check the HTML code.

You can edit the Page HTML directly in the DevTools window. To do this:

  1. Right-click on the element you want to edit and select Edit as HTML from the menu.
  2. Make your changes in the text editor that opens up.
  3. When you’re finished, click the Save button.

To inspect and edit the CSS of a page:

  1. Right-click on the element you want to inspect and select Inspect from the menu.
  2. The DevTools window will open.
  3. Click on the Styles tab to view the CSS code for the selected element.
  4. To edit the CSS code, simply make your changes in the text editor that opens up.
  5. When you’re finished, click the Save button.

Debugging JavaScript code

With DevTools, you can set breakpoints in your JavaScript code so that you can step through it line by line and see what’s happening at each stage. This is useful for finding errors in your code.

To set a breakpoint in your code:

  1. Right-click on the line of code you want to set a breakpoint on and select Inspect from the menu.
  2. The DevTools window will open.
  3. Click on the Sources tab.
  4. Find the line of code on which you want to set a breakpoint and click to the left to insert a breakpoint marker.
  5. Click the play button in the DevTools window to start debugging your code.
  6. Your code will now run line by line until it reaches the breakpoint you’ve set. You can use the buttons in the DevTools window to step through your code, or you can click on the line of code you want to execute and press the F10 key.

Measuring the performance of your pages

With DevTools, you can measure the performance of your pages using the Timeline and Profiles tools. These tools can help you find bottlenecks in your code so that you can optimize your pages for better performance.

To measure the performance of your pages:

  1. Open the DevTools window and click on the Timeline tab.
  2. Select how far back in time you want to collect data from, then click the Start button.
  3. Click around on your page to interact with it, then click the Stop button when you’re finished.
  4. The Timeline will now show you a detailed breakdown of all the activities that took place during the recording.
  5. You can use the Profiles tool to see a more detailed analysis of a specific part of the Timeline. To do this, click on the area of the Timeline you want to investigate, then click on the profile tab and select which type of profile you want to take.
  6. Once the profile is complete, you’ll be able to see a detailed report of what was happening in your code during that time period. This report can help you identify bottlenecks so that you can optimize your code for better performance.

Simulating different devices and browsers

With DevTools, you can simulate different types of devices and browsers so that you can test how your pages will look and behave on different platforms.

To simulate a device:

  1. Open the DevTools window and click on the Settings button (three dots).
  2. Select More tools > Rendering settings from the menu.
  3. In the Emulate tab, select the type of device you want to simulate from the drop-down menu.
  4. You can also adjust the screen resolution and pixel density if needed.
  5. To see how your page will look on this device, simply refresh the page.

To simulate a different browser:

  1. Open the DevTools window and click on the Settings button (three dots).
  2. Select More tools > User-Agent from the menu.
  3. In the User Agent tab, select the browser you want to simulate from the drop-down menu.
  4. To check how the page will look in this browser, simply refresh the page.

Advanced Features of Chrome DevTools

The Device Mode

The Device Mode is a feature in DevTools that allows you to simulate how your pages will look and behave on different types of devices. With Device Mode, you can adjust the size and position of the viewport, emulate different types of devices, and even simulate different types of networks to test how your pages will perform under different conditions.

To access the Device Mode:

  1. Open the DevTools window and click on the Settings button (three dots).
  2. Select More tools > Developer Tools settings from the menu.
  3. In the General tab, check the checkbox next to EnableDevice Mode.
  4. Click on the Devices icon (two smartphones).
  5. The Device Mode will now be enabled.

The Browser Mode

The Browser Mode is a feature in DevTools that allows you to simulate how your pages will look and behave in different types of browsers. With Browser Mode, you can select from a list of common browsers and view your pages as if that browser was rendering them. This can be useful for testing how your pages will look and behave on different platforms.

To access the Browser Mode:

  1. Open the DevTools window and click on the Settings button (three dots).
  2. Select More tools > Developer Tools settings from the menu.
  3. In the General tab, check the checkbox next to EnableBrowser Mode.
  4. Click on the Browsers icon (a globe).
  5. The Browser Mode will now be enabled.

The Network Throttling

Network Throttling is a feature in DevTools that allows you to simulate how your pages will load and perform under different network conditions. With Network Throttling, you can select from a list of common network types and view your pages as if they were being loaded over that type of connection. This can be useful for testing how your pages will perform on different types of devices and under different conditions.

To access the Network Throttling:

  1. Open the DevTools window and click the Settings button (three dots).
  2. Select More tools > Developer Tools settings from the menu
  3. In the General tab, check the checkbox next to Enable Network Throttling.
  4. Click on the Network icon (a computer screen).
  5. The Network Throttling will now be enabled.

Chrome DevTools Best Practices

There are a few best practices that you should keep in mind when using DevTools:

Use the Console for Development and Debugging

The Console is one of the most powerful features in DevTools, and it can be very useful for development and debugging purposes. If you’re unfamiliar with the Console, it’s a way to view and interact with the JavaScript code on your pages. You can log messages, run commands, and even debug your code using the Console.

Inspect Elements to Find Problems

If you are looking at any kind of trouble with the layout of your page, or if you’re trying to figure it out why something isn’t working right, the Inspect tool can be very helpful. With Inspect, you can view the HTML and CSS code for any element on your page and make changes to that code if necessary.

Use the Network Panel to optimize performance.

The Network panel is a great tool for optimizing the performance of your pages. With the Network panel, you can view information about each request made when loading your page, including the type of request, the URL, the response time, and more. This information can be very helpful while troubleshooting performance issues.

Take advantage of DevTools shortcuts.

Chrome DevTools has many different features, which can be overwhelming at first. One way to make things easier is to learn some of the available shortcuts. For example, press Ctrl + Shift + C (or Cmd + Shift + C on a Mac) to open the Inspect tool, or press Ctrl + Shift + I (or Cmd + Shift + I on a Mac) to open the DevTools window. Many other shortcuts are available, so take some time to explore and see what’s available.

Use the Device Mode for responsive design testing.

If you’re working on a responsive design, the Device Mode can be very helpful. With Device Mode, you can select from a list of common devices and view your pages as if they were being rendered on that device. This can be useful for testing how your pages will look and behave on different screen sizes and devices.

Use the Network Condition Simulator

The Network Condition Simulator is a tool that allows you to simulate different network conditions. With the Network Condition Simulator, you can select from a list of common network types and view your pages as if they were being loaded over that type of connection. This can be useful for testing how your pages will perform on different types of devices and under different conditions.

Use the Performance Panel to measure the performance.

If you are interested in measuring the real-time performance of your pages, the Performance panel can be very helpful. With the Performance panel, you can view information about the loading time, JavaScript execution time, and more. This information can be very helpful while troubleshooting performance issues.

Use the Timeline to understand performance bottlenecks.

The Timeline is a tool that allows you to view a detailed log of all the events that occur while loading your page. With the Timeline, you can see how long each event takes and identify any bottlenecks that might be causing performance issues.

Use the Memory Panel to troubleshoot memory leaks.

The Memory panel can be very helpful if you’re having trouble with memory leaks on your pages. With the Memory panel, you can take a snapshot of the memory usage on your page and then inspect that snapshot to find any areas where memory is being improperly used.

Use the Audits Panel to improve performance.

The Audits panel is a tool that allows you to generate reports about the performance of your pages automatically. With the Audits panel, you can select from a list of auditing options and then view a report that details any areas where your page could be improved.

Use the PageSpeed Insights extension.

The PageSpeed Insights extension is a tool that allows you to measure the performance of your pages using Google’s PageSpeed Insights service. With the PageSpeed Insights extension, you can generate reports about the performance of your pages and get recommendations for how to improve that performance.

Use the Lighthouse extension.

The Lighthouse extension is a tool that allows you to generate reports about the quality of your web pages. With the Lighthouse extension, you can select from a list of auditing options and then view a report that details areas where your page could be improved.

Use the WebPageTest extension.

The WebPageTest extension is a tool that allows you to measure the performance of your pages using Google’s WebPageTest service. With the WebPageTest extension, you can generate reports about the performance of your pages and get recommendations for how to improve that performance.

Use the User Timing API

The User Timing API is a tool that allows you to measure the performance of your pages by providing marks and measures. With the User Timing API, you can set marks at specific points in your code and then measure the time between those marks. This information can be really helpful in troubleshooting performance issues.

Use the Console API

The Console API is a tool that allows you to log messages from your code. With the Console API, you can print messages to the Console, view stack traces, and more. This information can be very helpful while troubleshooting errors.

Use the Debugger API

The Debugger API is a tool that allows you to step through your code line by line. With the Debugger API, you can set breakpoints, view variable values, and more. This information can be very helpful while troubleshooting errors.

Use the profiler

The profiler is a tool that allows you to measure the performance of your code. With the profiler, you can take snapshots of your code’s execution and then view information about the time taken for each function. This information can be very helpful while troubleshooting performance issues.

Use the Source Maps extension.

The Source Maps extension is a tool that allows you to debug your code using source maps. With the Source Maps extension, you can view the original source code for your files, even if those files have been minified or compiled. This information can be very helpful in troubleshooting errors.

Use the Filter extension.

The Filter extension is a tool that allows you to filter log messages by type. With the Filter extension, you can choose to view only error messages, only warning messages or only info messages. This information can be beneficial in troubleshooting errors.

DevTools HeadSpin Integration

HeadSpin’s Real Device Cloud allows you to test your web pages on various devices and browsers. HeadSpin provides you a way to inspect Web pages on browsers running on Pboxes via the Chrome DevTools over the internet. The DevTools provide remote debugging for local server features. The HeadSpin platform allows you to connect our browsers from your local Chrome DevTools clients via the feature over a secured network.

To integrate HeadSpin Platform with Chrome DevTools:

Use the command-

$ hs connect browser 

This command launches a local server to establish a connection between Chrome Devtools running on your local machine and a browser running on a pbox. Once you launch the local server, you can register it as Remote Target via Discover network targets in the chrome://inspect page on your browser. 

An inspect link opens a DevTools window on your local machine to interact with the target page via the DevTools window.

Create a new browser session on a pbox and attach it to the session.

$ hs connect browser –api-token b592e536c175439f962b2fa458070162 

chrome_80.0.3987.149@dev-us-mia-0-proxy-0.headspin.io

–API-token is an API token to authorize the request

The first argument is a device address. The format is

<device_id>@<hostname>

Then, once you register localhost:9222 on your browser via chrome://inspect, the target page will appear. The session will close when you input ^C on the terminal or cancel the browser running on the pbox via HeadSpin Remote Control.

Chrome DevTools provides a feature, Lighthouse, to visualize the quality of Web pages. The tool embedded in the Chrome DevTools tab does not work through the remote debugger, but you can collect the data from browsers running on our pboxes with the Node CLI. 

The lighthouse command on your local machine can attach to a DevTools session. The command provides a –port option so that you can specify the local port of the hs connect browser for it. 

The Bottom Line

So there you have it! This is just a basic overview on how DevTools can be used to test and debug your web pages, and That’s how you can use DevTools to test your webpages with HeadSpin. For more detailed information on this, please refer to the official documentation at https://developer.chrome.com/docs/devtools/ and for further details on HeadSpin, please visit https://www.headspin.io/.

Article Source:

This article is originally published on:

https://www.headspin.io/blog/chrome-devtools-a-complete-guide