From fffcc489c8f16a2e257427d76590053e413bb1e2 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Thu, 31 Jul 2025 17:26:35 +0530 Subject: [PATCH 01/10] fix: type declarations not found --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 5f33218b..864d7356 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,9 @@ "name": "@electron/devtron", "version": "0.0.0-development", "description": "Electron DevTools Extension to track IPC events", + "main": "./dist/cjs/index.cjs", + "module": "./dist/mjs/index.mjs", + "types": "./dist/types/index.d.ts", "exports": { ".": { "import": "./dist/mjs/index.mjs", From 24cc9824ea39d3d59693d14cb0eb89cbca2d2faa Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Thu, 31 Jul 2025 19:17:34 +0530 Subject: [PATCH 02/10] docs: limitations and conditional installation of devtron --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 6ef142fd..48196e2c 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,30 @@ const { devtron } = require('@electron/devtron'); devtron.install(); // call this function at the top of your file ``` +Devtron can be conditionally installed in **development mode** to avoid impacting production builds. Here's an example: + +```js +const isDev = true + +async function installDevtron() { + const { devtron } = await import('@electron/devtron') + await devtron.install() +} + +if (isDev) { + installDevtron().catch((error) => { + console.error('Failed to install Devtron:', error) + }) +} +``` + +## Requirements and Limitations + +- Electron version must be 36.0.0 or higher. +- For Devtron to work with newly created **sessions**, you must call `devtron.install()` before they are created. +- IPC events sent before Devtron is installed (during early app startup) might not be captured. +- `ipcRenderer.once` will be tracked as two separate events `ipcRenderer.on` and then `ipcRenderer.removeListener`. + If Devtron is installed correctly, it should appear as a tab in the Developer Tools of your Electron app. From 5874459512a092f4524c48f12333557bbe5af21b Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Thu, 31 Jul 2025 19:21:16 +0530 Subject: [PATCH 03/10] fix: invalid require usage in ESM build --- webpack.node.config.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/webpack.node.config.ts b/webpack.node.config.ts index cb63e0ed..5356c53c 100644 --- a/webpack.node.config.ts +++ b/webpack.node.config.ts @@ -30,9 +30,6 @@ const commonConfig: Configuration = { resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, - externals: { - electron: 'commonjs2 electron', - }, }; const esmConfig: Configuration = { @@ -54,6 +51,9 @@ const esmConfig: Configuration = { __dirname: 'import.meta.url', }), ], + externals: { + electron: 'module electron', + }, }; const cjsConfig: Configuration = { @@ -67,6 +67,9 @@ const cjsConfig: Configuration = { }, target: 'node', mode: 'none', + externals: { + electron: 'commonjs2 electron', + }, }; const config: Configuration[] = [esmConfig, cjsConfig]; From 224f549d1e784d2e546134c47fae47d0879344e0 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Thu, 31 Jul 2025 19:25:59 +0530 Subject: [PATCH 04/10] docs: add bullet point --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 48196e2c..a66f3186 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ const { devtron } = require('@electron/devtron'); devtron.install(); // call this function at the top of your file ``` -Devtron can be conditionally installed in **development mode** to avoid impacting production builds. Here's an example: +- Devtron can be conditionally installed in **development mode** to avoid impacting production builds. Here's an example: ```js const isDev = true From b3364a7cf5cda5a904cef6bd125e6818bf4fa713 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Thu, 31 Jul 2025 19:46:14 +0530 Subject: [PATCH 05/10] chore: simplify externals config in webpack --- webpack.node.config.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/webpack.node.config.ts b/webpack.node.config.ts index 5356c53c..e00a79ba 100644 --- a/webpack.node.config.ts +++ b/webpack.node.config.ts @@ -30,6 +30,9 @@ const commonConfig: Configuration = { resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, + externals: { + electron: 'electron', + }, }; const esmConfig: Configuration = { @@ -51,9 +54,6 @@ const esmConfig: Configuration = { __dirname: 'import.meta.url', }), ], - externals: { - electron: 'module electron', - }, }; const cjsConfig: Configuration = { @@ -67,9 +67,6 @@ const cjsConfig: Configuration = { }, target: 'node', mode: 'none', - externals: { - electron: 'commonjs2 electron', - }, }; const config: Configuration[] = [esmConfig, cjsConfig]; From eaf40f007ef27f5b355823822af66ed87c57ff53 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Fri, 1 Aug 2025 02:24:42 +0530 Subject: [PATCH 06/10] docs: fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a66f3186..3c96c674 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ - In your Electron app's `main.js` (or other relevant file) add the following code to load Devtron: ```js -//main.js +// main.js const { devtron } = require('@electron/devtron'); // or import { devtron } from '@electron/devtron' From c5c51ddb9e8d9f379c64d703d67b75859c7ab4b4 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Wed, 6 Aug 2025 18:20:43 +0530 Subject: [PATCH 07/10] chore: remove `main` and `module` fields from package.json --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 864d7356..c9175d79 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,6 @@ "name": "@electron/devtron", "version": "0.0.0-development", "description": "Electron DevTools Extension to track IPC events", - "main": "./dist/cjs/index.cjs", - "module": "./dist/mjs/index.mjs", "types": "./dist/types/index.d.ts", "exports": { ".": { From 2bc31b538c3f926ae1f089e6d2dbe86dc5016f7e Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Wed, 6 Aug 2025 18:47:47 +0530 Subject: [PATCH 08/10] docs: clarify IPC events not tracked at app startup --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3c96c674..78981f4f 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ if (isDev) { - Electron version must be 36.0.0 or higher. - For Devtron to work with newly created **sessions**, you must call `devtron.install()` before they are created. -- IPC events sent before Devtron is installed (during early app startup) might not be captured. +- Some IPC events sent immediately after the Electron app starts may not be captured by Devtron, even if `devtron.install()` is called early, because Devtron may take a short time to initialize after starting the app. - `ipcRenderer.once` will be tracked as two separate events `ipcRenderer.on` and then `ipcRenderer.removeListener`. If Devtron is installed correctly, it should appear as a tab in the Developer Tools of your Electron app. From 450d0a6f1c1f1d5f2c414c25e73e9565109e1c25 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Wed, 6 Aug 2025 18:57:42 +0530 Subject: [PATCH 09/10] docs: minor wording fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 78981f4f..9be4d950 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ if (isDev) { - Electron version must be 36.0.0 or higher. - For Devtron to work with newly created **sessions**, you must call `devtron.install()` before they are created. - Some IPC events sent immediately after the Electron app starts may not be captured by Devtron, even if `devtron.install()` is called early, because Devtron may take a short time to initialize after starting the app. -- `ipcRenderer.once` will be tracked as two separate events `ipcRenderer.on` and then `ipcRenderer.removeListener`. +- `ipcRenderer.once` will be tracked as two separate events: `ipcRenderer.on` and `ipcRenderer.removeListener`. If Devtron is installed correctly, it should appear as a tab in the Developer Tools of your Electron app. From e28c856baac4a7badb7593614864d24fd27306f7 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Wed, 6 Aug 2025 19:04:57 +0530 Subject: [PATCH 10/10] docs: use app.isPackaged instead of hardcoded isDev flag --- README.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 9be4d950..0e04644a 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,19 @@ devtron.install(); // call this function at the top of your file - Devtron can be conditionally installed in **development mode** to avoid impacting production builds. Here's an example: ```js -const isDev = true +const { app } = require('electron'); + +const isDev = !app.isPackaged; async function installDevtron() { - const { devtron } = await import('@electron/devtron') - await devtron.install() + const { devtron } = await import('@electron/devtron'); + await devtron.install(); } if (isDev) { installDevtron().catch((error) => { - console.error('Failed to install Devtron:', error) - }) + console.error('Failed to install Devtron:', error); + }); } ```