Visual Studio Code - How to display variable values inline during debugging?

Question

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}"
}

Answer 1

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.