Visual Studio Code - 如何在调试期间内联显示变量值？

Question

当我在 VS 代码或 Visual Studio 代码中调试 Javascript 代码时，我希望它在代码旁边显示变量的值。如何让 VS 代码做到这一点？

理想情况下，不想将鼠标指针变量悬停在每个变量上只是为了查看其值，尤其是当变量的值仅在屏幕上占据几个字符时。还有其他 IDE，其调试器旁边会显示一个变量当前值。

例子 ：

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

Debug: Inline Values在您的设置中启用。

1. 打开设置

2. 搜索“调试”

3. 导航到功能 > 调试

4. 更改调试的设置：内联值

   

或更改您的settings.json文件：

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

或者，有些人出于同样的目的使用Quokka 扩展。

Answer 2

此外，您可以添加名为Quokka的 VS Code 扩展，它允许您预览给定变量/对象的某些值，而无需进行调试。 https://quokkajs.com/whatsnew/?referrer=qsp