前端之旅一：vscode調試web配置

vscode調試web配置

第一步：安裝vscode，並啟動（vscode的安裝包自行到其官網上下載）

 

 

 

 

 

第二步：在vscode上安裝chrome插件

 

 

 

第三步：配置，啟動調試

 

配置信息

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            // "type": "chrome",
            // "request": "launch",
            // "name": "Launch Chrome against localhost",
            // "url": "http://localhost:8080",
            // "webRoot": "${workspaceFolder}"
            
                "name": "使用本機 Chrome 調試",
                "type": "chrome",
                "request": "launch",
                 "file": "${workspaceRoot}/index.html",
            //  "url": "http://website.com/index.html", //使用外部服務器時,請注釋掉 file, 改用 url, 並將 useBuildInServer 設置為 false "http://website.com/index.html
                "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑
                "sourceMaps": true,
                "webRoot": "${workspaceRoot}",
            //  "preLaunchTask":"build",
                "userDataDir":"${tmpdir}",
                "port":5558
            
        }
    ]
}

　　

並且調試時選擇使用本機Chrome調試

 

 

調試啟動效果