RFC: Redesigned Breakpoints pane - Quicker Access to Common Actions

[jecfish]

Author: Kim-Anh Tran (@ktran), Jecelyn Yeen (@jecfish)
Posted: Dec 19, 2022
Status: Complete
Chrome bug tracker: https://crbug.com/1394686

The goal of this RFC is to validate the design with the community, solicit feedback on open questions.

Complete: This RFC is now complete. See a summary here.

Motivation

The current Breakpoints pane provides little visual aid in overseeing all breakpoints. On top of that, frequently used actions are hidden behind the context menu.

With our redesign we want to bring structure into the Breakpoints pane and allow developers to have quick access to commonly used features, in particular editing and removing breakpoints.

Goals and Non-Goals

Goals:

• Making Pause on Exceptions explicit and independent
• Provide a structured overview over breakpoints
• Provide quick access for commonly used flows
• Increase visibility of conditional breakpoints and logpoints

Non-Goal:

• Introduce new features for breakpoint handling

What’s changed? Try the prototype

The prototype is available from Chrome 109 onward. Turn on the experimental flag to give it a try. To check your current browser version, type chrome://version in your address bar. (Install Chrome Canary, Dev or Beta to test if your current browser version is lower than 109)

Click on the Settings icon > Experiments tab > enable the Enable re-designed Breakpoint Sidebar Pane in the Sources Panel.

Below are the changes:

1. Making pausing on exceptions explicit. There are 2 types of exceptions - caught and uncaught.
   • Previously, it took 2 steps to pause on caught exceptions.
     1. First, you need to click on the pause icon to show/hide the Pause on caught exceptions checkbox.
     2. Then, enable the Pause on caught exceptions.
     3. Take note that enabling the pause icon also means enabling Pause on uncaught exceptions.
   • With the latest changes, it takes only one click.
     • We moved both pause options to the Breakpoints pane and replaced it with explicit text to make it more self-explanatory.
     • Both actions are now displayed in checkboxes, and independent from each other. You need only one click to pause on either caught and uncaught exceptions.

2. Provide a structured overview over breakpoints.
   • Previously, there was no grouping in breakpoints.
   • With the latest changes, we redesign the UI.
     • Breakpoints are grouped by file and ordered by line/column number.
     • Click on the file name to expand or collapse breakpoint to focus on the breakpoints that are relevant for the current debugging session.

3. Provide quick access for commonly used flows.
   • Hover over a file name and click the remove button to remove all breakpoints in a file. Previously, you had to right click on each file and remove them one-by-one.
     
   • Hover over a breakpoint line. Click on the icons to edit or remove the breakpoint. Previously, the edit and delete option was only available when you right click on the breakpoint.

4. Increase visibility of conditional breakpoints and logpoints. When you click on the edit icon in a breakpoint line, the editor will jump to the selected breakpoint, with an edit dialog. You can add a conditional breakpoint or click on the dropdown to change to logpoint instead. Previously, there’s no edit option in the Breakpoints pane.

5. Here are some minor enhancements:
   • Support keyboard navigation
     • Press TAB to get into the pane.
     • Navigate with the Arrow keys / Home button / End button.
     • Expand and collapse groups using Enter/Space or Left/Right arrow
   • Hover over a file to view its source URL.
     
   • Hover over a logpoint or conditional breakpoint to view its conditions.
     

Questions for Discussion

In addition to general feedback, we would like to collect feedback on the following specific questions:

1. Are there any workflows that aren’t well supported with the new Breakpoints pane?
   We are interested in any workflows that we haven’t considered when redesigning the sidebar. Let us know if the old sidebar supported a workflow which the new one doesn’t!

FAQ

How can I try out the new Breakpoints pane?

It is available in Chrome 109. Turn on the experimental flag to give it a try. To check your current browser version, type chrome://version in your address bar.

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features!

When is the new Breakpoints pane becoming the default one?

We plan to turn on the experiment per default with Chrome 111. You will still be able to switch back to the old Breakpoints pane if you wish so until (including) Chrome 112. With Chrome 113, we will remove the old Breakpoints pane.

Does this new design apply to setting breakpoints in NodeJS applications?

It works mostly the same, except a slight difference in Pausing on exceptions for Node. Pausing on caught exceptions will only be possible if you pause on uncaught exceptions too. See Chromium bug #1382762 for details.

[subpandu]

Since the breakpoints are based per file, will there be an option to turn off rather than remove all breakpoints in a file?

[bmeurer]

Since the breakpoints are based per file, will there be an option to turn off rather than remove all breakpoints in a file?

There's an option to Disable all breakpoints in file:

Is this what you mean by turn off rather than remove?

[subpandu]

Yes thank you.

[jecfish]

Hey @subpandu, I have the same thought. I've created a feature request crbug.com/1402891 for this. :)

[jecfish]

After several weeks of discussion, the Breakpoint redesign RFC is now closed. While the comments seems inactive here, we receive quite some feedback on our @ChromeDevTools Twitter.

Based on the feedback and the initial prototype, we plan to move forward with the proposed design. We’ll provide more updates as we progress with the implementation and incorporate your feedback, so stay tuned! In particular, a couple action items stand out:

• crbug.com/1403924 - Clarifying files names while name is index.js
• crbug.com/1402891 - Show icon button to disable breakpoints per file on hover
• crbug.com/1402893 - Add documentation link for logpoint and conditional breakpoint

There are other UX improvement feedback as well, we’ll consider adding them, possibly in follow-up releases.

We will fix some implementation issues uncovered by participants. Thanks to all the participants for your help evolving Chrome DevTools!