Chrome Dev Tools - Tips And Tricks

Introduction

Google Chrome dev tools is something that all developers know of, and use regularly to see JavaScript console errors, inspect elements of HTML and see CSS style classes and how they effect those elements. But recently I've found many more interesting features.
This blog will highlight some of those unique features!

[!note]
You can capture screenshots through dev tools by running the (Ctrl + Shift + P) command "screenshot"!

Scroll down the find out more.

The basics

The basic use of dev tools is typically to view live HTML and CSS, to see what elements and classes are rendered from the code that we write. Inside the Elements Panel we can do the following:

• Live-edit HTML and CSS.
• View computed styles and specificity conflicts.
• View computed media queries.
• Toggle classes.
• Force pseudo-states (:hover, :focus, :active, :visited).
• Visualise spacing via the Box Model.
• Enable Flexbox and Grid overlays.

Console

The console outputs any logical (usually JS) errors that the live code has encountered on web pages. Inside the console we can create Live Expressions like watching variable values, monitoring DOM properties and tracking state changes.

For example we can add console.log(variable) to our code to display certain details in our console if we are debugging.

[!warning]
Be sure to remove any console related code like logs before deploying a website.

Network Analysis

In the network tab of dev tools, we can look at all the active request headers, payloads and response bodies. Key aspects of this include any JS scripts that are currently running in your live website. This is also a great place to test API scripts and analytics like Google Tag Manager.

Storage and Application

The application tab allows us to view and edit areas such as:

• LocalStorage - data that persists in the browser with no expiration date.
• SessionStorage - data that only lasts for the browser tab session.
• IndexedDB - A low-level, asynchronous, database built into the browser.
• Cookies - Small pieces of data stored in the browser and automatically sent with HTTP requests to the server.

[!note]
This is also a key area to clear the current sites cookie data on you (By selecting the "Storage" menu item then "Clear site data") .
Clearing data can also potentially solve caching issues during development and testing.

Performance

The Performance tab allows us to see how much hardware usage is being used by our code (website) as well as:

• Record runtime activity.
• Analyse flame charts.
• Identify long tasks.
• Detect layout thrashing and paint bottlenecks.

Performance monitor (Command = "show performance monitor")
This includes reports on CPU usage, JS heap size, DOM node count and event listeners.
With this information, we can improve and fix areas of our code that may be slow or inefficient.

Lighthouse

The lighthouse tab allows us to fully audit and make reports on our sites performance, accessibility, SEO (Search Engine Optimisation) and code best practices. Much like our performance reports, this also allows us to review the quality of out code and modify based on the results.

Device Emulation

To make sure our code (website) is responsive on Mobile, Tablet and Desktop devices we can select the "device toolbar" in the top left of the dev tools (or Ctrl + Shift + M).
This will allow us to see either select present devices like "IPhone SE" screen ratios or drag the screen size in the responsive mode (menu in top centre of the screen).

Commands (Ctrl + Shift + P)

Dev tools allows users to run commands on the webpage (Ctrl + Shift + P to open the command box), some unique commands include the following:

1. Screenshot
   By typing "screenshot" in the commands box you are presented with 4 options -
   • Capture area screenshot - Allows you to manually select a rectangular area of the current viewport to capture.
   • Capture full size screenshot - Captures the entire scrollable page from top to bottom.
   • Capture node screenshot - Captures only a specific DOM element.
   • Capture screenshot - Captures the current visible viewport only (RECOMMENDED).
2. Show Coverage
   This will highlight all unused JavaScript and CSS on the website, a great way to look for clean up opportunities in our code.
   This may also include unused Chrome Extensions in this listing, so be aware of this.
3. Show frames per second (FPS) meter
   This will measure GPU usage and FPS on your web apps and highly animated elements.
4. Disable JavaScript
   This will fully disable all JS scripts on the website, allowing us to test features without JS logic and see what fallbacks occur.
5. Inspect Element
   This makes toggling the inspect element tool much easier and streamlined instead of clicking the icon in the top left of the dev tools, be sure to set a key bind for this command.

If you make any live changes in the dev tools elements or style tabs, you can see those change by running "show changes" command.

You can assign key bind shortcuts to certain commands for efficiency:
In the settings of dev tools > Shortcuts, find your command and click the box to assign a key bind.

To Conclude

With all of these aspects in mind, your development experience will certainly improve, especially in debugging scripts, styling and documenting project work with screenshot commands.