ViteでビルドをしながらVSCodeでDebugを行えるようにする

.vscode/launch.template.json

@@ -0,0 +1,47 @@
+{
+    // 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": "Attach to Render Process",
+            // NOTE: background.tsで指定しているremote-debugging-port
+            "port": 13579,
+            "request": "attach",
+            "type": "chrome",
+            "webRoot": "${workspaceFolder}",
+            "timeout": 20000, // 20 * 1000 ms程度あればビルド時間は間に合うはず
+        },
+        {
+            "name": "Launch Electron Main Process via NPM",
+            "request": "launch",
+            "runtimeArgs": [
+                "run",
+                "electron:serve"
+            ],
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+        {
+            "name": "Attach by Process ID",
+            // .bin viteを指定するとElectronのMain Processのデバッグが可能
+            "processId": "${command:PickProcess}",
+            "request": "attach",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+    ],
+    "compounds": [
+        {
+            "name": "Launch Electron Main/Render",
+            "configurations": ["Attach to Render Process", "Launch Electron Main Process via NPM"],
+            "stopAll": true
+        }
+    ]
+}

src/background.ts

@@ -51,6 +51,10 @@ type SingleInstanceLockData = {
 const isDevelopment = import.meta.env.DEV;
 const isTest = import.meta.env.MODE === "test";
 
+if (isDevelopment) {
+  app.commandLine.appendSwitch("remote-debugging-port", "13579");
+}
+
 let suffix = "";
 if (isTest) {
   suffix = "-test";

vite.config.ts

@@ -12,12 +12,14 @@ import checker from "vite-plugin-checker";
 rmSync(path.resolve(__dirname, "dist"), { recursive: true, force: true });
 
 const isElectron = process.env.VITE_IS_ELECTRON === "true";
+const isDevelopment = process.env.NODE_ENV === "development";
 
 const config: UserConfig = {
   root: path.resolve(__dirname, "src"),
   build: {
     outDir: path.resolve(__dirname, "dist"),
     chunkSizeWarningLimit: 10000,
+    sourcemap: isDevelopment ? "inline" : false,
   },
   publicDir: path.resolve(__dirname, "public"),
   css: {
@@ -66,6 +68,7 @@ const config: UserConfig = {
           plugins: [tsconfigPaths({ root: __dirname })],
           build: {
             outDir: path.resolve(__dirname, "dist"),
+            sourcemap: isDevelopment ? "inline" : false,
           },
         },
       }),