feat: use `Session` to track IPCs and improve UI #268

erickzhao · 2025-07-04T16:37:49Z

With Prettier 3.6, we can enable the --experimental-cli flag for a performance boost.

ref electron/website#841

Done, added the linting scripts here - 1102a77

Edit: Ran the linters in this commit - 56da3ae

erickzhao · 2025-07-04T16:42:26Z

It would be good to put an explainer in the PR body to explain why we don't need to keep the background script alive using this hack anymore.

Added a bullet point explaining the change.

-Original file line number
+Diff line change
@@ -1,4 +1,5 @@
     {
       "singleQuote": true,
-      "printWidth": 100
+      "printWidth": 100,
+      "plugins": ["prettier-plugin-tailwindcss"]
     }

-Original file line number
+Diff line change
@@ -1,35 +1,43 @@
     # Devtron
     > [!NOTE]
     > This project is under development and subject to change.
     ## Building and Development
     - Clone the repository to your local machine
     - Run `npm install` to install dependencies
     - Run `npm link` to link the package globally
     - Run `npm run build` to build the project
     #### Configuring an Electron App to use Devtron
     - In your Electron app run `npm link @electron/devtron` to link the Devtron package
     - In your Electron app's `main.js` (or other relevant file) add the following code to load Devtron:
     ```js
     // main.js
-    const { devtron } = require('@electron/devtron')
-    const { monitorMain } = require('@electron/devtron/monitorMain')
-    monitorMain()
+    const { devtron } = require('@electron/devtron');
+    // or import { devtron } from '@electron/devtron'
     // function createWindow() {...}
     app.whenReady().then(() => {
-      devtron.install()
+      devtron.install();
       // ...
-    })
+    });
     ```
     - In your Electron app's `preload.js` (or other relevant file) add the following code to load Devtron:
     ```js
     // preload.js
-    const { monitorRenderer } = require('@electron/devtron/monitorRenderer')
-    monitorRenderer()
+    const { monitorRenderer } = require('@electron/devtron/monitorRenderer');
+    // or import { monitorRenderer } from '@electron/devtron/monitorRenderer'
+    monitorRenderer();
     ```
     If Devtron is installed correctly, it should appear as a tab in the Developer Tools of your Electron app.
-    ![image](https://i.ibb.co/C3WgrHKG/Screenshot-2025-06-09-171027.png)
+    <img src="https://github.com/user-attachments/assets/0f278b54-50fe-4116-9317-9c1525bf872b" width="800">

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,6 @@ export default tseslint.config( @@
       react.configs.flat.recommended,
       react.configs.flat['jsx-runtime'],
       reactHooks.configs['recommended-latest'],
       {
         files: ['**/*.{js,jsx,ts,tsx}'],
         plugins: {
@@ Expand All / @@ -37,6 +36,8 @@ export default tseslint.config( @@
             },
           },
         },
+      },
+      {
         settings: {
           react: {
             version: 'detect',
@@ Expand All / @@ -45,5 +46,5 @@ export default tseslint.config( @@
       },
       {
         ignores: ['dist', 'build', 'node_modules'],
-      }
+      },
     );

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    import type { IpcEventData } from './src/types/shared';
+    declare global {
+      function addIpcEvent(data: IpcEventData): void;
+    }
+    export {};

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,15 +8,15 @@ @@
           "require": "./dist/cjs/index.cjs",
           "types": "./dist/types/index.d.ts"
         },
-        "./monitorMain": {
-          "import": "./dist/mjs/electron-main-tracker.mjs",
-          "require": "./dist/cjs/electron-main-tracker.cjs",
-          "types": "./dist/types/lib/electron-main-tracker.d.ts"
-        },
         "./monitorRenderer": {
           "import": "./dist/mjs/electron-renderer-tracker.mjs",
           "require": "./dist/cjs/electron-renderer-tracker.cjs",
           "types": "./dist/types/lib/electron-renderer-tracker.d.ts"
+        },
+        "./service-worker-preload": {
+          "import": "./dist/mjs/service-worker-preload.mjs",
+          "require": "./dist/cjs/service-worker-preload.cjs",
+          "types": "./dist/types/lib/service-worker-preload.d.ts"
         }
       },
       "scripts": {
@@ Expand All / @@ -25,7 +25,10 @@ @@
         "build:types": "tsc -b ./tsconfig.types.json",
         "build:node": "webpack --config webpack.node.config.ts",
         "build": "npm run clean && npm run build:node && npm run build:types && npm run build:browser",
-        "dev": "webpack serve --config webpack.dev.config.ts"
+        "dev": "webpack serve --config webpack.dev.config.ts",
+        "lint:eslint": "npx eslint -c eslint.config.mjs",
+        "lint": "npx tsc --noEmit && prettier . --check --experimental-cli",
+        "lint:fix": "npx prettier . --write --experimental-cli && npm run lint:eslint --fix"
       },
       "author": "Hitarth Rajput",
       "license": "MIT",
@@ Expand Down Expand Up / @@ -60,6 +63,8 @@ @@
         "postcss": "^8.5.4",
         "postcss-loader": "^8.1.1",
         "postcss-preset-env": "^10.2.1",
+        "prettier": "^3.6.2",
+        "prettier-plugin-tailwindcss": "^0.6.13",
         "style-loader": "^4.0.0",
         "tailwindcss": "^3.4.17",
         "ts-loader": "^9.5.2",
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use `Session` to track IPCs and improve UI #268

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

erickzhao Jul 4, 2025

Uh oh!

hitarth-gg Jul 7, 2025 •

edited

Loading

Uh oh!

erickzhao Jul 4, 2025

Uh oh!

hitarth-gg Jul 6, 2025

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,6 @@ const PORT_NAME = { @@
     const MSG_TYPE = {
       PING: 'ping',
       PONG: 'pong',
-      KEEP_ALIVE: 'keep-alive',
       GET_ALL_EVENTS: 'get-all-events',
       RENDER_EVENT: 'render-event',
       CLEAR_EVENTS: 'clear-events',
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,17 +7,6 @@ import type { @@
       MessagePanel,
     } from '../../types/shared';
-    /* ------------------------------------------------------ */
-    /**
-     * This is used to keep the background script alive. More testing is needed to determine whether it is needed or not
-     * since other KEEP_ALIVE methods are already implemented in the content script and panel script.
-     * Code copied from: https://stackoverflow.com/questions/66618136/persistent-service-worker-in-chrome-extension
-     */
-    const keepAlive = () => setInterval(chrome.runtime.getPlatformInfo, 20e3);
-    chrome.runtime.onStartup.addListener(keepAlive);
-    keepAlive();
-    /* ------------------------------------------------------ */
     const MAX_EVENTS = 1000;
     const ipcEvents = new Denque<IpcEventDataIndexed>();
@@ Expand All / @@ -34,8 +23,6 @@ function handlePanelMessage(message: MessagePanel): void { @@
         case MSG_TYPE.PING:
           connections.panel?.postMessage({ type: MSG_TYPE.PONG }); // (mimics `port.postMessage(...)`)
           break;
-        case MSG_TYPE.KEEP_ALIVE:
-          break;
         case MSG_TYPE.GET_ALL_EVENTS:
           for (let i = 0; i < ipcEvents.length; i++) {
             const event = ipcEvents.get(i);
@@ Expand All / @@ -49,7 +36,7 @@ function handlePanelMessage(message: MessagePanel): void { @@
           throw new Error(
             `Devtron - Background script: Unknown message type from panel: ${
               (message as MessagePanel).type
-            }`
+            }`,
           );
       }
     }
@@ Expand All @@
         case MSG_TYPE.ADD_IPC_EVENT:
           addIpcEvent(message.event);
           break;
-        case MSG_TYPE.KEEP_ALIVE:
-          break;
       }
     }
@@ Expand All / @@ -102,3 +87,5 @@ chrome.runtime.onConnect.addListener((port) => { @@
         });
       }
     });
+    (globalThis as any).addIpcEvent = addIpcEvent;

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,19 +11,6 @@ function ensurePort() { @@
         });
       }
     }
-    function startKeepAlivePing() {
-      setInterval(() => {
-        ensurePort();
-        if (port) {
-          port.postMessage({
-            type: MSG_TYPE.KEEP_ALIVE,
-          } satisfies MessageContentScript);
-        }
-      }, 10 * 1000); // 10 seconds
-    }
-    // Start the keep-alive ping
-    startKeepAlivePing();
     if (!(window as any).__DEVTRON_CONTENT_SCRIPT_MSG_LISTENER__) {
       window.addEventListener('message', (event) => {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,9 +2,23 @@ @@
     @tailwind components;
     @tailwind utilities;
+    .dark {
+      color-scheme: dark;
+    }
+    .ag-root-wrapper.ag-ltr.ag-layout-normal {
+      border: 0;
+    }
     .ag-cell-focus {
       border: none !important;
     }
+    .ag-header-container .ag-header-cell .ag-header-cell-resize::after {
+      height: 70%;
+      width: 20%;
+      top: 50%;
+      border-radius: 2px;
+      transform: translateY(-50%);
+    }
     /**
      * Prevents Long String overflow
@@ Expand Down @@

feat: use Session to track IPCs and improve UI #268

Uh oh!

feat: use Session to track IPCs and improve UI #268

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

erickzhao Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

hitarth-gg Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

erickzhao Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

hitarth-gg Jul 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

feat: use `Session` to track IPCs and improve UI #268

feat: use `Session` to track IPCs and improve UI #268

hitarth-gg Jul 7, 2025 •

edited

Loading