How to debug ES6 jasmine tests and set breakpoints from PhpStorm?

This is related to this post I guess.

 

The following debug configuration works well when I *run* it globally :

See, this works:

But as soon as I try to run only *one* test using the icon in the gutter, it fails :



```text
/usr/bin/node --debug-brk=34789 --expose_debug_as=v8debug /home/user/dev/autoNumeric/test/unit/autoNumeric.spec.js
Debugger listening on [::]:34789
/home/user/dev/autoNumeric/test/unit/autoNumeric.spec.js:35
import AutoNumeric from '../../src/AutoNumeric';
^^^^^^

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.runMain [as _onTimeout] (module.js:441:10)
    at Timer.listOnTimeout (timers.js:92:15)

Process finished with exit code 1
```

Moreover, if I try to *debug* (not run) the `autoNumeric Unit Tests` configuration, I get this screen :

If I manually open the `http://localhost:9876` link in Chromium, the test is run, but the breakpoints are ignored :

My questions are:

- Is there a way to make the breakpoints work in that Jasmine + ES6 configuration?

- Is there a way to not have to manually open Chromium for PhpStorm to debug the code?

 

If you want to be able to reproduce the bug, it's pretty easy :

- Go the repo using : `git clone -b next https://github.com/autoNumeric/autoNumeric.git`

- Then `cd autoNumeric`

- Then install the npm dep with `yarn install`

 

You are then good to go.

You can check that the tests runs ok with the command line using `yarn test:unitp`.

15 comments
Comment actions Permalink

>But as soon as I try to run only *one* test using the icon in the gutter, it fails

can't recreate - to me, the test is correctly run with karma run configuration (and not with Node.js as it happens to you). What PhpStorm version do you use? Do you have existing Node.js run configurations associated with this file?

>Is there a way to make the breakpoints work in that Jasmine + ES6 configuration?

Unfortunately the debugger detauches immediately on starting when using your project (logged as https://youtrack.jetbrains.com/issue/WEB-28008)

As a workaround, you can try the following:

- create a new JavaScript Debug run configuration with http://localhost:9876/debug.html URL, webpack:///. set as URL mapping for root folder

- start karma using Karma run configuration

- once server is up and running, debug the configuration above

> Is there a way to not have to manually open Chromium for PhpStorm to debug the code?

Not possible currently, please vote for https://youtrack.jetbrains.com/issue/WEB-28009

FYI: couldn't run your tests (via yarn script or karma configuration):

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'preLoaders'.

Had to downgrade webpack to "^2.1.0-beta.22"

0
Comment actions Permalink

Hey Elena,

thanks for your quick answer.

I'm currently running:

PhpStorm 2017.2
Build #PS-172.3317.83, built on July 18, 2017
JRE: 1.8.0_152-release-915-b5 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Linux 4.9.0-3-amd64

> Do you have existing Node.js run configurations associated with this file?

Indeed I had a node.js run configuration file laying around. After deleting it I can now run a single test using the gutter icon, thanks!

 

> As a workaround, [...] create a new JavaScript Debug run configuration

Using that new JavaScript Debug configuration, I'm now also able to debug my code, neat.

 

Thanks for opening those tickets.

 

> FYI: couldn't run your tests

Ah, that is good to know. I'm guessing I defined the version requirement a bit too broadly in `package.json`; instead of `latest`, it should be webpack `1.14.0`.

 

Thank you again for pointing that out to me, and for solving and giving workarounds for the other problems!

 

Have a good day

 

0
Comment actions Permalink

I tried again today to debug my code using breakpoints with the Jasmine tests, (using the new JavaScript Debug run configuration with http://localhost:9876/debug.html URL), and it failed showing this error message :

`Cannot decode sourcemap data URI http://localhost:9876/base/node_modules/ajv/dist/nodent.min.js`

Note: since my first post, I updated the `package.json` dependency versions to use more precise one.

This time to test launching a single test, you can clone the `master` branch of the AutoNumeric repository using:

```sh
git clone -b master https://github.com/autoNumeric/autoNumeric.git && cd autoNumeric && yarn install
```

0
Comment actions Permalink

Your screenshot shows that you are debugging using karma run configuration.... 'Cannot decode sourcemap' exception is  thrown when using your previous project version as well, exception is caused by some  ajv/dist/nodent.min.js specifics; it doesn't actually break the debugging

 

0
Comment actions Permalink

Indeed, I clicked the gutter icon to launch the test, and it failed like that.

However, now if I use the "JavaScript Debug configuration", this time breakpoints are not hit.
I'm not sure what changed since last time I tried.

To sum up how I manage to see that bug :
- Launch the karma tests once so that the karma server is up and running
- Setup a breakpoint
- Debug the 'JavaScript Debug configuration'
--> Breakpoints are not hit

I made a small screencast just in case I missed something : https://vid.me/Kz9wq

Thanks for your time

 

0
Comment actions Permalink

Debugging with JavaScript Debug run configuration still works for me

from your screencast i can see that sourcemaps are resolved and proper files loaded (breakpoints have checkmarks within them). Try refreshing the browser page (the one debugger is attached to)

0
Comment actions Permalink

Well, today I did the exact same step as shown in the screencast, and this time debugging worked.

I'll stop bothering you about this once I'll find out how to reproduce this bug 100% of the time.

Thanks again

0
Comment actions Permalink

Ok it seems you just have to refresh the page manually most of the time (which is annoying, in my opinion PhpStorm should update it itself).

However, the breakpoints do stop the program execution, but the showed line is wrong (always on line 9 it seems).
This makes debugging impossible.

I think this is related to the fact that the ES6 source is compiled with webpack, and somehow that must not translate correctly with PhpStorm.

When launching the tests in the terminal, you can see the translation between the webpack compiled file and the source:

```text
Firefox 52.0.0 (Linux 0.0.0) Static autoNumeric functions `format` should format with user options FAILED
        Expected '1,234.56' to equal '1.234,56 €'.                                                        
        @http://localhost:9877webpack:///test/unit/autoNumeric.spec.js:5953:12 <- tests.webpack.js:6469:14
        [3]</ContextKarma/this.loaded@http://localhost:9877/context.js:162:7                              
Firefox 52.0.0 (Linux 0.0.0): Executed 1 of 250 (1 FAILED) (skipped 249) ERROR (1.469 secs / 0.017 secs)  
error Command failed with exit code 1.
```

The screencast showing the error : https://vid.me/loKxD

0
Comment actions Permalink

>Ok it seems you just have to refresh the page manually most of the time (which is annoying, in my opinion PhpStorm should update it itself).

known issue: when using sourcemaps, breakpoints in code that is executed on page loading don't immediately work unless the page is hosted on built-in webserver, see https://youtrack.jetbrains.com/issue/WEB-19372.

 

>I think this is related to the fact that the ES6 source is compiled with webpack, and somehow that must not translate correctly with PhpStorm.

 

such issues are usually caused by inaccurate sourcemaps. You will likely face the same problem when debugging in Chrome Dev Tools

0
Comment actions Permalink

The sourcemaps are correctly generated by Webpack.
I checked and you can see on this screenshot that the line number is correct there.

Also, it's not possible to comment on issue https://youtrack.jetbrains.com/issue/WEB-19372, why is that? It's currently triaged as a feature while it's clearly a bug.

Is there any plan to fix that?
Thanks

0
Comment actions Permalink

What exactly happens when you try commenting the issue?

Unfortunately, we can't provide you with any precise deadlines.

0
Comment actions Permalink

Today I could see the textarea to post a new comment, while yesterday I could only see the previous comments, but not that textarea.
This is somehow automagically fixed today!

For the initial 'Debugging' issue though, do I need to create a new issue about the faulty sourcemaps <-> debugger link ?
Currently this makes debugging just impossible on webpack-generated builds, it's pretty critical in my opinion.

0
Comment actions Permalink

>I checked and you can see on this screenshot that the line number is correct there.

From your screenshot it seems that breakpoints are set in auto-generated file autonumeric.js?b2e9 and not in original source files

Please can you provide exact steps to recreate the issue using the https://github.com/autoNumeric/autoNumeric.git project?

0
Comment actions Permalink

In the shell:
» cd /tmp && mdkir jetbrains && cd jetbrains
» git clone -b next https://github.com/autoNumeric/autoNumeric.git
» cd autoNumeric
» yarn
» yarn build

- Launch PhpStorm and create a new project from existing files
- Create the debug configuration like you mentioned in https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000478570/comments/115000392430
- Create the karma configuration
- Launch the karma configuration
  It then says to open the 'http://localhost:9876/' link to capture it
  Open it in Chrome, and the tests are run
  Do not stop the karma server once the tests have finished running
- Add a breakpoint in `AutoNumeric.js` (I put on in `_checkIfInRangeWithOverrideOption()`, on the `value = value.toString();` line)
- Select the Debug configuration created earlier, and debug that
  There, it runs the unit tests instead of just showing the `index.html` page, but oh well, let's use that.
- So, since PhpStorm is debugging the unit test file, open `test/unit/autoNumeric.spec.js`, and add a breakpoint on line 1130 `aNInput = new AutoNumeric(newInput, AutoNumeric.predefinedOptions.French);`.
- Re-run that debug configuration, the breakpoint is hit, at the right place **in this file**.
- If you hit 'F7' to step into an AutoNumeric function (ie. `getFormatted()`), then it brings you in the `AutoNumeric.js` file, but highlight the line number 9.
  (To get to that function, hit 'F8' 9 times, then on the `expect(aNInput.getFormatted()).toEqual('-400,00\u202f€');` line, hit 'F7').


Note : If you open a Chrome tab and paste that link : file:///tmp/jetbrains/autoNumeric/test/e2e/index.html, you can manipulate the source and put breakpoints, which Chrome will recognize at the right line numbers.

0
Comment actions Permalink

when I follow the steps to create the app, run karma, then open http://localhost:9876/debug.html in Chrome, open Dev tools, then use Sources tab to open webpack:///./test/unit/autoNumeric.spec.js, set breakpoint on line 1130, refresh page to get breakpoint hit, step in => debugger stops at line 9 in webpack:///./src/AutoNumericPredefinedOptions.js:

 

 

 

0

Please sign in to leave a comment.