前端 - vscode调试不完全指南_webroot": "${workspacefolder}

作者：从前慢现在也慢 | 2024-08-12 01:30:42

踩

webroot": "${workspacefolder}

1.应用场景

配置vscode, 用于前端开发. 提高开发效率.

2.学习/操作

1. js调试

1.安装插件[针对浏览器] 这里为Chrome.

输入debugger for chrome, 点击安装即可. [网络方面可能需要能访问外网]

2.配置 .vscode/launch.json文件

要使用 vscode 的调试功能，首先就得配置 .vscode/launch.json 文件

配置参考格式如下: [下面是例子] 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

这里实验为:

{

    // 使用 IntelliSense 了解相关属性。

    // 悬停以查看现有属性的描述。

    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:8001/front-end/mypage.html",

            "webRoot": "${workspaceFolder}"

        }

    ]

}