The front end of a trip: vscode debugging web configuration

vscode debugging web configuration

Step 1: Install vscode, and start (vscode installation package to its own official online download)

 

 

 

 

 

Step 2: Install chrome plug-in on vscode

 

 

 

The third step: configuration, start the debugger

 

Configuration information

{
    // 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 using the machine debugging"
                "type": "chrome",
                "request": "launch",
                 "file": "${workspaceRoot}/index.html",
            // "url": "http://website.com/index.html", // when using an external server, comment out the file, use url, and useBuildInServer set to false "http://website.com /index.html
                "RuntimeExecutable": "C: \\ Program Files (x86) \\ Google \\ Chrome \\ Application \\ chrome.exe", // into your Chrome installation path
                "sourceMaps": true,
                "webRoot": "${workspaceRoot}",
            //  "preLaunchTask":"build",
                "userDataDir":"${tmpdir}",
                "port":5558
            
        }
    ]
}

　　

And choose to use the native debugger for debugging Chrome

 

 

Debugging start effect