Saltar al contenido principal

Extensión de herramientas de desarrollo

Electron soporta Chrome DevTools extensions, las cuales pueden ser usadas para extender las funcionalidades de las herramientas de desarrollo de Chrome para depurar web frameworks populares.

Cargando una extensión DevTools con herramientas​

La forma más fácil de cargar una extensión DevTools es utilizar herramientas de terceros para automatizar el proceso por usted. electron-devtools-installer es un popular paquete NPM que hace justamente eso.

Cargando una extensión DevTools manualmente​

Si no quiere usar el enfoque de herramientas, también puede hacer todas las operaciones necesarias a mano. 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.

Usando el React Developer Tools como un ejemplo:

  1. Instala la extensión en Google Chrome.

  2. Acceder a chrome://extensions, e identificar el ID de la extensión, que es una cadena de texto como fmkadmapgofadopljbjfkapdkoienihi.

  3. Encuentra la ubicación del sistema de archivo usado por Chrome para alamacenar las extensiones:

    • en Windows es %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;
    • en Linux pueden ser:
      • ~/.config/google-chrome/Default/Extensions/
      • ~/.config/google-chrome-beta/Default/Extensions/
      • ~/.config/google-chrome-canary/Default/Extensions/
      • ~/.config/chromium/Default/Extensions/
    • en macOS es ~/Library/Application Support/Google/Chrome/Default/Extensions.

  4. Pass the location of the extension to the ses.loadExtension API. Para React Developer Tools v4.9.0, se ve algo como:

    const { app, session } = require('electron')
    const path = require('node:path')
    const os = require('node: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)
    })

Notas:

  • loadExtension returns a Promise with an Extension object, which contains metadata about the extension that was loaded. Esta promise necesita resolver (p. ej. con una expresión await) antes de cargar una página. De lo contrario, no estará garantizada la carga de la extensión.
  • loadExtension no puede ser llamada antes de que el evento ready del módulo appsea emitido, ni puede ser llamado en sesiones en memoria (no persistente).
  • loadExtension debe ser llamado en cada arranque de tu aplicación si quieres que la extensión sea cargada.

Eliminando una extensión DevTools​

You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. Las extensiones cargadas no son persistidas entre los lanzamientos de la aplicación.

Soporte de extensión DevTools​

Electron only supports a limited set of chrome.* APIs, so extensions using unsupported chrome.* APIs under the hood may not work.

Las siguientes extensiones Devtools han siso probadas para funcionar en Electron:

¿Qué debería hacer si una extensión DevTools no está funcionando?​

Primero, por favor asegúrese que la extensión todavía sigue siendo mantenida y es compatible con la última versión de Google Chrome. No podemos proveer soporte adicional para extensiones no soportadas.

Si la extensión funciona en Chrome pero no en Electron, registra el error en el issue tracker de Electron y describe que parte de la extensión no esta funcionando como se espera.