Source panel in Chrome Dev tools empty even when mapped

Question

So, after many months of happily debugging our Angular2 app using the Chrome Dev Tools, each of our team member is falling victim (each, a few days apart) to what seems to be a nasty bug:
For no obvious reason, the Sources panel is not displaying the Typescript source anymore even though it says it is correctly mapped.

This is using Chrome 55.0.2883.87 on Windows 10. I also tried to install Chrome Beta 56.0.2924.28 hoping it was a recently introduced bug that had since been fixed but no luck.

I tried removing/re-establishing the mapping and, every time, it seems to be happy with it but still shows an empty panel when debugging.

As you can see here, the folder structure does match the mapping settings

And here the folder being served containing the JS and map files This is the first line of my mapping file: {"version":3,"file":"myp.component.js","sourceRoot":"","sources":["../../../../App/projections/myp/myp.component.ts"]

To add to the mystery, the panel does show my source while the page is being loaded but it quickly goes away.

I must insist that all of us have been successfully using the Dev Tools for years (months on this particular app) with zero problem until late last week.

Answer 1

We are also having the same issue. We decided to download the Canary build of Chrome and everything works fine. Canary is the unstable nightly builds so they must already know of this bug and have it fixed. It can be downloaded here

Answer 2

As @wOxxOm suggested, I installed an older version of Chrome (from this web site, 54.0.2840.71 worked for me). I'm reporting the bug to the Chrome team.