Add support for electron-react-devtools

sindresorhus · sindresorhus · commit 9d6c4adcf37d · 2018-01-02T16:44:13.000+01:00
diff --git a/index.js b/index.js
@@ -48,6 +48,19 @@ function inspectElements() {
 	}
 }
 
+const addExtensionIfInstalled = (name, getPath) => {
+	const isExtensionInstalled = name => {
+		return BrowserWindow.getDevToolsExtensions &&
+			{}.hasOwnProperty.call(BrowserWindow.getDevToolsExtensions(), name);
+	};
+
+	try {
+		if (!isExtensionInstalled(name)) {
+			BrowserWindow.addDevToolsExtension(getPath(name));
+		}
+	} catch (err) {}
+};
+
 module.exports = opts => {
 	opts = Object.assign({
 		enabled: null,
@@ -65,15 +78,10 @@ module.exports = opts => {
 	});
 
 	app.on('ready', () => {
-		// Activate devtron for the user if they have it installed and it's not already added
-		try {
-			const devtronAlreadyAdded = BrowserWindow.getDevToolsExtensions &&
-				{}.hasOwnProperty.call(BrowserWindow.getDevToolsExtensions(), 'devtron');
-
-			if (!devtronAlreadyAdded) {
-				BrowserWindow.addDevToolsExtension(require('devtron').path);
-			}
-		} catch (err) {}
+		addExtensionIfInstalled('devtron', name => require(name).path);
+		// TODO: Use this when https://github.com/firejune/electron-react-devtools/pull/6 is out
+		// addExtensionIfInstalled('electron-react-devtools', name => require(name).path);
+		addExtensionIfInstalled('electron-react-devtools', name => require('path').dirname(require.resolve(name)));
 
 		localShortcut.register('CmdOrCtrl+Shift+C', inspectElements);
 		localShortcut.register(isMacOS ? 'Cmd+Alt+I' : 'Ctrl+Shift+I', devTools);
diff --git a/package.json b/package.json
@@ -1,43 +1,44 @@
 {
-  "name": "electron-debug",
-  "version": "1.4.0",
-  "description": "Adds useful debug features to your Electron app",
-  "license": "MIT",
-  "repository": "sindresorhus/electron-debug",
-  "author": {
-    "name": "Sindre Sorhus",
-    "email": "sindresorhus@gmail.com",
-    "url": "sindresorhus.com"
-  },
-  "scripts": {
-    "start": "electron test.js",
-    "test": "xo"
-  },
-  "files": [
-    "index.js"
-  ],
-  "keywords": [
-    "electron",
-    "debug",
-    "debugging",
-    "devtools",
-    "app",
-    "dev",
-    "development"
-  ],
-  "dependencies": {
-    "electron-is-dev": "^0.3.0",
-    "electron-localshortcut": "^3.0.0"
-  },
-  "devDependencies": {
-    "devtron": "^1.1.0",
-    "electron": "^1.6.12",
-    "xo": "*"
-  },
-  "xo": {
-    "envs": [
-      "node",
-      "browser"
-    ]
-  }
+	"name": "electron-debug",
+	"version": "1.4.0",
+	"description": "Adds useful debug features to your Electron app",
+	"license": "MIT",
+	"repository": "sindresorhus/electron-debug",
+	"author": {
+		"name": "Sindre Sorhus",
+		"email": "sindresorhus@gmail.com",
+		"url": "sindresorhus.com"
+	},
+	"scripts": {
+		"start": "electron test.js",
+		"test": "xo"
+	},
+	"files": [
+		"index.js"
+	],
+	"keywords": [
+		"electron",
+		"debug",
+		"debugging",
+		"devtools",
+		"app",
+		"dev",
+		"development"
+	],
+	"dependencies": {
+		"electron-is-dev": "^0.3.0",
+		"electron-localshortcut": "^3.0.0"
+	},
+	"devDependencies": {
+		"devtron": "^1.1.0",
+		"electron": "^1.6.12",
+		"electron-react-devtools": "^0.5.2",
+		"xo": "*"
+	},
+	"xo": {
+		"envs": [
+			"node",
+			"browser"
+		]
+	}
 }
diff --git a/readme.md b/readme.md
@@ -31,15 +31,12 @@ Open DevTools and focus the Element Inspector tool.
 - Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>C</kbd>
 - Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>C</kbd>
 
-### Activates Devtron
+### Activates DevTools extensions
 
-[Devtron](https://electronjs.org/devtron) is the official Electron DevTools extension.
+Just install any of these extension and they'll be activated for you:
 
-Just install it in your app and we'll activate it for you.
-
-```
-$ npm install --save-dev devtron
-```
+- [devtron](https://electronjs.org/devtron) - The official Electron DevTools extension
+- [electron-react-devtools](https://github.com/firejune/electron-react-devtools) - React DevTools extension for Electron
 
 
 ## Install
