What Are Google Chrome Developer Tools

What Are Google Chrome Developer Tools

Most modern web browsers today include a suite of built-in developer tools which allow the user to carry out various page-related tasks directly within the browser window. While they all do very similar things, in this article, we will look specifically at the developer tools that come bundled with Google Chrome.

Known as Chrome DevTools for short, these tools do a range of things, from inspecting rendered HTML, CSS and JavaScript to debugging pages and seeing how long things take to load. You can also see how your pages look across different devices and screen sizes, from an android device right up to full-width on a monitor.

The best things about them are that you don't need to be a highly-skilled web developer to use them...and they're free! Even if Chrome isn't your preferred browser, they're worth a look.

How Do I Access The Tools?

There are a couple of ways you can access the developer tools. For those of you who love a keyboard shortcut, you can press: CTRL + SHIFT + I or simply F12 (on Windows) or CMD + SHIFT + I (on Mac OS) to take you straight to what is probably the most-used section of the web console for the tools - the Elements tab - which we'll get into later.

Another way you can open Chrome Developer Tools is to right-click on the page and choose Inspect element.

Alternatively, on Windows, you can take the scenic route and click the Kebab menu (Yes, it's really called that! Don't believe us? Take a look.) in the top right of the browser window, then select More tools and then Developer tools.

The Developer Console Window Is Open, Now What?

Depending on whether you have the developer console window docked to the right-hand side of the screen, or along the bottom, you'll either see the all available developer tools or just the first few (with the rest available via the >> button).

The different developer tools available to you, the budding web developer, are:

• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Lighthouse
• Recorder

Let's take a brief look at them below and explain each one's use; we will go into more depth on each tool in future articles and link to them here to be sure to keep checking back.

The Developer Tools

Elements Panel

At its most basic function, the Elements panel shows you the rendered HTML and any CSS styles that apply to the web page. You can highlight and edit different elements on the page and see how changing some of the code affects the structure and style of the content in real-time, direct in the browser window. HTML shows in the top half of the developer console window and CSS in the bottom half.

Don't panic though, you're not changing the underlying source code, just the rendered version of the code that is being displayed in your browser window. You can undo any changes by refreshing the window.

As we mentioned earlier, another way you can get to this tab is to right-click on the page and choose Inspect element. Doing this will not only open the developer console but will also highlight the HTML that relates to the element you clicked on.

Console Panel

The Console panel is the part of the developer tools where you can view the JavaScript used on the page (the interactive elements) to find bugs and try out potential fixes. You can use this part of the web console to run JavaScript that interacts with the web page you're viewing.

As with changes made in the Elements tab, changes here take effect only in the browser window and do not affect the underlying source code.

Another function of the Console panel is to view log messages that have been written in the JavaScript code, they will display here and are often used so web developers can ensure code is executed in the right order, or to check the value of variables at certain moments.

Source Panel

Within the web console, the Sources panel has several very useful functions that help make the life of any web developer easier. We'll let you do your own research into its full capabilities, but here are a few of our favourite bits.

Viewing all resources loaded onto the web page; from the HTML file itself to font files, images, videos and JavaScript files. These are all neatly organised into a structure showing where each resource is loaded from (its "origin"), and the directory from each origin that it resides in. Each file can be previewed making it simple to see what's what.

Creating, saving and running Snippets; a Snippet is a piece of code that Google very kindly lets you create, save and run from within the developer console. It works solely with the JavaScript on the web page, and as with other features we've covered so far (like editing HTML and CSS) it only affects the current page. Very useful for running repeatedly used code that isn't tied to a single site.

Setting up and using Workspaces; all the features of Chrome's development platform that we've covered so far allow you to test and debug changes to the web page being viewed while not changing the page's underlying source code. Workspaces allow you to go one step further and set it up so you can save those changes back to the files themselves, turning the browser window into a code editor.

Network Panel

One of the other tools found in the developer console is the Network panel, and from here, this is where the tools start to get really technical. This part of the toolkit helps identify network performance issues allowing you to optimise where needed. Notice we say 'helps' as it cannot do that job all on its own, but it's an excellent place to start.

You need to have this panel open in the browser tab before you load the page as it only starts recording once it's open, otherwise open it and refresh the page you want to analyse. In this panel, you will see every single resource that has been loaded for the page, along with information for each one, such as when a resource was requested from the server and how long it took to load. Ideal for spotting potential bottlenecks.

To get a bigger picture into potential issues, the Network panel can be used along with the Performance, Memory and Lighthouse panels (discussed later in this article).

Performance Panel

The Performance panel shows similar information to the Network panel discussed above, but whereas the Network panel starts gathering data when the web page is loaded or refreshed, this section of the developer console only starts collecting data when the Record button is pressed.

It's recommended that you run performance tests in Incognito Mode as some Chrome extensions can interfere with site performance. By default, Incognito Mode ensures extensions aren't loaded.

Memory Panel

Nobody likes a slow website, least of all Google, and when performance issues aren't caused by poor resource optimisation, the problem could be memory-related. More specifically, we're talking leaks, bloats and garbage collections.

A memory leak is caused by a bug in the code, which leads to the page continuing to consume more and more memory over time. One symptom of this is when the performance of a web page gets worse over time.

A signal of memory bloat is when the performance of a page is consistently poor and can be caused when there is more memory being consumed than is necessary.

Frequent garbage collections (when the browser reclaims memory) can cause a page to pause regularly. Unfortunately, the browser controls when this happens, and it will stop script execution while it does it, which results in a pause.

Application Panel

This panel within the developer console displays the contents of your browser's storage, including in-browser databases such as Web SQL, local storage, and more. It also allows you to have control over your cookies.

From this part of the web console, you can inspect all manner of loaded resources, including IndexedDB or Web SQL databases, local storage, session storage, cookies, Application Cache, images, fonts, and even stylesheets.

Security Panel

Designed for website admins (rather than developers), the Security panel is a helpful tool as it shows connection-specific information that makes it easier to determine why a site is not showing as secure when connecting to it.

The panel is split into two parts, with the left side showing information about each connection Chrome made while connecting to the site being viewed, and the right side showing additional details for each one. Green denotes a secure connection.

Each connection is grouped as either Main origin (the site being viewed), Secure origins (other connections made while viewing the site that is secured with HTTPS), Non-secure origins (other connections without HTTPS) or Unknown / cancelled.

Lighthouse Panel

Lighthouse replaced the Audit panel in the Chrome 83 release. It analyses the page it's run on via a series of audits and provides recommendations for improvements. The audits are grouped into several criteria used as part of a site's overall rank and are each given a score so that you can focus on the most critical areas first.

The groupings are Performance, Accessibility, Best Practices, SEO and PWA (Progressive Web App).

The great thing about Lighthouse is that it's solution-focused; it doesn't just tell you what's wrong, it will also suggest potential fixes to improve performance.

Recorder Panel

The Recorder panel lets you record a user journey through the website, which can then be used to measure the performance to spot potential issues that would slow down the user's experience. You can replay the recording, emulate different connection speeds, and even create a performance profile for a more in-depth look at the stats.

This is a new addition to the developer tools and was released in early 2022.

Having a great set of tools to test your website is vital for any web developer. What is the ideal location for them to be kept? Of course, in your browser! Chrome, Google's popular web browser, includes all the developer tools you'll need to keep your site running as best it can.

There is so much more to this toolkit than we've been able to cover here, so treat this as a primer, a gateway to greater knowledge and understanding. We'll be adding further articles on this topic, such as tips and tricks in the future, so keep checking back, but if there's anything you think we've missed, let us know.