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. Pasa la ubicación de la extensión a la API ses.loadExtension. 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 devuelve una Promise con un Extension object, que contiene metadatos sobre la extensión que fue cargada. 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​

Puedes pasar la ID de la extensión a la API ses.removeExtension para eliminarla de tu Session. Las extensiones cargadas no son persistidas entre los lanzamientos de la aplicación.

Soporte de extensión DevTools​

Electron sólo soporta un limitado conjunto de APIs de chrome.*, así que las extensiones usando APIs de chrome.* no soportadas bajo el capo puede que no funcione.

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.