til: electron_electron-debugger-console.md
This data as json
| path | topic | title | url | body | html | shot | created | created_utc | updated | updated_utc | shot_hash | slug |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| electron_electron-debugger-console.md | electron | Using the Chrome DevTools console as a REPL for an Electron app | https://github.com/simonw/til/blob/main/electron/electron-debugger-console.md | 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. <img width="945" alt="Simon_Willison’s_Weblog_and_DevTools_-_Node_js_and_Inspect_with_Chrome_Developer_Tools" src="https://user-images.githubusercontent.com/9599/131575749-a509c528-6746-42b0-8efd-03cd77f6dc2d.png"> 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: ```json "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`: <img width="901" alt="8_31_21__2_08_PM" src="https://user-images.githubusercontent.com/9599/131576143-03b28fd7-fab4-495a-8060-662b0247eabd.png"> Switch back to the "Console" tab and you can start interacting with the Electron environment. I tried this and it worked: ```javascript const { app, Menu, BrowserWindow, dialog } = require("electron"); new BrowserWindow({height: 100, width: 100}).loadURL("https://simonwillison.net/"); ``` | <p>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.</p> <p><a href="https://user-images.githubusercontent.com/9599/131575749-a509c528-6746-42b0-8efd-03cd77f6dc2d.png" target="_blank" rel="nofollow"><img width="945" alt="Simon_Willison’s_Weblog_and_DevTools_-_Node_js_and_Inspect_with_Chrome_Developer_Tools" src="https://user-images.githubusercontent.com/9599/131575749-a509c528-6746-42b0-8efd-03cd77f6dc2d.png" style="max-width:100%;"></a></p> <p><a href="https://www.electronjs.org/docs/tutorial/debugging-main-process#--inspectport" rel="nofollow">https://www.electronjs.org/docs/tutorial/debugging-main-process#--inspectport</a> says you need to run:</p> <pre><code>electron --inspect=5858 your/app </code></pre> <p>I start Electron by running <code>npm start</code>, so I modified my <code>package.json</code> to include this:</p> <div class="highlight highlight-source-json"><pre> <span class="pl-s"><span class="pl-pds">"</span>scripts<span class="pl-pds">"</span></span>: { <span class="pl-s"><span class="pl-pds">"</span>start<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>electron --inspect=5858 .<span class="pl-pds">"</span></span></pre></div> <p>Then I ran <code>npm start</code>.</p> <p>To connect the debugger, open Google Chrome and visit <code>chrome://inspect/</code> - then click the "Open dedicated DevTools for Node" link.</p> <p>In that window, select the "Connection" tab and add a connection to <code>localhost:5858</code>:</p> <p><a href="https://user-images.githubusercontent.com/9599/131576143-03b28fd7-fab4-495a-8060-662b0247eabd.png" target="_blank" rel="nofollow"><img width="901" alt="8_31_21__2_08_PM" src="https://user-images.githubusercontent.com/9599/131576143-03b28fd7-fab4-495a-8060-662b0247eabd.png" style="max-width:100%;"></a></p> <p>Switch back to the "Console" tab and you can start interacting with the Electron environment.</p> <p>I tried this and it worked:</p> <div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-kos">{</span> app<span class="pl-kos">,</span> Menu<span class="pl-kos">,</span> BrowserWindow<span class="pl-kos">,</span> dialog <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"electron"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">new</span> <span class="pl-v">BrowserWindow</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">height</span>: <span class="pl-c1">100</span><span class="pl-kos">,</span> <span class="pl-c1">width</span>: <span class="pl-c1">100</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">loadURL</span><span class="pl-kos">(</span><span class="pl-s">"https://simonwillison.net/"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> | <Binary: 110,854 bytes> | 2021-08-31T14:09:41-07:00 | 2021-08-31T21:09:41+00:00 | 2021-08-31T14:09:41-07:00 | 2021-08-31T21:09:41+00:00 | a7c80b899e1517f7958dcac1820cbeca | electron-debugger-console |