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:

  1. Go to your Applications Folder -> Slack -> Right click "Show Package Contents"
  2. Go To "Contents->Resources -> app.asar.unpacked"
  3. 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)

enter image description here