DevTools ExtensionDevTools扩展

Electron supports Chrome DevTools extensions, which can be used to extend the ability of Chrome's developer tools for debugging popular web frameworks.Electron支持Chrome DevTools扩展，可用于扩展Chrome开发工具调试流行web框架的能力。

Loading a DevTools extension with tooling使用工具加载DevTools扩展

The easiest way to load a DevTools extension is to use third-party tooling to automate the process for you. 加载DevTools扩展的最简单方法是使用第三方工具为您自动化该过程。electron-devtools-installer is a popular NPM package that does just that.electron-devtools-installer是一个流行的NPM包，它就是这样做的。

Manually loading a DevTools extension手动加载DevTools扩展

If you don't want to use the tooling approach, you can also do all of the necessary operations by hand. 如果您不想使用工具方法，您也可以手工完成所有必要的操作。To load an extension in Electron, you need to download it via Chrome, locate its filesystem path, and then load it into your Session by calling the [ses.loadExtension] API.要在Electron中加载扩展，您需要通过Chrome下载它，找到它的文件系统路径，然后通过调用[sesloadExtension]API将它加载到您的Session中。

Using the React Developer Tools as an example:以React Developer Tools为例：

1. Install the extension in Google Chrome.在Google Chrome中安装扩展。

2. Navigate to chrome://extensions, and find its extension ID, which is a hash string like fmkadmapgofadopljbjfkapdkoienihi.导航到chrome://extensions，并找到其扩展ID，它是一个类似fmkadmapgofadopljbjfkapdkoienihi的哈希字符串。

3. Find out the filesystem location used by Chrome for storing extensions:查找Chrome用于存储扩展的文件系统位置：

   • on Windows it is %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;在Windows上，它是%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions；
   • on Linux it could be:在Linux上，它可能是：
     • ~/.config/google-chrome/Default/Extensions/
     • ~/.config/google-chrome-beta/Default/Extensions/
     • ~/.config/google-chrome-canary/Default/Extensions/
     • ~/.config/chromium/Default/Extensions/
   • on macOS it is ~/Library/Application Support/Google/Chrome/Default/Extensions.在macOS上，它是/Library/Application Support/Google/Chrome/Default/Extensions。

4. Pass the location of the extension to the ses.loadExtension API. 将扩展的位置传递给ses.loadExtension API。For React Developer Tools v4.9.0, it looks something like:对于React Developer Tools v4.9.0，它看起来像：

    const { app, session } = require('electron')
    const path = require('path')
    const os = require('os')
   
    // on macOS
    const reactDevToolsPath = path.join(
      os.homedir(),
      '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
    )
   
    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(reactDevToolsPath)
    })

Notes:

• loadExtension returns a Promise with an Extension object, which contains metadata about the extension that was loaded. 返回带有Extension对象的Promise，该对象包含有关加载的扩展的元数据。This promise needs to resolve (e.g. with an await expression) before loading a page. 在加载页面之前，这个承诺需要解析（例如，使用await表达式）。Otherwise, the extension won't be guaranteed to load.否则，无法保证加载扩展。
• loadExtension cannot be called before the ready event of the app module is emitted, nor can it be called on in-memory (non-persistent) sessions.在app模块的ready事件发出之前，不能调用loadExtension，也不能在内存（非持久性）会话中调用它。
• loadExtension must be called on every boot of your app if you want the extension to be loaded.如果您希望加载扩展，则必须在应用程序的每次启动时调用loadExtension。

Removing a DevTools extension删除DevTools扩展

You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. 您可以将扩展的ID传递给ses.removeExtension API，以将其从会话中删除。Loaded extensions are not persisted between app launches.加载的扩展不会在应用程序启动之间持久化。

DevTools extension supportDevTools扩展支持

Electron only supports a limited set of chrome.* APIs, so extensions using unsupported chrome.* APIs under the hood may not work.Electron只支持一组有限的chrome.*API，因此在后台使用不受支持的chrome.*API的扩展可能不起作用。

The following Devtools extensions have been tested to work in Electron:以下Devtools扩展已在Electron中测试：

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

What should I do if a DevTools extension is not working?如果DevTools扩展不起作用，我该怎么办？

First, please make sure the extension is still being maintained and is compatible with the latest version of Google Chrome. 首先，请确保该扩展仍在维护中，并且与最新版本的Google Chrome兼容。We cannot provide additional support for unsupported extensions.我们无法为不支持的扩展提供额外支持。

If the extension works on Chrome but not on Electron, file a bug in Electron's issue tracker and describe which part of the extension is not working as expected.如果扩展在Chrome上运行，但在Electron上不运行，请在Electron的问题跟踪程序中提交一个bug，并描述扩展的哪个部分没有按预期运行。