Using the Chrome DevTools console as a REPL for an Electron app

I figured out how to use the Chrome DevTools to execute JavaScript interactively inside the Electron main process. I always like having a REPL for exploring APIs, and this means I can explore the Electron and Node.js APIs interactively.

https://www.electronjs.org/docs/tutorial/debugging-main-process#--inspectport says you need to run:

electron --inspect=5858 your/app

I start Electron by running npm start, so I modified my package.json to include this:

  "scripts": {
    "start": "electron --inspect=5858 ."

Then I ran npm start.

To connect the debugger, open Google Chrome and visit chrome://inspect/ - then click the "Open dedicated DevTools for Node" link.

In that window, select the "Connection" tab and add a connection to localhost:5858:

Switch back to the "Console" tab and you can start interacting with the Electron environment.

I tried this and it worked:

const { app, Menu, BrowserWindow, dialog } = require("electron");
new BrowserWindow({height: 100, width: 100}).loadURL("https://simonwillison.net/");

Related

• electron Testing Electron apps with Playwright and GitHub Actions - 2022-07-13
• electron Open external links in an Electron app using the system browser - 2021-09-02
• electron Configuring auto-update for an Electron app - 2021-09-13
• chrome Google Chrome --headless mode - 2024-03-24
• typescript Very basic tsc usage - 2020-09-06
• electron Bundling Python inside an Electron app - 2021-09-08
• npm Running self-hosted QuickJS in a browser - 2024-03-20
• observable Using jq in an Observable notebook - 2023-03-25
• electron Signing and notarizing an Electron app for distribution using GitHub Actions - 2021-09-08
• deno Running Python code in a Pyodide sandbox via Deno - 2023-05-10

Created 2021-08-31T14:09:41-07:00 · Edit