Débogage sur Windows

Si vous êtes confrontés à des plantages ou des problèmes dans Electron et que vous pensez qu'il ne viennent pas de votre app JavaScript, mais plutôt d'Electron lui-même, alors le débogage peut être un peu difficile, surtout pour les développeurs peu expérimentés dans le débogage natif/C++. Cependant, en utilisant Visual Studio, le serveur hébergé de symboles d'Electron's ainsi que le code source d'Electron, vous pouvez effectuer du débogage pas à pas avec points d'arrêt dans le code source d'Electron.

A Voir également : Il existe un tas d'informations intéressantes dont la plupart s'appliquent également à Electron sur le site developpeur de Chronium : Debugging Chromium on Windows.

Spécifications requises

• Un build de débogage d'Electron: La façon la plus simple est généralement de la construire vous-même, en utilisant les outils et prérequis énumérés dans les instructions de compilation pour Windows. Alors que vous pouvez attacher le debugger et l'utiliser pour Electron que vous pouvez télécharger directement, vous allez vous rendre compte que celui-ci est fortement optimisé, rendant ainsi le débogage considérablement plus difficile : le débogueur ne sera pas en mesure de vous montrer le contenu de toutes les variables et le chemin d'exécution peut sembler étrange à cause d'optimisations du compilateur telles que "inlining, tail calls, etc".

• Outils Visual Studio C++ : les éditions gratuites "community" de Visual Studio 2013 et Visual Studio 2015 fonctionnent tous les deux. Une fois installé, configurez Visual Studio pour utiliser le serveur de symboles d'Electron. Cela donnera à Visual Studio une meilleure compréhension de ce qui se passe à l’intérieur d'Electron, rendant plus facile l'affichage des variables dans un format plus lisible.

• ProcMon : l'outil gratuit de SysInternals vous permet d’inspecter les paramètres d'un processus, de gèrer des fichiers et les opérations de registre.

Débogage d'Electron

Pour démarrer une session de débogage, ouvrez PowerShell/CMD et exécutez votre version debug d'Electron, utilisant votre application comme paramètre.

$ ./out/Testing/electron.exe ~/my-electron-app/

Définition de points d’arrêt

Vous pouvez ouvrir Visual Studio. Electron n’est pas compilé avec Visual Studio et par conséquent ne contient pas de fichier de projet - vous pouvez cependant ouvrir les fichiers de code source « Comme fichier », ce qui signifie que Visual Studio va les ouvrir par eux-mêmes. Vous pouvez quand même définir des points d’arrêt - Visual Studio cherchera automatiquement le code source correspond au code qui s’exécute dans le processus attaché et le stopper en conséquence.

Les fichiers de code pertinents peuvent être trouvés dans ./shell/.

Attacher

Vous pouvez attacher le débogueur Visual Studio à un processus en cours d’exécution sur un ordinateur local ou distant. Lorsque le processus est en cours d’exécution, cliquez sur déboguer/attacher au processus (ou appuyez sur CTRL+ALT+P) pour ouvrir la boîte de dialogue « Attacher au processus ». Vous pouvez utiliser cette fonctionnalité pour déboguer des applications qui s'exécutent sur un ordinateur local ou distant, déboguer plusieurs processus simultanément.

Si Electron s’exécute sous un compte d’utilisateur différent, sélectionnez la case afficher les processus de tous les utilisateurs. Notez que selon le nombre de BrowserWindows ouvert de votre application, vous verrez plusieurs processus. Une application typique avec une seule fenêtre se traduira dans Visual Studio par présenter juste deux entrées d'Electron.exe - l'un pour le processus principal et l’autre pour le processus de rendu. Étant donné que la liste vous donne seulement des noms, il n’y a actuellement aucun moyen fiable de savoir qui est qui.

Quel processus dois-je attacher ?

Le code exécuté dans le processus principal (qui est le code se trouvant dans votre fichier JavaScript main ou bien encore lancé par celui-ci) s'exécutera à l’intérieur du processus principal, tandis que les autres morceaux de code s’exécuteront à l’intérieur de leur processus de rendu respectif.

Vous pouvez rattacher plusieurs programmes lorsque vous déboguez, mais un seul de ceux-ci est actif dans le débogueur à tout moment. Vous pouvez configurer le programme actif dans la barre d’outils Emplacement de débogage ou de la fenêtre de processus.

Utilisation de ProcMon pour observer un processus

Alors que Visual Studio est excellent pour l’inspection de parties de code spécifiques, la force de ProcMon est vraiment dans l'observation des ineractions de votre application avec le système d’exploitation - il capture les fichiers, registre, réseau, processus et exécute un profilage des processus. Il tente de logguer tous les événements qui se produisent et peut être un peut trop imposant, mais il est une ressource précieuse si vous cherchez à comprendre pourquoi et comment interagit votre application avec le système d’exploitation.

Vous pouvez, aller voir ce tutoriel vidéo fourni par Microsoft qui vous introduira aux fonctionnalités de débogage de base et avancées de ProcMon, .

Utiliser WinDbg

Il est possible de déboguer les plantages et problèmes dans le processus de rendu avec WinDbg.

Pour attacher le débogueur WinDbg à un processus :

1. Ajouter l'indicateur --renderer-startup-dialog à la ligne de commande d'Electron.
2. Lancer l'application que vous comptez déboguer.
3. Une boîte de dialogue va apparaître avec un pid: « Renderer starting with pid: 1234 ».
4. Lancer WinDbg et choisissez « File > Attach to process » dans le menu de l'application.
5. Saisissez le pid fourni par la boite de dialogue à l'étape 3.
6. Vous constaterez que le débogueur est en pause et qu'il y a une ligne de commande dans l'application pour saisir du texte.
7. Saisissez « g » dans la ligne de commande ci-dessus pour démarrer le processus à déboguer.
8. Appuyez sur la touche Entrée pour continuer l'exécution du programme.
9. Retournez à la boîte de dialogue et appuyez sur « ok ».