logo标签列表

如何在VSCode（Visual Studio Code）中同时调试HTML和JavaScript？

debuggingvisual-studio-code
61

我希望在按下F5后，能够运行和调试一个带有Javascript文件的HTML页面，在一个迷你网站中。

如何配置VSCode以在浏览器中打开HTML页面，并允许我在与浏览器中的应用程序交互时设置断点，从而在Javascript文件中触发断点？

在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文件，但我不明白如何与应用程序交互。

7个回答
27

现在，Microsoft发布的一个扩展程序可以通过Chrome远程调试功能，在vscode中调试Chrome网页。

Chrome调试器(Debugger for Chrome)

页面上显示了两种调试模式:启动(Launch)和附加(Attach)。也许是因为我没有运行服务器，所以我只能使用“附加”模式。该扩展程序拥有所有重要的调试工具：本地变量、断点、控制台、调用堆栈。

重新审视vscode的另一个原因是它现在支持ECMAScript 6的IntelliSense，这显示了其他“IntelliSense类似”的解决方案（如SublimeCodeIntel或WebStorm的最新版本）中看不到的方法。

21

在VSCode中似乎无法实现我想要做的事情（还没有？）。目前我的解决方案是使用node包live-server。安装方法如下：

> npm install -g live-server

打开 VSCode，右键单击项目根文件夹中的任何文件，选择“在控制台中打开”。然后输入

> live-server

使用你的项目作为根文件夹启动服务器。Live-server将打开您的默认浏览器，还会监视您的项目文件夹是否有任何文件更改，并在您进行任何更改时重新加载HTML页面。

需要提到的是，我使用live-server解决方案不能让我在VSCode中调试我的应用程序，只能在浏览器中运行它。我在Chrome中进行调试。

13

像其他人所说，你需要安装这个：

你可以使用https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

如果你没有运行本地主机而是一些HTML和JavaScript，则可以使用这个launch.json代码。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch index.html",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html"
    }
]

}

请注意，如果您更喜欢使用Firefox调试器，则有一个类似的解决方案。 - aamarks
2

我不想为了一些HTML和JavaScript而运行一个服务器（与类似的示例不同），这个VS Code启动配置与“Debugger for Chrome”扩展在我的Windows 10机器上解决了问题：

最初的回答

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }
2
2
谢谢您的回复，但我不明白如何使用视频中的信息来运行显示HTML文件的node.js服务器。我对此及其他指南的问题在于它们仅使用JavaScript创建整个站点，但我想创建一个只添加了一些JavaScript的简单HTML页面。 - Bjarte Aune Olsen
1

如果您在路径中有#，例如C:\C#\mypage.htm，您可以使用FF和ex. fileBasename或类似的变量 - 在Chrome中不起作用：

.vscode\launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch HTML file",
            "type": "firefox",
            "request": "launch",
            "file": "C:/C%23/${fileBasename}"
         }
    ]
}

或者使用Node.js测试完整路径：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}
-2

您可以使用https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

在 launch.json 文件中，您只需输入正在使用的服务器的 URL 值，然后就可以使用您的编辑器 Visual Studio Code 调试您的 HTML + JS 了。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接