Visual Studio 代码调试客户端 JavaScript

Visual Studio Code debugging client side JavaScript

我正在为 javascript 项目使用 Visual Studio 代码。您可以设置断点并单步执行和调试在 nodejs 中运行的代码。有没有什么办法允许客户端、浏览器 运行 代码的断点和调试?

通过 console.log 进行调试很快就变老了。

您应该使用所有现代浏览器都有的开发者工具 (F12)。 我更喜欢 chrome 因为使用 workspaces 并且您可以在浏览器中内联编辑您的代码。

对于 Chrome 中的调试,有 Visual Studio Code: Debugger for Chrome extension. You can find this extension in the marketplace, search for debugger as told in the debugging manual。不幸的是(目前)不支持其他浏览器,

调试 node.js 开箱即用,请参阅上面的调试手册或 John Papa 的 blog post

至少在我看来,同时调试客户端和服务器(正如 Phil 评论的那样)是不可能的,因为您需要有两种不同的启动配置,抱歉。

通过在 chorme 浏览器中打开您的项目并使用 chrome DevTools。 你可以随意调试它。

步骤:

  • 打开您的项目(url)。

  • 打开 DevTools (F12)

  • 选择 "Elements" 并选择元素

  • 您可以在右侧面板上看到"Event Listeners",Select您需要什么

  • 然后,您可以右击您的活动,Select "Show function defination"

  • 尽情享受吧!

如果你的意思是调试 Nodejs,据我所知,有一个名为 "debuger"?

的 npm 包

另一种技术是使用 Visual Studio 代码:Chrome 扩展的调试器。为 node.js 保存 launch.json 配置的内容并将其删除。然后创建 Chrome launch.json。将两者结合起来,您可以在代码中调试服务器或客户端(但不能同时调试)。

要调试客户端,服务器必须是 运行,因此在命令提示符下使用启动服务器的 "node" 命令。在代码中启动 Chrome 调试器并调试客户端。