Aller au contenu principal

Les extension des DevTools

Electron prend en charge les extensions de Chrome DevTools , celles ci pouvant être utilisées pour étendre les capacités des devtools de Chrome pour le débogage des framework les plus populaires.

Chargement d'une extension DevTools​

La façon la plus simple de charger une extension DevTools est d'utiliser un outil tiers pour automatiser à votre place le processus. Le package electron-devtools-installer disponible via NPM correspond exactement à cela.

Chargement manuel d'une extension des DevTools​

Dans le cas où vous ne voudriez pas utiliser d'outil , vous pourrez toujours effectuer toutes les opérations nécessaires à la main. Pour charger une extension dans Electron, vous devez la télécharger via Chrome, localiser le chemin du système de fichiers, puis la charger dans votre Session en appelant l'API ses.loadExtension.

Exemple utilisant React Developer Tools :

  1. Installez l'extension dans Google Chrome.

  2. Accédez à chrome://extensions et trouvez son ID d’extension, qui est une chaîne de hachage comme fmkadmapgofadopljbjfkapdkoienihi.

  3. Découvrez l'emplacement utilisé par Chrome dans le système de fichiers pour stocker les extensions :

    • sous Windows, c'est %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions ;
    • sous Linux, ça pourrait être :
      • ~/.config/google-chrome/Default/Extensions/
      • ~/.config/google-chrome-beta/Default/Extensions/
      • ~/.config/google-chrome-canary/Default/Extensions/
      • ~/.config/chromium/Default/Extensions/
    • sur macOS c’est ~/Library/Application Support/Google/Chrome/Default/Extensions.

  4. Transmettre l'emplacement de l'extension à l'API ses.loadExtension . Pour les outils de développement React v4.9.0, cela ressemble à quelque chose comme :

    const { app, session } = require('electron')
    const path = require('node:path')
    const os = require('node:os')

    // sur 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 retourne une Promise avec un objet de type Extension contenant des métadonnées à propos de l'extension qui a été chargée. Cette promesse doit être résolue (par exemple avec une expression await ) avant de charger une page. Sinon il n'est pas garanti que l'extension se charge.
  • loadExtension ne doit pas être invoquée avant que l'évènement ready du module app ne soit émis, ni lors de sessions en mémoire (non persistantes).
  • Pour que l'extension soit chargée loadExtension devrat être invoquée à chaque démarrage de votre application.

Suppression d’une extension DevTools​

Afin de supprimer une extension vous devez passer l'ID de l'extension à l'API ses.removeExtension. Les extensions chargées ne persistent s pas entre deux lancements d’application.

Support de l'extension DevTools​

Electron ne prend en charge qu'un ensemble limité des APIs chrome.* , donc les extensions utilisant sous le capot des APIs non supportées peuvent ne pas fonctionner.

Les Extensions Devtools suivantes ont été testées et sont garanties fonctionner dans Electron :

Que faire si une extension DevTools ne fonctionne pas ?​

Tout d'abord, assurez-vous que l'extension est toujours maintenue, et qu'elle est compatible avec la dernière version de Google Chrome. Nous ne pouvons pas fournir de support supplémentaire pour les extensions non prises en charge.

Si l’extension fonctionne sur Chrome mais pas sur Electron, déposez un bogue dans le suivi des problèmes d’Electron et décrivez quelle partie de l’extension ne fonctionne pas comme prévu.