Debug Karma tests with VSCode

ref: http://blog.mlewandowski.com/Debugging-Karma-tests-with-VSCode.html

 

Full config available at karma-and-vscode-debugging’s launch.json file.

ref: https://github.com/Microsoft/vscode-chrome-debug/issues/393

FAQs:

  • Unable to find sourcemaps
    • Setup your repo as “Workspace” in chrome dev tools and then set breakpiont on ts file (works best with inlineSourceMaps set to true)
    • Figure out what scripts are running and what they’re mapping to: You can enter .scripts in the debug console to see a listing of all scripts loaded in the runtime, their sourcemap information, and how they are mapped to files on disk.  (ref: https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md)
    • If breakpoints don’t bind at first, try refreshing the page, because chrome may garbage collect scripts when they are done running.
    • Try these propeties in launch.json:
      • “sourceMapPathOverrides”: {
        “webpack:///C:*”:”C:/*”
        }
      • ref: https://github.com/Microsoft/vscode-chrome-debug/issues/367
      • “sourceMaps”: true,
      • “diagnosticLogging”: true,
      • “webRoot”: “${workspaceRoot}”
    • Try in tsconfig
      • inlineSourceMaps
    • Run the Karma/Jasmine Tests using VSCode script: https://github.com/Microsoft/vscode-chrome-debug/issues/369
  • Karma Config
    • singleRun: false  //so that karma keeps running…
    • port: 9876 // make sure launch.json has this port that it’s attaching to
    • preprocessors // Disable this as it might mess up debugging ,
    • autoWatch: true,
    • customLaunchers: {
      Chrome: {
      base: ‘Chrome’,
      flags: [‘–remote-debugging-port=9333’]
      }
      }  // to enable vscode to connect to chrome for debuggign (keep devTools in chrome closed)
      browsers: [‘Chrome’], //run in browser and not headless to be able to connect to it from vscode debugger
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s