Improve debug cycle

Debugging typically requires the same dance, every time:

1. Kickoff a karma run (karma start). Chrome launches (with a fresh, new user profile), karma captures it, and runs the tests.
2. Click the “Debug” button. New browser tab opens at http://localhost:9876/debug.html.
3. Open DevTools (CMD+OPTION+I). In modern versions of Chrome, DevTools now defaults to ‘docked to right’, with a width of ~30% of the browser window (far too small for debugging).
4. (Either) Click the ‘dock’ toolbar button to switch to ‘docked to bottom’ mode, OR
5. Drag the left edge of the DevTools, to maximum width (~%90)
6. Switch to Sources tab
7. Add breakpoint(s)
8. Reload page…and commence debugging.

In a perfect world, clicking the “Debug” button would perform steps 3-6; so that you’re automatically dropped into the (appropriately sized) Sources tab, ready to start debugging.

I understand that DevTools cannot be opened programmatically (from JS script), because it isn’t sandboxed (the script behind the “Debug” button, which is sandboxed, wouldn’t have sufficient privileges to open DevTools); so I can appreciate that step 3 is unlikely to ever be automated. The keyboard shortcut is about as good as we’ll ever get (unless there’s some Chrome extension that does this, that could be included with the --load-extension option?).

I also understand that because karma-chrome-launcher uses a new profile on each launch; there’s nowhere to specify preferences for DevTools such as ‘dock to bottom’ or ‘remember the last used height/width/position’. I checked the list of Chrome CLI switches, but couldn’t find any args that would achieve this. I guess the only way it would be possible would be if karma-chrome-launcher could inject settings into the new profile it uses when launching Chrome?

The other thing that particularly annoys me is that I often have a karma-captured Chrome window open for long periods (eg. I use gulp to watch & run tests whenever file is changed). When I click a URL in an email/Twitter client/etc… I never want that link to open in the karma-captured Chrome window. I always want it to open in a Chrome window (existing or new) using my Chrome profile. Is there any flag that karma-chrome-launcher can pass to Chrome to say “don’t accept external requests from the OS to open links?”

I’m aware of the workaround for making Chrome run in the background (#27); which I guess would prevent links from opening in the background window; but then you lose the ability to debug when required.

That’s my wish list, anyway.

[ltvolks]

It is also useful to be able to setup and save Workspace settings across multiple invocations. It would be nice to be able to selectively inject saved DevTools settings into a fresh profile, but I’m not aware of any mechanism to do so. A brute force approach is to pass the --user-data-dir flag to a custom launcher:

    browsers: ['Chrome'],

    customLaunchers: {
      Chrome_DevTools_Saved_Prefs: {
        base: 'Chrome',
        flags: ['--user-data-dir=./tests/config/.chrome_dev_user']
      }
    }

Then:

karma start --browsers Chrome_DevTools_Saved_Prefs

This will allow you to reuse the profile and takes care of steps 4-7 (breakpoints are also preserved). When you want to test using a fresh profile, use the default Chrome launcher or wipe the user-data-dir.

[yarl]

What is working for us is:

browsers: [
  'Chrome'
],
customLaunchers: {
  Chrome_DevTools_Saved_Prefs: {
    base: 'Chrome',
    flags: ['--auto-open-devtools-for-tabs']
  }
},