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

Posted 2023-02-22

【中文标题】如何在 VSCode (Visual Studio Code) 中同时调试 HTML 和 JavaScript？

【英文标题】：How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

【发布时间】：2015-09-13 06:56:25

【问题描述】：

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

【参考方案1】：

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

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

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

【参考方案2】：

似乎我想做的事情在 VSCode 中是不可能的（但是？）。我目前的解决方案是使用节点包live-server。使用

安装

> npm install -g live-server

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

> live-server

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

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

【参考方案3】：

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

您可以使用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 调试器提供类似的解决方案。

【参考方案4】：

VSCode 将使用节点启动您的应用程序，这意味着您的应用程序正在某个端口上运行。您可以通过访问http://localhost:PORT/ 与您的应用进行交互 如果您在 app.js 中设置断点，则应该在您访问通过节点在本地运行的站点时点击它。 这是一个很好的演示https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

【讨论】：

感谢您的回复，但是我不明白如何使用视频中的信息来运行显示 HTML 文件的 node.js 服务器。我看到的这个和其他指南的问题是，他们只使用 JavaScript 创建整个站点，但我想创建一个简单的 HTML 页面，只添加一点 JavaScript。

【参考方案5】：

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

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

【参考方案6】：

如果你在 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"
        
    ]

【参考方案7】：

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

在 launch.json 中，您只需输入您正在使用的服务器的 url 值，然后您就可以使用编辑器 Visual Studio 代码调试您的 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"
        
    ]