Debugger: Smart Step Into

Problem

Given that we are debugging the following code:

console.log(add(f1(), f2())); // This is the currently active line that is about to be run.

function f1() {
    // ...
    return 1;
}

function f2() {
    // ...
    return 2;
}

function add(a, b) {
    return a + b + 1;
}

Next, we want to step into add to fix our bug. However, if we use the “Step Into” command, we step into f1 and f2 first. This is especially annoying when there are a lot of uninteresting getXYZ functions/getters.

Suggested Solution

It would be nice if VS Code had a way so that the user can specify in which method/function they want to step into. IntelliJ and PhpStorm have a “smart step into” feature that does this.

If there is only one target to step into, nothing can be done. However, if there are multiple targets that the debugger can step into, it would be nice if the user could select one.

There a many ways how the selection story can be implemented.

• By using a quick pick dialog. (like PhpStorm in 2013) If “Step Into” is called and the debug adapter reports multiple targets, show them all in a quick pick dialog (it would list “add”, “f1” and “f2”). If the user selects one, the debugger will step into the selected target. This might be confusing if a method appears twice.

• Source Code Range Highlight + Selection. (similar to IntelliJ) If “Step Into” is called and the debug adapter reports multiple target ranges, highlight all those ranges like this (imagine the line being yellow): If the user clicks on a range, the debugger will step into the selected target. With the arrow keys to select a target range and enter to accept it, a keyboard only story can be provided.

• Modifier Key + Inline Decorators. While the user holds Ctrl, inline target decorators are shown before each step-into target in the line that is about to be executed like this (imagine the line being yellow): If the user clicks on one of those decorators while Ctrl is pressed, the debugger steps into the selected target. “Step Into” does not need to be invoked before for this scenario and does not need to be changed. This still allows for the “Go To Declaration/Definition” scenario, as separate click targets are shown. This could be extended for “Go To Cursor” too (similar to how Chrome does it, except that they don’t render additional inline decorators as they don’t have the “Go To Definition” feature). This approach is very efficient for users who debug with the mouse. Keyboard users could enter this “Show All Step-Into Target Decorators” mode with a specific command and then use the arrow keys to select a target.

JS Debug Adapter Implementation Details

Afaik, the V8 debugger does not directly provide the information/commands required for this. Some heuristic involving the AST might be needed. I think it is ok if this feature is not enabled in situations where the list of available targets cannot be statically computed. If it is enabled though, it should always work.

The JS debug adapter could always “step in” and use “step out” if the method that V8 stepped into does not match the selected target.

Examples

Here I would like to step into _applySessionResult, skipping _addSelectionToNextFindMatch. I think pressing “ctrl” + clicking on an appearing “jump to/in” decorator would be a really fun experience:

[hediet]

@isidorn and I did a quick brainstorming session together.

We had a nice idea, however the following gif shows how difficult it is:

Basically, for the bar marked in yellow, chrome dev tools don’t allow to set a breakpoint. This means you really have to set the breakpoint in bar itself if you want to step into that particular invocation of bar. This means that some smartness is required to see where a function invocation will jump to.

Otherwise, you could implement “Step into Target” by adding a temporary breakpoint to the target expression and then stepping into it.

function bar() {
   return {
      foo: () => ({
         baz: () => {}
      })
   };
}

function foo() { 
    debugger;
    var obj = {};
    //Object.defineProperty(obj, 'foo', { value: ({ bar }) });
    obj.foo = { bar }; 
    obj[(() => { bar(); return 'foo'; bar(); })()]
        .bar(
          bar())
        .foo().baz();
}
foo();

[weinand]

VS Code supports the proposed “Smart Step Into” feature already via DAP’s StepInTargets Request.

See https://code.visualstudio.com/updates/v1_46#_step-into-targets

But debug extensions must opt into this (Mock Debug does, js-debug does not yet, I’m not sure about C# and C++)