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

Question

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

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

在 Visual Studio 这将“正常工作”，因为它启动了自己的 Web 服务器 IIS Express。在 VSCode 中，我不确定如何设置 launch.json and/or tasks.json 来创建一个简单的 node.js 网络服务器并为 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 文件，但我不明白如何与应用程序交互。

Answer 1

VSCode 将使用节点启动您的应用程序，这意味着您的应用程序在某些端口上运行。您可以通过访问 http://localhost:PORT/ 与您的应用互动如果您在 app.js 中设置了一个断点，那么一旦您通过节点访问您的运行本地站点，它就会被触发。这是一个不错的演示 https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

Answer 2

看来我想做的事情在 VSCode 中是不可能的（还没有？）。我目前的解决方案是使用节点包 live-server。使用

安装

> npm install -g live-server

然后打开 VSCode，右键单击项目根文件夹中的任何文件，然后 select "Open in Console"。然后输入

> live-server

以您的项目作为根文件夹启动服务器。 Live-server 将打开您的默认浏览器并监控您的项目文件夹是否有任何文件更改，并在您每次进行任何更改时重新加载 html 页面。

我应该提一下，我使用 live-server 的解决方案不允许我在 VSCode 中调试我的应用程序，只能在运行浏览器。我正在 Chrome.

调试

Answer 3

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

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

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

Answer 4

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

在 launch.json 中你只需要 pu 你正在使用的服务器的 url 值然后你可以用你的编辑器调试你的 html + js visual studio代码

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Answer 5

就像其他人说的那样你安装这个：

You can use 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"
    }
]

}

Answer 6

我不想运行一个服务器只是为了一些 HTML 和 JavaScript（与类似的例子不同）这个 VS 代码启动配置以及 'Debugger for Chrome' 扩展在我的 Windows 10 机器上成功了：

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }

Answer 7

如果你在 C:\C#\mypage.htm 这样的路径中有#，你可以使用 FF & ex。 fileBasename 或 Similar variable - 在 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}"
        }
    ]
}

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

How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

debugging

visual-studio-code