diff --git a/.vscode/launch.json b/.vscode/launch.json
index cdd27f805b8..91439b9afd8 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,7 +12,8 @@
             "webRoot": "${workspaceFolder}/src",
             "sourceMapPathOverrides": {
                 "webpack:///src/*": "${webRoot}/*"
-            }
+            },
+            "preLaunchTask": "serve"
         },
         {
             "name": "Vue: Firefox",
@@ -20,14 +21,18 @@
             "type": "firefox",
             "url": "http://localhost:9527",
             "webRoot": "${workspaceFolder}/src",
-            "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
+            "pathMappings": [
+                { "url": "webpack:///src/", "path": "${webRoot}/" }
+            ],
+            "preLaunchTask": "serve"
         },
         {
             "name": "Vue: Edge",
             "request": "launch",
             "type": "msedge",
             "url": "http://localhost:9527",
-            "webRoot": "${workspaceFolder}/src"
+            "webRoot": "${workspaceFolder}/src",
+            "preLaunchTask": "serve"
         }
     ]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000000..abc36791094
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,23 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+        "label": "serve",
+        "type": "npm",
+        "script": "dev",
+        "isBackground": true,
+        "problemMatcher": [{
+            "base": "$tsc-watch",
+            "background": {
+                "activeOnStart": true,
+                "beginsPattern": "Starting development server",
+                "endsPattern": "Compiled successfully"
+            }
+        }],
+        "group": {
+            "kind": "build",
+            "isDefault": true
+        }
+    }
+  ]
+}
diff --git a/vue.config.js b/vue.config.js
index 2c669212caa..65f7546cd6c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -52,6 +52,7 @@ module.exports = {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
     name: name,
+    devtool: "source-map",
     resolve: {
       alias: {
         '@': resolve('src'),