add dev tools toggle to side menu

main.js

@@ -534,3 +534,17 @@ ipcMain.handle('get-about-info', () => {
     return { error: err.message };
   }
 });
+
+// Toggle DevTools for the requesting window (main window webContents)
+ipcMain.handle('open-devtools', (event) => {
+  const wc = BrowserWindow.fromWebContents(event.sender);
+  if (!wc) return false;
+  const contents = wc.webContents;
+  if (contents.isDevToolsOpened()) {
+    contents.closeDevTools();
+  } else {
+  // Open docked inside the main window (bottom). Other options: 'right', 'undocked', 'detach'
+  contents.openDevTools({ mode: 'bottom' });
+  }
+  return contents.isDevToolsOpened();
+});

preload.js

@@ -47,6 +47,14 @@ const electronAPI = {
     } catch (err) {
       console.error('IPC removeListener error:', err);
     }
+  },
+  toggleDevTools: () => {
+    try {
+      return ipcRenderer.invoke('open-devtools');
+    } catch (err) {
+      console.error('IPC open-devtools error:', err);
+      return Promise.reject(err);
+    }
   }
 };
 

renderer/index.html

@@ -46,6 +46,7 @@
         <div id="menu-popup" class="hidden">
           <button onclick="openSettings()">Settings</button>
           <!-- You can add more options here -->
+          <button id="devtools-btn" title="Open / Close Developer Tools">Toggle Developer Tools</button>
           <div class="zoom-controls">
             <button id="zoom-out-btn">-</button>
             <span id="zoom-percent">100%</span>

renderer/script.js

@@ -843,6 +843,14 @@ window.addEventListener('DOMContentLoaded', () => {
   zoomInBtn.addEventListener('click', zoomIn);
   zoomOutBtn.addEventListener('click', zoomOut);
 
+  // DevTools toggle button
+  const devtoolsBtn = document.getElementById('devtools-btn');
+  if (devtoolsBtn && window.electronAPI && window.electronAPI.toggleDevTools) {
+    devtoolsBtn.addEventListener('click', () => {
+      window.electronAPI.toggleDevTools();
+    });
+  }
+
   // wire up back/forward buttons
   const backBtn = document.querySelector('.nav-left button:nth-child(1)');
   const forwardBtn = document.querySelector('.nav-left button:nth-child(2)');
@@ -900,6 +908,17 @@ window.addEventListener('DOMContentLoaded', () => {
   // });
 });
 
+// Global keyboard shortcut for DevTools (Ctrl+Shift+I or F12)
+document.addEventListener('keydown', (e) => {
+  const isMod = (e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'I' || e.key === 'i');
+  if (isMod || e.key === 'F12') {
+    if (window.electronAPI && window.electronAPI.toggleDevTools) {
+      window.electronAPI.toggleDevTools();
+      e.preventDefault();
+    }
+  }
+});
+
 // zoom helpers
 function updateZoomUI() {
   const zp = document.getElementById('zoom-percent');