Browserify sourcemaps not loading when debugging in Chrome

Question

I'm developing an Angular app. When trying to debug my directive's link function I run into problems with Chrome regarding source maps.

On the first load of the page (triggered by Gulp and BrowserSync), everything is just nice and dandy: I can see both the browserified file as well as the single source files from the map. There is an error in the console, so I click on the call trace to explore it and the correct line of code will be shown inside the source file - just as expected.

The trouble begins by setting a breakpoint in my code and reloading the browser to debug. The execution halts at the breakpoint - ok -, yet apparently no source file has been loaded yet. Instead where before had been the source file, a text of friendly green letters tells me:

Please wait a bit. Compiled script is not shown while source map is being loaded!

That is correct. I can see in the sources tab that it's indeed not loaded, yet nothing further ever happens (presumably due to the breakpoint).

I've never had that behavior before. I don't think it's due to my Browserify source maps, rather I suspect it's an issue with Chrome.

In Firefox everything works as it should. But I much prefer Chrome over Firefox, so...

Did any of you ever had this issue or has any idea what might be causing it?

The Chrome version that I'm is using version 41.0.2272.118 (the current one as of asking this question).

Titanomachy

Have you checked the permissions on the folder? – Lottie

You mean the folders containing the source files? They're all drwxr-xr-x - but I doubt that it's a permission issue since the sources are properly loaded unless I set a breakpoint. – Titanomachy

I get the same message, which blocks me from seeing the breakpoint at all. Other devs in my shop do not have this problem. I am using a factory to create a local service, and I have a gut feeling that that is the problem. The code for that starts like this module.exports = function(app) { app.factory('finder-logic', ["$q", "services", function($q, srv) { Ideas? – Acting

For some odd reason it now appears to be working. My guess is that it must have been some sort of hickup due to Chrome version (it's updating automatically). I don't think that using a factory could cause this. I am pretty sure that it is/was a Chrome issue. Were you able to figure it out? – Titanomachy

I got a same problem with you with my browser-sync angular typescript app. I've not found any solution yet. Have you solved it? – Trilbee

the only solution is to wait for some seconds then it will automatically take you back to the source – Botti

Answer 1

In my experience, having a breakpoint on the server side was what appeared to be preventing Chrome from doing what it needed to and thus hung on:

Compiled script is not shown while source map is being loaded

Ending the debug session / allowing the debug to continue allowed the source to resolve.

Mcminn

Answer 2

I disable Javacript source maps in chrome devtool and was able to debug it.

Aikoail