Javascript debugging + sourcemaps

I have read every resource I could find online, but I'm still doing something wrong because for the life of me I can't get this to work.

Using IDEA 14, I'm running a django dev server and hosting a SPA from the /static directory. The javascript app is in /static/app/scripts/app.js, and after concatenating with gulp the result file goes to /static/build/app.js and sourcemaps to /static/build/app.js.map. These source maps work just fine in Chrome if I run the django server and debug from the Chrome window. I think I've tried every possible URL combination for the "Remote URL" box in the Javascript Debug Run/Debug Configurations window. I've tried with /, /static, /static/build, /static/app, /static/app/scripts as 127.0.0.1:8000, and I've tried all of those with a bunch of other folders too like 127.0.0.1:8000/static, 127.0.0.1:8000/static/app, etc. Is there anyone who can make this less confusing, please?

Thanks!

3 comments
Comment actions Permalink

please can you attach a sample project that shows up the issue? If it's not possible, may be, just a gulpfile? The problem may be related to  a way gulp produces sourcemaps (inline/external, etc.)

0
Comment actions Permalink

Probably the easiest thing to do is just explain my package setup because it's going to be hard to recreate the exact environment I think... Here's a link to a pastebin with all of the details, including my gulpfile:

https://bpaste.net/show/ffedb034ba63

Thanks for any help if you know what's wrong, because this is really bothering me!

Edit: Should add that I can even see the scripts in javascript debugger Scripts tab, and I can right click the scripts folder and link it to my app's scripts folder, but still nothing when I try to set a breakpoint. In the debugger scripts tab, the sources are located at http://127.0.0.1:8000/source/app/scripts, so what makes the most sense to me would be setting /django-project/static local directory to http://127.0.0.1:8000/source, that way the /app directory is the same on both sides, which I think is how it's supposed to be set up. In the debugger scripts tab, "view actual source" takes me to the source hosted on the webserver, "view local source" takes me to the correct local file, and these are the same files. The maps work, and IDEA clearly knows which files on the server are which files on the local project. Yet, no debugging.

0
Comment actions Permalink

Please see https://devnet.jetbrains.com/message/5535674#5535674 for some hints (try disabling inline maps + provide the actual sourceRoot).
Using browserify can also be a problem, as the debugger can't recognize source maps produced by it (https://youtrack.jetbrains.com/issue/WEB-14454)

0

Please sign in to leave a comment.