Vue.js Debugging in VS Code Extended

README.md

Vue.js Debugging in VS Code Extended

https://vuejs.org/v2/cookbook/debugging-in-vscode.html

Features

• Add preLaunchTask to launch config
• Add problemMatcher for npm: serve task

launch.json

{
    // 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": [
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
                "webpack://?:*/*": "${workspaceFolder}/*"
            },
            "preLaunchTask": "npm: serve"
        },
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
                "webpack://?:*/*": "${workspaceFolder}/*"
            },
            "preLaunchTask": "npm: serve"
        },
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Launch Firefox",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [
                { "url": "webpack:///src/", "path": "${webRoot}/" }
            ],
            "preLaunchTask": "npm: serve"
        },

    ]
}

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "serve",
			"label": "npm: serve",
			"detail": "vue-cli-service serve",
			"isBackground": true,
			"problemMatcher": {
				"owner": "vue-cli",
				"fileLocation": "absolute",
				"source": "vue-cli-service",
				"background": {
					"activeOnStart": true,
					"beginsPattern": "INFO\\s+Starting development server",
					"endsPattern": " DONE\\s+Compiled successfully.*$"
				},
				"pattern": [
					{
						"regexp": "^(error|warning) in (.*)\\(.*$",
						"severity": 1,
						"file": 2
					},
					{
						"regexp": "^([0-9]+):([0-9]+) ([\\s\\S]*)$",
						"line": 1,
						"column": 2,
						"message": 3
					}
				]
			}
		}
	]
}