Outils de développement Electron

Pour les outils de développement Electron, VS Code est recommandé. Si vous ne connaissez pas VS Code, vous pouvez vous référer à notretutoriel VS Code。

URL de téléchargement de VS Code :https://code.visualstudio.com/。

VS Code lui-même est construit avec Electron, il possède donc un avantage naturel pour prendre en charge le développement Electron :

  • Intégration du terminal intégré
  • Fonctionnalités de débogage puissantes
  • Écosystème de plugins riche
  • Intégration Git
  • Suggestions intelligentes IntelliSense
  • Entièrement gratuit et open source

Recommandations de plugins indispensables pour VS Code

Nom du plugin Description de la fonction
Electron Snippets Fournit des extraits de code et l'autocomplétion pour les API Electron
Prettier – Formateur de code Unifiez le style de code, formatage automatique
ESLint ⟦⟧Vérifier les erreurs de syntaxe et les problèmes de style
Debugger for Chrome Vous permet de déboguer le processus de rendu frontend dans VS Code
Node.js Modules Intellisense Suggère automatiquement les fonctions des modules Node.js
Path Intellisense Suggestions intelligentes de chemins de fichiers
npm Intellisense Suggère automatiquement les noms de packages npm
Auto Rename Tag / Auto Close Tag Complétion intelligente des balises HTML
GitLens Améliore l'expérience de visualisation des versions de code Git

Débogage avec Chrome DevTools (processus de rendu)

Le processus de rendu d'Electron est en fait unepage de navigateur Chromium，
Ainsi, vous pouvez le déboguer directement avec Chrome DevTools, tout comme le débogage d'une page web.

Activer les DevTools

Dansmain.jsLors de la création d'une fenêtre, ajoutez :

Exemple

const win = new BrowserWindow({
  width: 800,
  height: 600
});
win.loadFile('index.html');

// Open DevTools
win.webContents.openDevTools();

Ce qui peut être débogué

  • Code HTML / CSS / JS
  • Requêtes réseau (Network)
  • Journaux de la console (Console)
  • Structure du DOM
  • Analyse des performances (Performance)
  • Fuites de mémoire (Mémoire)

Indice

Le débogage du processus de rendu est presque identique à Chrome, donc :

  • Vous pouvez utiliserconsole.log()Afficher les informations de débogage
  • Vous pouvez également utiliser directement les raccourcis clavier de Chrome (Cmd + Option + I / Ctrl + Shift + IOuvrir DevTools

Conseils de débogage du processus principal d'Electron

Le processus principal n'est pas une page web, mais un environnement Node.js, donc la méthode de débogage diffère de celle des pages web.

Méthode 1 : Utiliser le débogueur intégré de VS Code

Créer dans le répertoire racine du projet.vscode/launch.jsonFichier.

Le contenu est le suivant (peut être utilisé directement) :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron 主进程调试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/electron/dist/electron.js",
      "args": ["."],
      "outputCapture": "std",
      "runtimeExecutable": null,
      "cwd": "${workspaceFolder}"
    }
  ]
}

puis dansmain.jsDéfinissez-y des points d'arrêt, puis cliquez sur Debug ▶️.

Méthode 2 : débogage à distance en ligne de commande

Ajoutez des paramètres au démarrage :

electron . --inspect=5858

Ouvrez ensuite dans la barre d'adresse de Chrome :

chrome://inspect

Vous pouvez vous connecter à distance au processus principal et déboguer avec des points d'arrêt, exactement comme pour déboguer Node.js.

Résumé des conseils de débogage courants

Cible de débogage Outils/Méthodes Description
Lenteur de l'interface de la fenêtre Chrome DevTools → Performance Analysez le temps de rendu et les goulots d'étranglement de l'exécution JS
Plantages de la fenêtre Ajouter try/catch dans le processus principal ou utiliserelectron-logJournalisation Capturer les exceptions du processus principal
Erreurs de communication IPC DansipcMain / ipcRendererAjouter la journalisation Déboguer la communication maître-esclave
Erreur de chemin de fichier Utilisationpath.join(__dirname, 'xxx') Éviter les problèmes de chemins relatifs
Packager et déboguer Utilisationelectron-builder --dirD'abord le mode répertoire de build Peut être exécuté et débogué directement

Recommandations d'outils avancés

Outils Objectif
Electron Forge Outil de génération de projet officiellement recommandé pour créer et empaqueter rapidement un projet
Electron Builder Puissant outil d'empaquetage et de publication
Electron Reload Actualise automatiquement l'application après modification des fichiers
Spectron Utilisé pour les tests automatisés d'applications Electron
Devtron Extension de débogage officielle d'Electron pour analyser l'état interne de l'application
React / Vue DevTools Si vous utilisez un framework frontend, le débogage de l'état des composants est très pratique

Écrivez avec VS Code, inspectez avec DevTools, déboguez avec launch.json et empaquetez avec Builder — c'est la chaîne d'outils complète d'un développeur Electron professionnel.

autres extensions