如何在VSCode（Visual Studio代码）中一起调试HTML和JavaScript？

比耶特·奥恩·奥尔森

我在VSCode中有一个非常简单的项目，它是一个index.html文件，链接到单个app.js文件。

当我按F5键时，我想运行和调试此微型网站。

如何配置VSCode在浏览器中打开index.html，然后允许我在app.js中设置断点，该断点将由我与浏览器中的应用交互而触发？

在Visual Studio中，这将“正常工作”，因为它会启动自己的Web服务器IIS Express。在VSCode中，我不确定如何设置launch.json和/或task.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文件，但我不知道如何与该应用进行交互。

弗拉德·马科维（Vlad Macovei）

现在可以通过Microsoft发行的扩展程序通过Chrome远程调试在vscode中调试Chrome网页。Chrome调试器

从该页面可以看到，有两种调试模式：启动和附加。我只设法使用了附加模式，可能是因为我没有服务器在运行。该扩展具有所有重要的调试工具功能：局部变量，断点，控制台，调用堆栈。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。