Debugging in Electron?

[scripting]

Question about debugging in Electron. I want to inspect an object in the HTML page. In the browser I'd right-click on the object, and choose Inspect from the menu. How do I do this in an Electron app?

[scripting]

[FTWynn]

I believe you use keyboard shortcuts to bring up the dev tools (Control+Shift+I on my Windows box), then click the Element chooser in the upper left of the dev tools window.

[scripting]

I think perhaps people don’t know what the Inspect command in the browser does. You right click on an object, and it takes you to that object in the element view. I know how to get to the element view.

[FTWynn]

My unfamiliarity with Electron might be showing, but I do think this does what you want. The top left button (blue in screenshot 2 turns the cursor into a hover clicker that, when you click on your target object, will jump to it in the Element view.

[scripting]

Yes! This works. Thank you. ;-)

I now see that's what you were saying in your first message, but I didn't get it.

I'll have another question shortly.

[scripting]

As promised -- the next question...

In Chrome, when I make a change in some code, sometimes just reloading the page doesn't cause the changes to load. There is a way to force it to do so. 1. Open the JavaScript console. 2. In the browser toolbar, hold down the mouse button while clicking on the Reload icon. A menu pops up, offering you a chance to "Hard reload" the page. The single keystroke for this is Cmd-Shift-R (on the Mac at least). That will avoid using cached copies of files that are included by the app.

How do you do this in Electron? I've been trying to add a cache confuser to the <script> element, but that doesn't always work. I need a reliable way to make sure new versions of code are loaded. It's pretty hard to debug if you can't quickly make changes.

[kimhornung]

One way to mimick the “hard reload” is to go to the Network tab in the Inspector. That tab should have a “Disable cache” checkbox (located in the first row below the tabs). That should force the browser to reload all resources from the server on every request.

[owenmorris]

A combination of creating a keyboard shortcut interceptor in your main process like this example: https://www.electronjs.org/docs/tutorial/keyboard-shortcuts#example-1 and then calling the reloadIgnoringCache method of webContents should do it (see https://www.electronjs.org/docs/api/web-contents#contentsreloadignoringcache)