Add button to open browser devtools

src/main/main.ts

@@ -89,6 +89,10 @@ const createWindow = async () => {
     mainWindow?.webContents.openDevTools();
   });
 
+  ipcMain.on('window-dev-tools', () => {
+    mainWindow?.webContents.openDevTools();
+  });
+
   ipcMain.on('window-maximize', () => {
     mainWindow?.maximize();
   });

src/main/preload/browser.ts

@@ -13,7 +13,12 @@ const unmaximize = () => {
   ipcRenderer.send('window-unmaximize');
 };
 
+const devtools = () => {
+  ipcRenderer.send('window-dev-tools');
+};
+
 export const browser = {
+  devtools,
   exit,
   maximize,
   minimize,

src/renderer/features/titlebar/components/app-menu.tsx

@@ -1,6 +1,13 @@
 import { Group } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
-import { RiLockLine, RiServerFill, RiEdit2Fill, RiSettings3Fill } from 'react-icons/ri';
+import isElectron from 'is-electron';
+import {
+  RiLockLine,
+  RiServerFill,
+  RiEdit2Fill,
+  RiSettings3Fill,
+  RiWindowFill,
+} from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { DropdownMenu, Text } from '/@/renderer/components';
 import { ServerList } from '/@/renderer/features/servers';
@@ -10,6 +17,8 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useServerList, useAuthStoreActions } from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
 
+const browser = isElectron() ? window.electron.browser : null;
+
 export const AppMenu = () => {
   const navigate = useNavigate();
   const currentServer = useCurrentServer();
@@ -55,6 +64,12 @@ export const AppMenu = () => {
     });
   };
 
+  const handleBrowserDevTools = () => {
+    browser?.devtools();
+  };
+
+  const showBrowserDevToolsButton = isElectron();
+
   return (
     <>
       <DropdownMenu.Label>Select a server</DropdownMenu.Label>
@@ -90,6 +105,17 @@ export const AppMenu = () => {
       >
         Settings
       </DropdownMenu.Item>
+      {showBrowserDevToolsButton && (
+        <>
+          <DropdownMenu.Divider />
+          <DropdownMenu.Item
+            icon={<RiWindowFill />}
+            onClick={handleBrowserDevTools}
+          >
+            Open browser devtools
+          </DropdownMenu.Item>
+        </>
+      )}
     </>
   );
 };