vscode 如何查看运行信息

niuhe 插件官方教程已经上线, 请访问: http://niuhe.zuxing.net

先来总结一下: vscode 编辑器本质上是一个运行在本地的 chrome webview 程序

在开发 niuhe 插件 的过程中, 有时需要打印变量信息进行调试, 比如使用console.log(entry); 查看变量enter 的值，以此了解程序的运行情况，在 debug 模式下， 这些输出信息可以在调试控制台上清晰看到，如下截图所示:


然而，当插件在非调试模式下运行时，查看日志信息就成了一个难题。在网上搜索相关方法，却很难找到有效的解决方案。此前，公司 CTO 在使用 VS Code 的 Lua Debug 插件调试 Lua 脚本时，就遇到了编辑器莫名卡死的情况。重启编辑器也无济于事，更换项目目录后，问题又偶尔自行恢复。在这种情况下，想要查看插件运行日志来定位问题，却遍寻无果，只能暂时搁置。

转机

事情出现转机是在一次调试 niuhe 插件 的过程中。当时，编辑器左下角弹出了一个警告提示框（此处截图仅作展示用途）

出于好奇，点击该提示框后 vscode 的 DevTools 面板被打开，这一发现令人惊喜：原来 VS Code 编辑器竟然基于 Chrome 浏览器运行！DevTools 面板的打开入口并非难以寻觅，我们可以通过 帮助 -> 切换开发人员工具 来打开它。有了 DevTools 面板，之前 Lua Debug 插件的问题也就有了解决的方向。

联想和展望

回顾一下，在 VS Code 编辑器出现之前，Web IDE 的概念并不普及。而在 VS Code 问世后，各种 Web IDE 如雨后春笋般涌现。当时我略感惊奇，Web IDE 开发工程庞大，为何各大公司愿意投入大量人力去开发体验似乎并不出色的 Web IDE。在发现 VS Code 的 DevTools 面板后，这个疑问也就有了答案：各大公司推出的 Web IDE 实际上都是 VS Code 的线上版本，而 VS Code 本身就是运行在 Chrome WebView 套壳内的本地 Web 程序。

当下，Cursor、Trae 等 AI IDE 火爆异常。实际上，它们都是基于 VS Code 进行开发的。这也就意味着，能在 VS Code 上安装使用的插件，在 Cursor 和 Trae 中同样适用。

这些 AI IDE 所具备的 AI 功能，在 VS Code 上借助现有的插件，比如 Continue 等，也能够实现与之类似的 AI 编程功能。此外，MarsCode AI也即将推出 Builder 功能，届时它将拥有与 Cursor 相同的功能。

VS Code 为开发者提供了极为出色的基础，凭借其开放性和扩展性，吸引了众多开发者参与插件开发，构建起了一个丰富多样的生态系统，有力地推动了相关技术的发展和创新。