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. 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.

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. Pass the location of the extension to the ses.loadExtension API. 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 returns a Promise with an Extension object, which contains metadata about the extension that was loaded. 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​

You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. Les extensions chargées ne persistent s pas entre deux lancements d’application.

Support de l'extension DevTools​

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

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.