Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

What's New In DevTools (Chrome 73)

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

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

    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.

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.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

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.

Discover other DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!