Cannot set a breakpoint through webpack

Developer Tools
#1

Hello,

I’m starting an Angular course as a newbie. As the course mentioned, I should be able to set a breakpoint through the Developer Tools. The TypeScript code that I’m trying to debug is “bundled” in webpack (12th line in below screenshot):

Firefox_57_DeveloperTools_CannotSetBreakpoint
Firefox_57_DeveloperTools_CannotSetBreakpoint.png3360×710 272 KB

Unfortunately, when trying to set the breakpoint, it appears and then immediately disappears. I mean the arrow highlighting the line and the breakpoint in the right panel disappear. I’m currently on Mac OS X, but I’ve also tried on Windows 10. I’ve not met this issue on Google Chrome.

I’ve also tried to add a breakpoint on a simple Javascript, and it works fine:

Firefox_57_DeveloperTools_BreakpointWorks
Firefox_57_DeveloperTools_BreakpointWorks.png3360×370 107 KB

You can find the code that I’m trying to debug in the following repository: https://github.com/DeborahK/Angular-GettingStarted/tree/master/APM-Start

Thanks for your help :slight_smile:

#2

I also have the same problem that I can’t set a breakpoint though I don’t use “webpack” (I don’t know what webpack is).

This would happen at a random point when I have been doing intense debugging. I have experienced this a couple of times and only way to fix it would be to “Refresh Firefox” from the troubleshooting information. But this “Refresh Firefox” removes add-ons etc., so I really hate to do this to just clear the problem.

As many said, I loved Firebug very much and I’m really sad that Firefox Quantum no longer supports Firebug and instead it advertises very buggy and slow developer tool. There are a couple of other problems but I just want to focus on this problem first. If I were unable to set a breakpoint, I would have to switch to Chrome, which I hope won’t happen.

I use Firefox 61.0 (64-bit) on Windows 7. This issue has happened with Firefox 60 (64-bit) on Windows 10, too.

#3

To follow up with my post, I found a workaround.

It seems the problem would happen after I turned “Enable Source Maps” option off. I turned it off because my scripts were not minimized and I thought this option would slow down the dev tool’s performance.

I turned it on again, cleared all caches and restarted Firefox. Then, I was able to set a breakpoint. Back to normal. I’m not sure if I needed to clear caches, though.

Anyway, I think this issue is a bug of Firefox >57 where the dev tool gets confused to locate the line when “Enable Source Maps” is unchecked.

#4

@Willouu8 could you try again in Firefox 62 (DevEditon). We improved source maps, especially for webpack/typescript; so hearing if it worked for you would help us a lot!