Customizing the lines when debugging stops at Breakpoint

[Nuthin2do]

Hi,

i have a question about customizing the lines when the execution of my code hits a breakpoint. The idea was/is to have some information shown per line like JetBrains Rider does. See this example ->

When i used the microsoft/monaco-editor i created decorations and added them to a list and applied them as soon as a breakpoint was hit. My question is: Is there something built-in in the monaco-vscode-api to ease the creation of such information or do i have to fall back to use the method i used with the plain monaco-editor? If there is something built-in with the monaco-vscode-api, how can this be done repsectively which service could help me with that?

For a better understanding, here is what i did before:

public updateResultsInEditor(): void {
    if (!this.editor) return;

    const model = this.editor.getModel();
    if (!model) return;

    const decorations = this.lineState.listOfResults.map((result) => ({
      range: new monaco.Range(result.lineNumber, 1, result.lineNumber, 100),
      options: {
        isWholeLine: false,
        after: {
          content: this.formatResult(result),
          inlineClassName: "inlineDecorationClass",
        },
      },
    }));

    this.decorationsCollection.set(decorations);
  }

  public removeResultsInEditor(): void {
    if (!this.editor) return;

    this.decorationsCollection.clear();
  }

  private formatResult(result: Result): string {
    let formatted = "";
    if (result.name != null) {
      formatted += `Name: ${result.name}`;
    }
    if (result.value != null) {
      formatted += `, Value: ${JSON.stringify(result.value)}`;
    }
    if (result.dataType) {
      formatted += `, Type: ${result.dataType}`;
    }
    if (result.errorMsg) {
      formatted += `, Error: ${result.errorMsg}`;
    }
    return formatted;
  }

And before that i used something like that to get the tokens:

private tokenizeCodeLine(line: string): [string, object, string] {
    const tokenizer = acorn.tokenizer(line, { ecmaVersion: "latest" });
    let token;
    let name;
    let type;
    let value;

    while ((token = tokenizer.getToken()).type.label !== "eof") {
      if (token.type.label === "name") {
        name = token.value;
      } else if (token.type.label === "num") {
        value = token.value.toString();
        type = typeof token.value;
      } else if (token.type.label === "string") {
        value = token.value;
        type = typeof token.value;
      } else if (token.type.label === "{" || token.type.label === "object") {
        type = typeof token.value;
      }
    }

    return [name, value, type];
  }

It would be great if there were something built-in in the monaco-vscode-api to be able to use its tokenization and create the line decorations.

Thank you very much.

[CGNonofr]

Are you using the VSCode debugger over DAP builtin feature or are you implementing it by hands?

If I understood correctly, that feature was implemented in VSCode in the 1.92

monaco-vscode-api just allows to use VSCode features and doesn't implement new features, so if you've implemented it by hands, you'll either have to keep your implementation or use the whole debugger stuff

[Nuthin2do]

The environment is like this:

We have a C# application and the editor is embedded in there. The code written in the editor is send to the C# application. The code from the editor (written in javascript) is executed within the C# application. In the editor we initialized the @codingame/monaco-vscode-debug-service-override to be able to set Breakpoints. C# knows about those Breakpoints since they are being send to the parent/C# application. As soon as the execution within C# hits a line where a breakpoint in the editor is referenced then it should stop and then i would like to show the inline results.

Was this understandable? Not sure if i described it understandable enough for someone not involved in the project.

Based on this scenario and your answer i take it that i can't use the built-in functions from VSCode debugger since the debugger isn't being used, right? That means i have to go the way i did before with the plain monaco-editor, right? And regarding the inline feature from VSCode itself, according to the Note to this feature this is only available for Python, so i can't use it anyway.

But can i configure the VSCode debugger to use it for the tokenization like i did previously with acorn even though i don't use the debugger the usual way?

Thank you very much for your response.

[CGNonofr]

Was this understandable? Not sure if i described it understandable enough for someone not involved in the project.

I think it is!

Based on this scenario and your answer i take it that i can't use the built-in functions from VSCode debugger since the debugger isn't being used, right? That means i have to go the way i did before with the plain monaco-editor, right?

The contributions displaying everything related to the debugger are plugged on the debugger services. So if you don't use those services directly, you can't use the contributions eithers indeed.

And regarding the inline feature from VSCode itself, according to the Note to this feature this is only available for Python, so i can't use it anyway.

I'm not sure how they've implemented it actually... it's done from a VSCode extension so you should probably do the same. It looks like it can be configured via the debug.inlineValues VSCode setting, so VSCode already supports it, python have just implemented it in their DAP implementation I guess

But can i configure the VSCode debugger to use it for the tokenization like i did previously with acorn even though i don't use the debugger the usual way?

I'm not sure to follow here

Btw, isn't using the VSCode debugger feature via the DAP protocol not an option for you?

[Nuthin2do]

But can i configure the VSCode debugger to use it for the tokenization like i did previously with acorn even though i don't use the debugger the usual way?

I'm not sure to follow here

I meant if i can use the tokenizer of VSCode instead of doing this manually with acorn like in the code snippet i used before ->

private tokenizeCodeLine(line: string): [string, object, string] {
    const tokenizer = acorn.tokenizer(line, { ecmaVersion: "latest" });
    let token;
    let name;
    let type;
    let value;

    while ((token = tokenizer.getToken()).type.label !== "eof") {
      if (token.type.label === "name") {
        name = token.value;
      } else if (token.type.label === "num") {
        value = token.value.toString();
        type = typeof token.value;
      } else if (token.type.label === "string") {
        value = token.value;
        type = typeof token.value;
      } else if (token.type.label === "{" || token.type.label === "object") {
        type = typeof token.value;
      }
    }

    return [name, value, type];
  }

There i used Acorn to get the tokens to get the name, value and type from the respective line, but it seems either i do it manually or i implement the VSCode Debugger.

Btw, isn't using the VSCode debugger feature via the DAP protocol not an option for you?

Hmm...not sure since the editor is more of cosmetic nature, meaning, it should allow to write code with semantic highlighting, setting breakpoints, showing inline results (for now, maybe there will come other things in the future) and send this data to C#. The real magic happens in C#.

Nonetheless i will look into the VSCode extension and the debug.inline maybe i can use it just to generate the inline results.

Again, thank you very much.