What's New In DevTools (Chrome 73) Logpoints

1. Right-click the line number where you want to add the Logpoint.
   Figure 1. Adding a Logpoint
2. Select Add logpoint. The Breakpoint Editor pops up.
   Figure 2. The Breakpoint Editor
3. In the Breakpoint Editor, enter the expression that you want to log to the Console.
   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 <a href=https://alligator.io/js/object-property-shorthand-es6/" class="external">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.
   Figure 4. An orange Logpoint badge on line 174

Figure 5. The result of the Logpoint expression in the Console Styles properties in Inspect Mode Figure 6. Inspecting a node

1. Click Inspect .
   Tip! Hover over Inspect to see its keyboard shortcut.
2. In your viewport, hover over the node.

Export code coverage data

[
  {
    "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; }"
  },
  ...
]

1. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.
   Figure 7. The Command Menu
2. Start typing coverage, select Show Coverage and then press Enter.
   Figure 8. Show Coverage
   The Coverage tab opens.
   Figure 9. The Coverage tab

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.

Navigate the Console with the keyboard Figure 11. Focusing a link Figure 12. Focusing another link Figure 13. Focusing an entire message Figure 14. Expanding a collapsed stack trace AAA contrast ratio line in the Color Picker Figure 15. The AA line (top) and AAA line (bottom) 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. Save custom geolocation overrides

1. Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.
   Figure 16. The Command Menu
2. Type sensors, select Show Sensors, and press Enter. The Sensors tab opens.
   Figure 17. The Sensors tab
3. In the Geolocation section click Manage. Settings > Geolocations opens up.
   Figure 18. The Geolocations tab in Settings
4. Click Add location.
5. Enter a location name, latitude, and longitude, then click Add.
   Figure 19. Adding a custom geolocation

Code folding Figure 20. Lines 54 to 65 have been folded

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

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

1. Click Fold .

Messages tab Figure 21. The Messages tab Feedback

• 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