debugging之如何在 VSCode (Visual Studio Code) 中一起调试 HTML 和 JavaScript

我想在按下 F5 时在迷你网站中运行和调试带有 javascript 文件的 html 页面。

如何配置 VSCode 在浏览器中打开 html 页面，然后允许我在 javescript 文件中设置断点，该断点将由我在浏览器中与应用程序的交互触发？

在 Visual Studio 中，这将“正常工作”，因为它会启动自己的 Web 服务器 IIS Express。在 VSCode 中，我不确定如何设置 launch.json 和/或tasks.json 来创建一个简单的node.js Web 服务器并提供index.html。

我见过一些调试 javascript 应用程序的示例，例如这个 launch.json:

{ 
    "version": "0.1.0", 
    "configurations": [ 
        { 
            "name": "Launch Bjarte's app", 
            "type": "node", 
            "program": "app.js", 
            "stopOnEntry": true, 
            "args": [], 
            "cwd": ".", 
            "runtimeExecutable": null, 
            "runtimeArguments": [], 
            "env": {}, 
            "sourceMaps": false 
        }, 
        { 
            "name": "Attach", 
            "type": "node", 
            "address": "localhost", 
            "port": 5858, 
            "sourceMaps": false 
        } 
    ] 
} 

这将运行 js 文件，但我不明白如何与应用程序交互。

请您参考如下方法:

现在可以使用微软发布的扩展通过 Chrome 远程调试在 vscode 中调试 Chrome 网页。 Debugger for Chrome

正如您从该页面中看到的，有两种 Debug模式:Launch 和 Attach。我只设法使用附加模式，可能是因为我没有运行服务器。该扩展具有所有重要的调试工具功能:局部变量、断点、控制台、调用堆栈。

重新访问 vscode 的另一个原因是它现在支持 ECMAScript 6 的 IntelliSense，它显示了我尝试过的其他“类似 IntelliSense”解决方案中不可见的方法，例如 SublimeCodeIntel 或最新版本的 WebStorm。