question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add Inline value provider api for debugging

See original GitHub issue

From https://github.com/microsoft/vscode/issues/119489

Background

The new inline value api for VS Code lets language extensions tell the debugger which values should be shown directly in a file while debugging. Without this API, VS Code uses a generic method for determining which values to show. This ends up showing many irrelevant values to the user

See https://github.com/microsoft/vscode/issues/119489 for an example of this

Feature Request

We’d like to use the TypeScript server’s language smarts to implement the VS Code inline value api so that only relevant values are shown.

Here’s a potential shape of the API based on the vscode inline value API

// For debugging, we request inline values at a specific location in a file
interface InlineValueRequestArgs extends FileLocationRequestArgs {}

interface InlineValueResponse  extends Response {
   body: InlineValue[];
}

// Support two types of inline values: simple ones that can be looked up by name, and more complex ones
// that require evaluating an expression
type InlineValue = InlineValueVariableLookup | InlineValueEvaluatableExpression;

// A value that can be looked up by name.
// This is mostly just an optimization for a common case of inline values 
interface InlineValueVariableLookup {
    // Span in code of the identifier
    readonly span: TextSpan;

    // Optional variable name to look up. If not specified, uses the name from `span`
    // TODO: Is this needed for TS?
    readonly variableName?: string;
}

// A value which is shown by evaluating a given expression
interface InlineValueEvaluatableExpression {
    // Span in code of the expression
    readonly span: TextSpan;

    // Optional expression to evaluate. If not specified, uses the expression from `span`
    // TODO: Is this needed for TS?
    readonly expression?: string;
}

Behavior

Some notes on how the inline value provider should work (copied from @connor4312):

  • The debugger should handle source maps, so the provider should only have to worry about the requested file

  • Inline values should only be provided in the current and parent scopes

  • Declarations and assignments assignments should evaluate the declared or assigned expression, bar in bar = foo() or foo in function foo() {}

  • Conditional expressions (ternary or if statements) should evaluate the conditional and none of its children, !foo && bar in if (!foo && bar)

  • Property assignments should be evaluated, foo() in { x: foo() }

Here’s a small example of some inline values:

function double(n: number) { // eval('double') -> double()
  return n * 2;
}

let x = 1; // InlineValueVariableLookup for x here

if (x === 2) { // eval(x === 2) -> false
  x *= 2; // this line should NOT be evaluated since it's not the scope or its parents
}

if (x === 1) { // eval(x === 1) -> true
  x *= 2; // InlineValueVariableLookup for x here
  const y = {
    z: x ** 2, // eval(x ** 2) -> 16
  };

  console.log(x); // <-- paused here
}

@connor4312 Is handling this on the VS Code side and should be able to answer any questions regarding this API

/cc @weinand

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:26 (19 by maintainers)

github_iconTop GitHub Comments

2reactions
weinandcommented, Aug 30, 2021

My mental model for this feature request is still what was summarised by @mjbvz in https://github.com/microsoft/TypeScript/issues/43449#issuecomment-849035005:

We are not asking for an Inline value API from TypeScript, but instead we (VS Code) want to implement an “Inline value provider” in VS Code’s TypeScript extension. This “Inline value provider” will do things like: find all interesting variables in a given source line. So the TypeScript extension (which is VS Code specific) functions as a bridge between the language service and the debugger.

But in order to do so, we need access to the TypeScript AST. Since there is no direct TS AST API available, we would like to implement the “Inline value provider” (or some part of it) as a “TS language service plugin” and the VS Code TypeScript extension needs a way to communicate with the “TS language service plugin”.

With this approach an “Inline value provider” is not a public part of the TSServer, but it is private code of the VS Code TypeScript extension that gets injected into the TSServer at runtime. Any concerns about “how inline values are leveraged by the editor and debugger” or “what constraints the debugger has” are addressed in the TypeScript extension, and not in the TSServer.

1reaction
hedietcommented, Aug 30, 2021

It would be really nice if this issue could be solved by addressing this more general issue about enabling VS Code extensions to call into third party TypeScript extensions.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Debugging best practices for REST API consumers
The first step is to isolate the API issue and determine if the issue stems from calling the API, the API itself, processing...
Read more >
Debugger Extension - Visual Studio Code
Debug configuration management. Debug actions for starting/stopping and stepping. Source-, function-, conditional-, inline breakpoints, and log points. Stack ...
Read more >
Display a result of debugger's step as an inline text
With vscode v1.54, see Inline value provider. Today the Show Inline Values feature of VS Code's debugger is based on a generic ...
Read more >
Debugging API calls - DocuSign
Since the code examples are open source, you can easily change them to meet the exact needs of your application. Understand and debug...
Read more >
VS Code tips — Debug: inline values - YouTube
Today's VS Code tip: Debug inline valuesWith ' Debug : Inline Values ', VS Code shows the runtime value of variables directly in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found