Conseils et astuces pour le débogage des applications d'électrons

Guide de débogage des applications électroniques: utilisez efficacement les outils de développeur Chrome et le code vs

Cet article présente comment déboguer efficacement les applications électroniques, couvrant les méthodes de débogage du processus de rendu et le processus principal.

Points de base

• Les applications électroniques peuvent être déboguées directement à l'aide d'outils de développeur Chrome. Il est accessible via le menu de l'application, les touches de raccourci ou la méthode BrowserWindow.openDevTools().
• Le débogage du processus principal est relativement complexe et les supports d'inspecteur de nœuds sont limités. VS Code est recommandé, qui fournit un outil de débogage d'application de nœud riche.
• VS Code prend en charge les tâches de création personnalisées et les configurations de débogage, permettant de définir des points d'arrêt, de vérifier les piles d'appels, de visualiser les variables et d'utiliser une console en temps réel, ce qui facilite le débogage et le dépannage des erreurs.

Rendre le débogage du processus

Figure 1: Les outils de développeur Chrome sont utilisés dans le processus de rendu identique à des applications de navigateur.

Le menu par défaut de l'application Electron fournit des commandes pour ouvrir des outils de développeur Chrome. Vous pouvez également personnaliser le menu et supprimer cette fonctionnalité.

Figure 2: Les outils du développeur peuvent être commutés dans le menu par défaut de l'électron.

De plus, vous pouvez utiliser le Cmd Opt I sur macOS ou les touches de raccourci Ctrl Shift I sur Windows / Linux, ou ouvrir par programme les outils de développement via la méthode BrowserWindow de l'instance webContents.openDevTools().

app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

Exemple de code: ouvrez l'outil de développeur par programme après la charge de la fenêtre principale.

Débogage du processus principal

Le débogage du processus principal est difficile et les supports d'inspecteur de nœuds sont limités. Bien que l'application Electron puisse être démarrée avec le paramètre --debug pour activer le débogage à distance (port par défaut 5858), la prise en charge de l'inspecteur de nœud dans la documentation officielle n'est pas pleinement améliorée.

déboguez le processus principal en utilisant le code vs

VS Code est un IDE gratuit et open source qui est également construit sur l'électron.

Configurez rapidement des tâches de construction: appuyez sur Ctrl Shift B sur Windows, appuyez sur Cmd Shift B sur macOS, et VS Code vous invitera à créer une tâche de construction (comme illustré à la figure 3).

Figure 3: S'il n'y a pas de tâche de construction, le déclenchement de la tâche de construction provoquera la création.

Vous pouvez également appuyer sur Ctrl Shift P (Windows) ou Cmd Shift P (macOS), entrez "tâche" et sélectionnez "Sélectionner des tâches: configurer le coureur de tâche", qui sera créé dans le dossier .vscode A tasks.json fichier et l'ouvrir.

La méthode de configuration des tâches de génération et de débogage sur chaque plate-forme est similaire, mais le nom des fichiers binaires prédéfinis générés sur différents systèmes d'exploitation est différent: electron-prebuilt sur Windows, electron.exe sur macOS, Electron.app sur Linux. electron

• Configurer des tâches de construction dans VS Code (tasks.json)

app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

Veuillez remplacer

par le nom correspondant de votre système. <name-of-binary></name-of-binary>

Maintenant, lorsque vous appuyez sur

sur Windows / Linux ou Ctrl Shift B sur MacOS, votre application Electron démarrera. Ce n'est pas seulement crucial pour la configuration du débogage dans le code vs, mais c'est aussi un moyen pratique de démarrer une application. L'étape suivante consiste à configurer VS Code pour lancer l'application et à se connecter à son débogueur intégré. Cmd Shift B

Connectez-vous au débogueur

Figure 4: Dans le panneau de débogage, cliquez sur l'icône du matériel et le code vs créera un fichier de configuration pour démarrer le débogueur.

Pour créer une tâche de démarrage, accédez à l'onglet Debug dans le panneau de gauche et cliquez sur le pignon (figure 4). VS Code vous demandera quel type de fichier de configuration que vous souhaitez créer. Sélectionnez "Node.js" et remplacez le contenu du fichier par l'exemple de configuration suivant.

{
  "version": "0.1.0",
  "command": "node_modules/electron-prebuilt/dist/<name-of-binary>",
  "args": ["lib/main.js"]
}

Veuillez remplacer

par le nom correspondant de votre système. <name-of-binary></name-of-binary>

Vous pouvez en savoir plus sur la configuration du démarrage ici.

Avec ces deux fichiers de configuration, vous pouvez cliquer sur la marge à gauche de n'importe quelle ligne pour définir un point d'arrêt et appuyer sur

pour exécuter l'application. L'exécution s'arrête aux points d'arrêt, vous permettant de vérifier la pile d'appels, d'afficher les variables dans la portée et d'interagir avec la console en temps réel. Les points d'arrêt ne sont pas le seul moyen de déboguer votre code. Vous pouvez également surveiller des expressions spécifiques ou entrer dans le débogueur lorsqu'une exception non apparente est lancée. F5

Figure 5: Le débogueur intégré de VS Code vous permet de suspendre l'exécution de l'application et d'étudier les erreurs en profondeur.

Résumé

maîtriser ces techniques de débogage afin que vous puissiez développer et maintenir des applications électroniques plus efficacement.

(La partie FAQ a été omise car les FAQ d'origine et le texte principal sont dupliqués et la longueur est longue. Afin d'éviter la redondance, seule l'introduction des méthodes de débogage de base est conservée ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!