Writing apps using GitHub’s Electron is a fairly easy task. The framework and community driven tools are taking away a lot of pain from you as developer. Nevertheless it is important to have powerful debugging tools working in every environment. Augury (created by Rangle.IO) is currently the most powerful debugging tool for Angular 2 developers. It’s a Chrome Extension that works perfectly inside of the Browser, in this post you’ll learn how to use Augury inside of your Electron apps.

While attending AngularCamp here in Barcelona, I had the chance to attend Vanessa Yuen. She’s a fullstack developer at Rangle.io and came all the way from Toronto to the beautiful and sunny Barcelona to share key concepts and responsibilities of their latest tool, Augury. Vanessa did an amazing job on stage, she explained how Augury works and how it will enrich every Angular 2 developer’s life. Besides displaying the component tree of your application, Augury provides insights about the router configuration and a dependency tree visualiztion. Compared to all other debugging tools for Angular 2 I’ve seen so far, Augury seems to be the most powerful.

Lino (@linoman), another AngularCamp attendee asked me if it’s possible to use Augury inside of Electron apps to have the same, great debugging experience also in Angular 2 desktop applications. I spent a couple of minutes to build a short sample from scratch. It should be easy to follow these instructions to get Augury also up and running in your Electron application.

Embed Augury in Electron apps

From this point it time, the following steps depend on your platform and system configuration. You need to find the local path of your Augury installation. The upcoming paths may differ depending on your operating system version, but at least those default paths should provide a hint.

Windows

%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions

MacOS

~/Library/Application Support/Google/Chrome/Default/Extensions

Linux

Depending on the package you used to install Chrome on your Linux system, you’ll find the your extensions in on of those paths.

~/.config/google-chrome/Default/Extensions/
~/.config/google-chrome-beta/Default/Extensions/
~/.config/google-chrome-canary/Default/Extensions/
~/.config/chromium/Default/Extensions/

Once you found your local extensions folder, navigate to the subfolder named your Augury extension instance id. Rangle.IO is currently packaging the extension in a folder matching Augury’s version number. Because you need the path pointing to the manifest, navigate into the version specific folder and copy the entire path. On MacOS and Linux you can use pwd | pbcopy to put the current working directory into your clipboard.

Okay, now you’ve all pre-requirements in place and you can move on to your Electron “instruction file” and use Electrong’s API to bring Augury to your custom application. Electron is exposing a method called addDevToolsExtension as static member on BrowserWindow.

BrowserWindow.addDevToolsExtension(auguryPath);

In order to call into the method, you have to pay respect to Eelctron’s application lifecycle. It’s not allowed to call this method before the ready event fires.

Here a small example for a really simple Electron “instruction file” using addDevToolsExtension.

app.on('ready', () => {
    mainWindow = new BrowserWindow({ width: 1000, height: 700 });
    let auguryPath = '/Users/thorsten/Library/Application Support/Google/Chrome/Default/Extensions/abcdefghijklmnopqrs/1.0.3_0';
    BrowserWindow.addDevToolsExtension(auguryPath);

    // open devTools on demand
    globalShortcut.register('CmdOrCtrl+Shift+d', () => {
        mainWindow.webContents.toggleDevTools();
    });

    mainWindow.setTitle('Augury Electron Integration');
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
});

See it in action

Having finished the integration, it’s time to give it a try. Start your application and open the great Chrome Developer Tools (here asigned to the shortcut CmdOrCtrl+Shift+d).

Augury Goodness in Electron

As you’ve seen, the trickiest part is finding your local installation of Augury. Integration with GitHub’s Electron is really easy. Nevertheless if you encounter any problems or errors while integration Augury, ping me.