diff --git a/README.md b/README.md index 6ef142fd..0e04644a 100644 --- a/README.md +++ b/README.md @@ -16,13 +16,39 @@ - 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' 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 { app } = require('electron'); + +const isDev = !app.isPackaged; + +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. +- 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 `ipcRenderer.removeListener`. + If Devtron is installed correctly, it should appear as a tab in the Developer Tools of your Electron app. diff --git a/package.json b/package.json index 5f33218b..c9175d79 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "@electron/devtron", "version": "0.0.0-development", "description": "Electron DevTools Extension to track IPC events", + "types": "./dist/types/index.d.ts", "exports": { ".": { "import": "./dist/mjs/index.mjs", diff --git a/webpack.node.config.ts b/webpack.node.config.ts index cb63e0ed..e00a79ba 100644 --- a/webpack.node.config.ts +++ b/webpack.node.config.ts @@ -31,7 +31,7 @@ const commonConfig: Configuration = { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, externals: { - electron: 'commonjs2 electron', + electron: 'electron', }, };