如何在 VSCode (Visual Studio Code) 中一起调试 HTML 和 JavaScript? [英] How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

问题描述

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

I want to run and debug an html page with a javascript file in a mini website when I hit F5.

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

How do I configure VSCode to open the html page in the browser and then allow me to set breakpoints in the javescript file which will be triggered by my interaction with the app in the browser?

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

In Visual Studio this would "just work", because it fires up its own web server, IIS Express. In VSCode I'm not sure how I set up launch.json and/or tasks.json to create a simple node.js web server and serve index.html.

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

I have seen some examples of debugging javascript apps, for example this 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 文件，但我不明白如何与应用交互.

This will run the js file, but I don't understand how I can interact with the app.

推荐答案

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

It is now possible to debug Chrome web pages in vscode via Chrome remote debugging with a extension released by Microsoft. Debugger for Chrome

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

As you can see from that page there are two modes of debugging, Launch and Attach. I only managed to use the Attach mode, probably because i don't have a server running. This extension has all important debug tools functional: local variables, breakpoints, console, call stack.

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

Another reason to revisit vscode is that it now has IntelliSense support for ECMAScript 6, which displays methods not visible in other "IntelliSense like" solutions I've tried, like SublimeCodeIntel or the latest version of WebStorm.

这篇关于如何在 VSCode (Visual Studio Code) 中一起调试 HTML 和 JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！