37

When I debug Javascript code in VS code or visual studio code, I would like it to show me the values of the variables alongside the code. How to make VS code do that ?

Ideally, don't want to hover my mouse pointer variable over each variable just to see its value, especially if the variable's value occupies only few characters on screen. There are other IDEs whose debuggers show a variables current value next to it.

Example :

var array = [1,2,3,4,5,6,7];

for(var i = 2; i < 5; i++){  "i : 3"
    array.splice(i,1); "array : {1,2, 4, 5,6,7}"
}
Improve this question

2 Answers 2

Reset to default
63

Enable Debug: Inline Values in your Settings.

  1. Open Settings
  2. Search for "debug"
  3. Navigate to Features > Debug
  4. Change the setting for Debug: Inline Values

Options are on, off or auto.

Or change in your settings.json file:

{
  // Show variable values inline in editor while debugging.
  "debug.inlineValues": "on",  
}

Alternatively, some people use the Quokka extension for the same purpose.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks. The debug setting works. There is issue though, the debugger is replacing a big part of my array with three dots. How do I make it display the full array ? The array has only 7, single digit numbers. So, I think that the debugger should not truncate the array.
I see what you mean. Hmmm... I'll look around but I am not hopeful.
I looked through the github issues and could find no mention of it - seems pretty unfortunate. You could file an issue about it.
FYI, as of 2022, the value should be true rather than "on"
@npit Not sure which setting you were lookng at, debug.inlineValues is still on/off/auto.
|
9

Additionally, you could add the VS Code extension called Quokka, that allows you to preview some values for the given variable/object, without having to debug. https://quokkajs.com/whatsnew/?referrer=qsp

Improve this answer

2 Comments

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
+1 for this. I disagree with the negative feedback from the previous comment. You posted the name of the extension and a brief description of the functionality, which gives users enough context to search the plugin if the link doesn't work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.