Code has been added to clipboard!

Chrome DevTools Introduction

Chrome Developer Tools

Chrome Developer Tools is a set of web development and web authoring tools provided by the Google Chrome browser. They allow web developers to test and debug their applications. Also it provides access to the internals of the browser and their application.

These DevTools come in a dynamic interface. The various panels give access to different functions, which allow you to get an extensive overview of how your web application is performing and even develop it inside the browser.

What Can Chrome DevTools Do?

There are multiple functions in particular it provides. As a result, it is a dynamic and powerful tool for web development.

Using the Chrome Developer Tools you can:

  • Inspect and modify the DOM layout and elements, as well as the CSS
  • Debug JavaScript using the console
  • Watch the rendering and network performance, allowing you to see how you can optimize your application further
  • Access many other internal aspects of the web applications you develop!

Chrome DevTools Introduction Interface

Firstly, to access the Chrome Developer Tools interface, you have a few options.

It can be done by:

  • Right-clicking a page element and selecting Inspect (this will also select the element you clicked in the DOM interface)
  • Pressing the Command+Option+I keys for Mac OS or Control+Shift+I for Windows and Linux
  • Selecting the Chrome main menu and navigating towards More Tools > Developer Tools

Chrome Developer Tools

From there on you have access to multiple panels. Here is a list of what they do, in short:

  • Device mode - allows you to view the web page or application as it would appear on a mobile device
  • Elements - allows you to view and modify the DOM elements and their CSS
  • Console - logs diagnostic information and lets you interact with the page's JavaScript
  • Sources - allows you to debug JavaScript using breakpoints. Additionally, you can connect your files using Workspaces. This means that DevTools can be used as a code editor
  • Network - debugs request issues and allows you to optimize the page load performance
  • Performance (prev. Timeline) - lets you inspect the runtime performance by recording the events that occur during the life cycle of a site
  • Memory (prev. Profiles) - track the profile memory use and leaks
  • Application - allows you to inspect the resources that have been loaded
  • Security - debugs certificate problems, mixed content issues and others

The following tutorials will go into more detail about the DevTools interface.