What's New In DevTools (Chrome 73)

Note: We'll publish the video version of this page in mid-March 2019.

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

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.

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

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

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

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

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

Styles properties in Inspect Mode

When inspecting a node, DevTools now shows an expanded tooltip containing commonly important style properties like font, margin, and padding.

To inspect a node:

1. Click Inspect .

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.

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

   The Coverage tab opens.

1. Click Reload . DevTools reloads the page and records how much code is used compared to how much is shipped.
2. Click 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).

Pressing the Up arrow key focuses the next link.

Pressing the Up arrow key again focuses the entire message.

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

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.

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 X anything below the lower line is AAA, and anything above the upper line does not even 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.

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

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

4. Click Add location.

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

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

Code folding

The Sources and Network panels now support code folding.

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.

1. Click 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.

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

Feedback

To discuss the new features and changes in this post, or anything else related to DevTools:

• File bug reports at Chromium Bugs.
• Discuss features and changes on the Mailing List. Please don't use the mailing list for support questions. Use Stack Overflow, instead.
• Get help on how to use DevTools on Stack Overflow. Please don't file bugs on Stack Overflow. Use Chromium Bugs, instead.
• Tweet us at @ChromeDevTools.
• File bugs on this doc in the Web Fundamentals repository.

Consider Canary

If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.

Note: Canary is released as soon as its built, without testing. This means that Canary breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome Stable while Canary is broken.

<<../../_shared/discover.md>>