Search code examples
javascriptgoogle-chromebrowserifyminifyzuul-testing

debug javascript code under test running in the browser using zuul

  1. I've written a javascript component, let's say in file component.js
  2. I've written some tests, let's say in file test-component.js that verify the DOM manipulation that happens in the component. It uses a require('./component.js') statement to load the code under test.

  3. I'm using zuul to run the tests in a local browser.
    The command is similar to:

    zuul --local 8080 --ui mocha-tdd -- src/test/js/test-component.js

  4. I'm browsing to http://localhost:8080/__zuul using Chrome with Developer Tools (F12) open.

  5. I can debug the test code in test-component.js using Chrome (it shows in the same format as in my IDE)

Now my issue: when I open component.js in Chrome Developer Tools, the code shows minified (not obfuscated though). Chrome can pretty-print this minified file, but then you can't add breakpoints and even then there is a line inserted between almost every two lines of code, looking like this:

__cov_CgRFa1QfsDvBYUENO9jTSQ.s['119']++;

I'm pretty sure this is for gathering the test coverage information. But this makes it hard to read the code. Is there a way to run zuul without the minification and the code transformation that adds the statements for code coverage?

Solution

  • Zuul Github wiki instruct to turn off coverage with --no-coverage

    https://github.com/defunctzombie/zuul/wiki/debugging-zuul