How do I inspect an Electron app's DOM from a script?
From my understanding you want to inspect or manipulate some HTML of a electron app which is installed?
This is how I figured out how to access (on Mac OS) using Slack as an example:
- Go to your Applications Folder -> Slack -> Right click "Show Package Contents"
- Go To "Contents->Resources -> app.asar.unpacked"
- You can check out how for example parts of the slack app work.
I tried this also with GChat app and they have an app
folder. Technically speaking, you could add a script or something into the index.html / index.jade (slack) and hijack into the main.js or index.js scripts.
For example I was able to search for BrowserWindow
Object inside the Chat App of Google Chat and add .webContents.openDevTools();
easily.
Yet any solution involves manual work.
For example in the main.js
of of GChat I beautified the code, I searched for the Electron method buildFromTemplate
and found the specific function where the View
Menu is created. I simply added the following to that
{
role: "toggledevtools",
label: "Toogle Dev Tools"
}
And at the end I was able to easily toogle devtools (seen in the screenshot)