Possible to debug?

[jasonaibrahim]

Hey @twolfson, I'm wondering if its possible to set breakpoints in tests with this launcher. I've tried jigging electron-launcher.js to show the browser window and open dev tools and ran karma with the --debug flag, but it doesnt seem to work like the regular chrome launcher.

Do you have any ideas/insight that could help me? The ability to set breakpoints in these tests would be wonderful.

[twolfson]

Yea, it should definitely be possible. Try the following set up:

1. Define a custom launcher which extends ours but sets a --show flag
   • Documented here: https://github.com/twolfson/karma-electron/tree/5.1.1#launcher-configuration
   • No need for the userDataDir setting
2. Launch Karma in continuous mode
   • karma start --no-single-run
3. Electron should launch Karma window with "DEBUG" button in upper right
   • 
4. Click "DEBUG" button and window should open up where you can open Chrome DevTools and get to debugging manually
   • 

[rr326]

How do I set a manual breakpoint? My normal process is to run a test, if it fails, put in a debugger line in the code in the appropriate place, and then play around. When running my multiple karma tests with the above setup, the Karma window opens and I can click the Debug button, but the tests have already failed and the breakpoint is already past.

How do I do this, or is there a better way?

[twolfson]

@rr326 You're super close but missing 1 final step. We need to refresh the page with DevTools open so it doesn't ignore the debugger call. Here's an example screenshot from one of my repos:

[rr326]

Duh - of course. I had figured that out when I was debugging in Chrome but forgot and thought my problem was electron related. Thank you - works perfectly.

[danielkalen]

Is it possible to set karma to load the debug page by default on run without requiring me to click on the debug button? Using sauce labs launcher is practically impossible for me to debug even with screenshots enabled because all that's visible in the screenshots is the initial browsers-list page :/

[twolfson]

I think it should be possible to set the parent window location to the debug page via:

window.parent.location = '/debug.html';

However, that will prob kill any feedback from the browser to Karma's Node.js core (Karma uses websockets to talk back to a live server with 1 parent page creating new child pages for running tests which communicate via cross-frame methods)

A few other solutions might be:

• Explore getting off of our client.useIframe: false flag by seeing if webviews can replace iframes in Karma
  • Initially skipped due to trying to minimize friction with Karma library
• Explore using client.runInParent
  • Didn't exist as an option at the time of creation
  • Also weary of side-effects due to leaky tests

Also, I'm curious -- Sauce Labs doesn't seem to list Electron as a supported browser/application. Is there any reason you're using their launcher?

[trusktr]

My main dev machine is a Chromebook, so running electron non-headless won't work (unless I use a high-resource Ubuntu desktop provided by Crouton on an alternate vt but that has other issues which I like to avoid).

When I debug Node.js apps, I run them with node --inspect-brk then I can open chrome://insect in a Chrome OS tab and inspect the Node app. It would be great to do the same with the Electron processes (while they are headless). Do you know if this is currently possible?

[twolfson]

Coincidentally, I saw that ChromeHeadless (from karma-chrome-launcher) specifies --remote-debugging-port=9222 so I'm guessing everything will work if we do the same. Going to take a shot at it...

[twolfson]

Also, in the future, please open a separate issue for such things @trusktr. This isn't the same as the original question

[twolfson]

Okay, so --remote-debugging-port=9222 is a no go. The reason is that Karma automatically cleans up its iframe/child window contexts whenever a test suite completes. We can navigate to http://localhost:9222/ but there won't be a child context with the proper hooks for us to run

karma-chrome-launcher agrees on this topic in an issue that you (@trusktr) even opened:

https://github.com/karma-runner/karma-chrome-launcher/issues/179

If you'd like to try this out yourself, add it as a flag in our launcher configuration and run karma in continuous mode:

https://github.com/twolfson/karma-electron/tree/6.0.0#launcher-configuration

One other option I thought of was accessing http://localhost:9876/debug.html from a browser. However, due to being karma-electron, we're leveraging Node.js' require so we need to be in an Electron browser for that to work. At that point, we should be using the debugger flow in this document

tl;dr We need to be in an Electron window to get the proper require bindings

[twolfson]

Locking this issue to avoid continuing the unrelated thread here