可视化工作室代码 - 如何在调试期间以内联方式显示变量值？

Question

当我在 VS 代码或可视化工作室代码中调试 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. 更改“调试：内联值”的设置

选项包括 、 或 。onoffauto

或更改您的文件：settings.json

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

或者，有些人出于相同的目的使用短尾矮袋鼠扩展。

Answer 2

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