**FOREWARD: This is a post I wrote as an attempt for some “brand recognition” for my linkedin account as . At the time I was trying to start getting content on my account to help advertise things for startup company I (used to) work at. I decided I’d cross post this here! **
In modern web development, designers and developers must accommodate users who may be using a plethora of different devices. In addition to this, users expect a fast, responsive website. It doesn’t matter what your web application does if it is cumbersome to use or takes seconds to load on every click. So how can developers ensure users are getting high-quality experiences? This is where Chrome DevTools come into play.
Chrome offers powerful developer tools that every web developer needs to be aware of. Even non-web developers, such as designers or graphic artists, can make use of the various tools that Chrome DevTools have to offer. This article will highlight some of the most useful features you should be aware of.
What Are Chrome DevTools?
Before we dive into the most useful features of Chrome DevTools, let’s briefly cover what they are. Chrome DevTools are a suite of web developer tools that are integrated within the Google Chrome browser. Other popular browsers, such as Firefox or Safari, also provide developer tools. They are all slightly different, however, so this article will only be detailing the tools within Google Chrome.
Why Are DevTools essential to use?
An essential part of web development is ensuring your website works well across multiple devices. Does the page look good on desktop, mobile, and tablet devices? Does the page load quickly, or do images take a long time to appear? These are important questions that you can answer using Chrome’s DevTools. There is a tremendous amount of utility provided by Google Chrome’s DevTools, but I want to highlight just three features in this article that will make a difference in your work today:
- Google Lighthouse: this tool identifies issues with your website that are impacting the user experience.
- The Element Inspector: a powerful tool that lets you closely examine HTML elements.
- The Device Toolbar: This allows you to look at your website from the views of various devices, such as smartphones, laptops, or tablets.
Accessing Google Chrome’s DevTools
The first step of using any tool is to open the DevTools. There are a few ways you can do this:
- F12 and CTRL+SHIFT+I are hotkeys that will open DevTools.
- Click on the vertical ellipses located on the top right of your browser. Then select More Tools > Developer Tools
By default, the DevTools will appear on the right-hand side of your browser.
Getting Started with Google Lighthouse
Lighthouse is a tool that will analyze and grade your website on several factors, such as performance, accessibility, and SEO. It is a completely free service that you can use an unlimited amount of times. This report will give detailed suggestions, everything from needing to compress your images better, to server suggestions such as needing to gzip text-based resources. To generate a lighthouse report, first, open the developer tools using one of the methods described above.
Then, click on the “>>” arrows found at the top of the developer tools, and select “Lighthouse”.
This will reveal the “Generate report” button, which will begin the assessment. Below that button, there are some options that allow you to alter the criteria for the report, such as whether the report should be based on a desktop or a mobile device, or what categories the report should include.
Once you run your report, you will get a summary of improvements you can make to your site, with actionable details that will result in a better user experience.
The Element Inspector
Modern web development has grown very sophisticated and mature. It is common for websites nowadays to not only use several frameworks but also use services that inject code into the website, such as Google Tag Manager. If there’s a conflicting style being injected into your site, it can be nearly impossible to determine the root cause without using the element inspector. This tool can save you hours of headache when used correctly.
The element inspector will allow you to select HTML elements and see which CSS rules are currently applying to that element.
To get to the element inspector, click on the “>>” located at the top of the DevTools, and select “Elements”.
To use the element inspector, click on the element you want more information on. At the bottom of the page, there are several tabs you can select to examine various components of the element. The two I use most often are the Styles tab and the Computed tab.
The Styles tab will tell you all the styles that are applied to that element, as well as their source. You are also able to disable elements from this screen by clicking to the left of a specific styling (a contextual checkbox will appear).
The Computed tab detail all dimensions on the selected element, as well as a visualization of the elements box model. (Unsure of what the box model is? Here is an excellent write-up by Mozilla: Introduction to the Box Model)
The Device Toolbar
The device toolbar is essential for web developers. This tool will allow you to visualize your website on a myriad of devices, such as iPads, Microsoft Surfaces, iPhones, and more. To use the device toolbar, click on the icon of a smartphone and tablet found at the top of the developer toolbar.
This will open a new menu above the website you are currently looking at. From here you can select a dimension from the ribbon above the site. This tool will help you refine your responsive breakpoints, and keep from creating a poor mobile experience for users.
