1. 前言
想必各位年轻人,都看过idea，visual studio 上刁炸天的调试机制，像这样:
当然你可以实时的计算某一个值，或者监视某一个值:
又或者像visual studio不仅像idea那样可以调试，监视，还可以在调试时，更改某一个值:
更改前
双击更改后
查看输出:
是不是特别吊炸天，这样不就一次调试,可以尝试多次值，而且，更吊的是，还能拖回到之前的代码执行:
回拖
可以看到输出了两次123：
作为一名年轻的程序员，表示非常狂酷炫拽。当然，这是在visual studio上，作为一名前端，当然也想在vscode上干这种事情。所以，接下来隆重介绍vscode-js-debug。
2. vscode-js-debug
当然它的前身 debugger for chrome ，大家肯定也用过，只不过已经要停止维护了:
现在，让我们开始使用这款神器。当然使用也非常简单，以使用webpack的react 17为例，在启动项目后，选择启动调试:
当然在启动调试之前，要将端口改为项目运行端口:
然后打入断点，刷新浏览器，就可以看到停到了我们的断点处:
当然，我们也可以监视某一个值。选中变量a,右键，然后添加到监视:
可以看到左侧监视面板,出现监视值:
当我们使用调试控制台，更改这个值,输入a=1,回车:
可以看到监视面板中a的值发生更改:
这样，就可以在vscode中使用类似idea或者visual studio类似的功能了。
