Electron DevTools extension

To make debugging easier, Electron supports Chrome DevTools extension. For most DevTools extensions, we can download the source code directly, and then load them BrowserWindow.addDevToolsExtension Electron will remember which extensions have been loaded, so there is no need to call BrowserWindow.addDevToolsExtension window is created.

How to load a DevTools extension

To Electron Loading an extension, you need to Chrome download it in a browser to find its place in the system directory and then call BrowserWindow.addDevToolsExtension(extension) to load it.

Example:

Take React Developer Tools as an example:

First, we need to Chrome installation React Developer Tools . Open chrome://extensions , found extensions ID , shaped like fmkadmapgofadopljbjfkapdkoienihi of hash string. Find the storage directory of the Chrome

• Ｗindows under %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
• macOS under ~/Library/Application Support/Google/Chrome/Default/Extensions
• Under Linux :

~/.config/google-chrome/Default/Extensions/
~/.config/google-chrome-beta/Default/Extensions/
~/.config/google-chrome-canary/Default/Extensions/
~/.config/chromium/Default/Extensions/

• Pass the extended address to BrowserWindow.addDevToolsExtension , for example:

 const path = require('path')
 const os = require('os')
 BrowserWindow.addDevToolsExtension(
   path.join(os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.3.0_0')
 )

How to remove a DevTools extension

To remove a DevTools extension, you can pass the name of the extension to BrowserWindow.removeDevToolsExtension . The name of the BrowserWindow.addDevToolsExtension returned by 060c767f5658c1. We can use the BrowserWindow.getDevToolsExtensions application programming interface.

Example:

For example, to remove a specified extension:

BrowserWindow.removeDevToolsExtension('React Developer Tools');

chrome.* APIs

Electron only supports a limited chrome.* API, so if some extensions use the unsupported chrome.* API, it may not work properly. The following DevTools extensions have passed the test and can work normally Electron

• Ember Inspector
• React Developer Tools
• Backbone Debugger
• jQuery Debugger
• AngularJS Batarang
• Vue.js devtools
• Cerebral Debugger
• Redux DevTools Extension
• MobX Developer Tools

Note Electron currently does not support chrome expansion in the running in the background (background pages) function, so that depend on this feature DevTools expanded Electron may not work properly in.

Link: https://www.9xkd.com/