Débogage et résolution des problèmes courants d'Electron

Lorsque votre application Electron plante, se fige ou consomme une mémoire excessive, identifier rapidement la cause profonde est essentiel. Ce guide fournit des techniques de débogage pratiques pour les problèmes Electron les plus courants, en se concentrant sur ce qu’il faut vérifier en premier et quels outils utiliser.

Diagnostic des plantages et blocages du processus Renderer

Vérifications rapides pour les problèmes de Renderer

Lorsqu’un processus renderer plante ou ne répond plus, commencez par ces vérifications immédiates :

1. Ouvrez DevTools par programmation avant que le plantage ne se produise :

win.webContents.openDevTools({ mode: 'detach' });

2. Vérifiez la console pour les exceptions non capturées - La plupart des plantages de renderer proviennent d’erreurs JavaScript non gérées.

3. Surveillez l’utilisation de la mémoire via l’onglet Performance de Chrome DevTools - Recherchez les pics de mémoire avant les plantages.

Débogage du processus Renderer avec DevTools

Pour les problèmes persistants du renderer :

• Activez le rapport de plantage : Ajoutez win.webContents.on('crashed', (event) => {}) pour capturer les événements de plantage
• Utilisez les snapshots mémoire : Prenez des instantanés du heap dans DevTools (onglet Memory) pour identifier les objets qui fuient
• Désactivez l’accélération matérielle pour les tests : app.disableHardwareAcceleration() - élimine les plantages liés au GPU

Vérification rapide : Si le problème disparaît avec l’accélération matérielle désactivée, vous avez isolé un problème GPU.

Débogage des problèmes du processus principal

Configuration du débogage Electron dans VS Code

Configurez VS Code pour le débogage du processus principal avec ce fichier launch.json minimal :

{
  "type": "node",
  "request": "launch",
  "name": "Debug Main Process",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
  "program": "${workspaceFolder}/main.js",
  "outputCapture": "std"
}

Résolution des problèmes du processus principal

Premières étapes pour les problèmes du processus principal :

1. Vérifiez stdout/stderr : Ajoutez "outputCapture": "std" pour voir les erreurs des modules natifs
2. Définissez des points d’arrêt dans les événements de cycle de vie (app.on('ready'), app.on('before-quit'))
3. Surveillez la mémoire du processus : Utilisez process.memoryUsage() pour enregistrer les valeurs RSS

Approches de remédiation :

• Pour un RSS élevé : Vérifiez les références BrowserWindow conservées - assurez-vous d’avoir win = null après la fermeture
• Pour les plantages : Activez les core dumps avec app.setPath('crashDumps', path)
• Pour les blocages : Profilez l’utilisation du CPU avec le flag --inspect et Chrome DevTools

Fuites mémoire et RSS élevé

Techniques de profilage mémoire Electron

Identifiez les fuites mémoire de manière systématique :

1. Comparez les snapshots du heap : Prenez des instantanés avant et après les opérations suspectées de fuite
2. Surveillez RSS vs heap : RSS inclut la mémoire native - si RSS augmente mais pas le heap, vérifiez les modules natifs
3. Suivez les listeners IPC : Les listeners non désenregistrés sont des sources courantes de fuites

Prévention des fuites de listeners IPC

Pattern courant de fuite mémoire IPC :

// MAUVAIS : Crée un nouveau listener à chaque render
ipcRenderer.on('data-update', handler);

// BON : Supprimez lors du démontage
const handler = (event, data) => { /* ... */ };
ipcRenderer.on('data-update', handler);
// Lors du nettoyage :
ipcRenderer.removeListener('data-update', handler);

Vérification : Vérifiez le nombre de listeners avec ipcRenderer.listenerCount('event-name')

Problèmes de configuration et de sécurité

Prévention de l’exposition du mode debug

Vérifications critiques en production :

1. Désactivez DevTools en production :

if (app.isPackaged) {
  win.webContents.on('devtools-opened', () => {
    win.webContents.closeDevTools();
  });
}

2. Supprimez les éléments de menu de débogage : Retirez les options de débogage des menus de production
3. Désactivez le module remote : Définissez enableRemoteModule: false dans webPreferences

Quand escalader

Créez une reproduction minimale avant de signaler des problèmes :

1. Isolez le problème : Supprimez tout le code non essentiel
2. Testez avec Electron vanilla : Utilisez minimal-repro comme référence
3. Documentez précisément : Incluez les chiffres exacts RSS/heap, la version d’Electron et la plateforme

Lors du signalement de problèmes Electron/Chromium, fournissez :

• Code minimal reproductible
• Mesures de mémoire (RSS et heap)
• Type de processus affecté (main/renderer)
• Crash dumps si disponibles

Bonnes pratiques

Trois pratiques de débogage essentielles

1. Sécurisez les builds de production : Vérifiez toujours app.isPackaged avant d’activer les fonctionnalités de débogage. Ne livrez jamais avec DevTools accessible.

2. Nettoyez les listeners IPC : Implémentez un pattern de nettoyage pour tous les listeners IPC. Utilisez removeListener() ou removeAllListeners() lors du démontage du composant.

3. Surveillez RSS en parallèle du heap : Les snapshots du heap JavaScript ne montrent pas la mémoire native. Suivez toujours process.memoryUsage().rss pour une investigation mémoire complète.

Conseil final : Pour des scénarios de débogage complexes, utilisez electron-debug pour ajouter des raccourcis DevTools et d’autres fonctionnalités de débogage avec une configuration minimale.

Conclusion

Le débogage des applications Electron nécessite une approche systématique pour identifier si les problèmes proviennent du processus principal ou du renderer. En utilisant les bons outils—de DevTools pour les problèmes de renderer au débogage VS Code pour les problèmes du processus principal—vous pouvez rapidement isoler et corriger les plantages, fuites mémoire et problèmes de performance. N’oubliez pas de toujours sécuriser vos builds de production et de maintenir des patterns de communication IPC propres pour éviter que les problèmes courants ne se produisent en premier lieu.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.