Komm zur dunklen Seite der Macht, wir verwenden Cookies! Alles zum Datenschutz findest du hier: Datenschutz.

ReactJS Devtools in Electron verwenden

Das Debugging einer ReactJS Anwendung ist mit den ReactJS Devtools bedeutend einfacher, als wenn man nur den Chrome Browser Insprector, innerhalb der Electron Anwendung, verwendet. Nachfolgend also eine kurze Beschreibung wie man die Devtools in einer Electron Anwendung nutzen kann. Ich nutze macOS als Betriebssystem.

  • Die ReactJS Chrome Extension in Chrome installieren.

  • Mittels der Extension ID (zb. “fmkadmapgofadopljbjfkapdkoienihi”) den Pfad zur Extension herausfinden. Unter macOS per Terminalbefehl:

      $ find ~/Library -name fmkadmapgofadopljbjfkapdkoienihi
      /Users/arnegockeln/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi
    
  • Die Extension Version herausfinden und den Pfad kopieren:

      $ cd "/Users/arnegockeln/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi"
      $ ls -lh1
      0.15.4_0
      $ cd 0.15.4_0
      $ pwd
      /Users/arnegockeln/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.4_0
    
  • In der main.js von Electron die Browser Extension bekannt machen:

      function createWindow(){
          win = new BrowserWindow({
              width: 800,
              height: 600,
              minWidth: 800,
              minHeight: 600
          });
    
          // REACT JS DEV TOOLS EXTENSION
          BrowserWindow.addDevToolsExtension("/Users/arnegockeln/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.4_0");
    
          win.loadURL(`file://${__dirname}/index.html`);
    
          win.webContents.openDevTools();
    
          win.on('closed', () => {
              win = null;
          })
      }
    
  • Electron neu starten.

Das wars schon. Dann kann man die ReactJS Devtools in Electron verwenden und zum Beispiel alle Componenten absteigend aufklappen und sehen welche Properties und States live geändert werden. Sehr praktisch!