Using Augury inside of your Electron Apps

Using Augury inside of your Electron Apps

During AngularCamp here in Barcelona I had the chance to attend Vanessa Yuen. She's a fullstack developer at and came all the way from Toronto (Canada) to the beautiful and sunny Barcelona to share key concepts and responsibilities of their latest tool, Augury.

Let's keep the story short. Augury is a Chrome Developer Tools extension that will enhance your debugging capabilities for Angular2 Applications. Vanessa did an amazing job on explaining the insights and demonstrating how latest Augury bits could save you a lot of time and provide a great visualization of your App's dependency tree.

Lino, another AngularCamp attendee asked me if it's possible to use Augury inside of an Electron App to make debugging Angular2 Desktop Apps also easier.

So I spent a couple of minutes to build a short sample from scratch. It should be easy to follow these instructions in oder to get things up and running.

  • Install Augury in your local Chrome Browser Installation by pulling it from the Chrome WebStore
  • open another tab and navigate to chrome://extensions/
  • locate Augury and copy the id from the extension instance. Something like elgalmkoelokbchhkhacckoklkertfdd

Not its depending on your platform on where you'll find the actual extension installation.


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


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


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

Navigate inside of the actual extension folder. Rangle.IO is currently packaging the extension inside of a subfolder matching the version number. navigate into this folder and copy the full path of this folder using pwd|pbcopy

Having all the requirements, update your electron "instruction file" and call the static method to enable Augury.


Keep in mind that it's not allowed to call the addDevToolsExtension method before app's ready has been fired.

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';
    // open devTools on demand
    globalShortcut.register('CmdOrCtrl+Shift+d', ()=>{

    mainWindow.setTitle('Augury Electron Integration');

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

When running your app and opening the DevTools you may recognize the entire Augury feature set inside of your electron app.

Augury Goodness in Electron

If you've any problem on following those steps or get things up and running, just send me a tweet or leave a comment below.

Happy debugging guys and girls

Are you already maintaining Angular apps and need help? Do you want to get a code review? Contact me and I'll help you shaping your codebase!


comments powered by Disqus