What's New In DevTools (Chrome 73)

Kayce Basques

Here's what's new in DevTools in Chrome 73.

Video version of these release notes

Logpoints

Use Logpoints to log messages to the Console without cluttering up your code with console.log() calls.

To add a logpoint:

  1. Right-click the line number where you want to add the Logpoint.

    Adding a Logpoint

    Figure 1. Adding a Logpoint

  2. Select Add logpoint. The Breakpoint Editor pops up.

    The Breakpoint Editor

    Figure 2. The Breakpoint Editor

  3. In the Breakpoint Editor, enter the expression that you want to log to the Console.

    Typing the Logpoint expression

    Figure 3. Typing the Logpoint expression

    Tip! When logging out a variable (e.g. TodoApp), wrap the variable in an object (e.g. {TodoApp}) to log out its name and value in the Console. See Always Log Objects and Object Property Value Shorthand to learn more about this syntax.

  4. Press Enter or click outside of the Breakpoint Editor to save. The orange badge on top of the line number represents the Logpoint.

    An orange Logpoint badge on line 174

    Figure 4. An orange Logpoint badge on line 174

The next time that the line executes, DevTools logs the result of the Logpoint expression to the Console.

The result of the Logpoint expression in the Console

Figure 5. The result of the Logpoint expression in the Console

See Chromium issue #700519 to report bugs or suggest improvements.

Detailed tooltips in Inspect Mode

When inspecting a node, DevTools now shows an expanded tooltip containing commonly important information like font size, font color, contrast ratio, and box model dimensions.

Inspecting a node

Figure 6. Inspecting a node

To inspect a node:

  1. Click Inspect Inspecting a node.

    Tip! Hover over Inspect to see its keyboard shortcut.

  2. In your viewport, hover over the node.

Export code coverage data

Code coverage data can now be exported as a JSON file. The JSON looks like this:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url is the URL of the CSS or JavaScript file that DevTools analyzed. ranges describes the portions of the code that were used. start is the starting offset for a range that was used. end is the ending offset. text is the full text of the file.

In the example above, the range 0 to 21 corresponds to body { margin: 1em; } and the range 45 to 67 corresponds to h1 { color: #317EFB; }. In other words, the first and last rulesets were used and the middle one was not.

To analyze how much code is used on page load and export the data:

  1. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

    The Command Menu

    Figure 7. The Command Menu

  2. Start typing coverage, select Show Coverage and then press Enter.

    Show Coverage

    Figure 8. Show Coverage

    The Coverage tab opens.

    The Coverage tab

    Figure 9. The Coverage tab

  3. Click Reload Reload. DevTools reloads the page and records how much code is used compared to how much is shipped.

  4. Click Export Export to export the data as a JSON file.

Code coverage is also available in Puppeteer, a browser automation tool maintained by the DevTools team. See Coverage.

See Chromium issue #717195 to report bugs or suggest improvements.

Navigate the Console with the keyboard

You can now use the keyboard to navigate the Console. Here's an example.

Pressing Shift+Tab focuses the last message (or result of an evaluated expression). If the message contains links, the last link is highlighted first. Pressing Enter opens the link in a new tab. Pressing the Left arrow key highlights the entire message (see Figure 13).

Focusing a link

Figure 11. Focusing a link

Pressing the Up arrow key focuses the next link.

Focusing another link

Figure 12. Focusing another link

Pressing the Up arrow key again focuses the entire message.

Focusing an entire message

Figure 13. Focusing an entire message

Pressing the Right arrow key expands a collapsed stack trace (or object, array, and so on).

Expanding a collapsed stack trace

Figure 14. Expanding a collapsed stack trace

Pressing the Left arrow key collapses an expanded message or result.

See Chromium issue #865674 to report bugs or suggest improvements.

AAA contrast ratio line in the Color Picker

The Color Picker now shows a second line to indicate which colors meet the AAA contrast ratio recommendation. The AA line has been there since Chrome 65.

The AA line (top) and AAA line (bottom)

Figure 15. The AA line (top) and AAA line (bottom)

Colors between the 2 lines represent colors that meet the AA recommendation but do not meet the AAA recommendation. When a color meets the AAA recommendation, anything on the same side of that color also meets the recommendation. For example, in Figure 15 anything below the lower line is AAA, and anything above the upper line does not even meet the AA recommendation.

Tip! In general, you can improve the readability of your pages by increasing the amount of text that meets the AAA recommendation. If meeting the AAA recommendation is not possible for some reason, try to at least meet the AA recommendation.

See Contrast ratio in the Color Picker to learn how to access this feature.

See Chromium issue #879856 to report bugs or suggest improvements.

Save custom geolocation overrides

The Sensors tab now lets you save custom geolocation overrides.

  1. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

    The Command Menu

    Figure 16. The Command Menu

  2. Type sensors, select Show Sensors, and press Enter. The Sensors tab opens.

    The Sensors tab

    Figure 17. The Sensors tab

  3. In the Geolocation section click Manage. Settings > Geolocations opens up.

    The Geolocations tab in Settings

    Figure 18. The Geolocations tab in Settings

  4. Click Add location.

  5. Enter a location name, latitude, and longitude, then click Add.

    Adding a custom geolocation

    Figure 19. Adding a custom geolocation

See Chromium issue #649657 to report bugs or suggest improvements.

Code folding

The Sources and Network panels now support code folding.

Lines 54 to 65 have been folded

Figure 20. Lines 54 to 65 have been folded

To enable code folding:

  1. Press F1 to open Settings.
  2. Under Settings > Preferences > Sources enable Code folding.

To fold a block of code:

  1. Hover your mouse over the line number where the block starts.
  2. Click Fold Fold.

See Chromium issue #328431 to report bugs or suggest improvements.

Messages tab

The Frames tab has been renamed to the Messages tab. This tab is only available in the Network panel when inspecting a web socket connection.

The Messages tab

Figure 21. The Messages tab

See Chromium issue #802182 to report bugs or suggest improvements.

Download the preview channels

Consider using the Chrome Canary, Dev, or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.