fix(electron): devtools open in detach mode (#8200)

fix AF-1380

Author: pengx17

packages/frontend/electron/src/main/windows-manager/main-window.ts

@@ -258,7 +258,9 @@ export async function openUrlInHiddenWindow(urlObj: URL) {
   });
 
   if (environment.isDebug) {
-    win.webContents.openDevTools();
+    win.webContents.openDevTools({
+      mode: 'detach',
+    });
   }
 
   win.on('close', e => {

packages/frontend/electron/src/main/windows-manager/tab-views.ts

@@ -815,7 +815,9 @@ export class WebContentViewsManager {
 
       view.webContents.loadURL(shellViewUrl).catch(logger.error);
       if (isDev) {
-        view.webContents.openDevTools();
+        view.webContents.openDevTools({
+          mode: 'detach',
+        });
       }
     }
 
@@ -999,13 +1001,17 @@ export const showDevTools = (id?: string) => {
   getCustomThemeWindow()
     .then(w => {
       if (w && w.isFocused()) {
-        w.webContents.openDevTools();
+        w.webContents.openDevTools({
+          mode: 'detach',
+        });
       } else {
         const view = id
           ? WebContentViewsManager.instance.getViewById(id)
           : WebContentViewsManager.instance.activeWorkbenchView;
         if (view) {
-          view.webContents.openDevTools();
+          view.webContents.openDevTools({
+            mode: 'detach',
+          });
         }
       }
     })