In this article, we will guide you through the process of decompiling a production Electron app on Mac or Windows. I've found this useful for debugging issues that only seem to appear in the production app but not in development. It's also a neat trick if you want to look into the source of any Electron Application.
Before we dive into the decompilation process, ensure that you have Node.js and npm installed on your Mac. You can download and install them from the official Node.js website.
The Electron application’s source code is usually packaged in an ASAR archive to improve performance and protect the source code. To extract the contents of this archive, we will use a tool called
Install the asar package globally on your system using npm:
npm install -g asar
This command installs the asar utility globally, making it accessible from any terminal window.
Navigate to the Electron application's resources directory. This is where the ASAR archive is located.
For Mac users, the path to the resources directory is in the following format:
For Windows users, that path should look like this
Replace "YourAppName" with the name of the Electron application you are working with.
Once inside the resources directory, you can extract the contents of the ASAR archive. The ASAR file is named app.asar. To extract it, run:
asar extract app.asar app
This command creates a directory named app, containing all the files from the app.asar archive.
Now the fun part, we can make changes to the newly created "app" directory and those changes will be reflected in the app. In order to make changes to the application and see the effects in real-time, you need to ensure that Electron loads the extracted files instead of the ASAR archive. To do this, rename (or delete) the original ASAR file:
mv app.asar original-app.asar
With this change, when you launch the Electron application, it will load the files from the "app" directory instead of the ASAR archive. You can now edit the contents of this directory and relaunch the application to observe the changes.
Finally, it can be handy for debugging to see log messages from the main process. To do this then you can launch the binary directly from the terminal. Here's how you do it on Mac:
And on Windows, just
cd into the correct directory and you can execute the app directly:
cd C:\Users\YourUserName\AppData\Local\Programs\YourAppName "YourAppName.exe"
This is a super useful debugging technique for your own app. If you are using it with someone elses app then please respect copyright and licensing agreements. Happy coding!