1403799 - Debugger - Breakpoints not working with source maps

Status: RESOLVED INVALID

(DevTools :: Debugger, defect, P3)

Description

[Jithin Emmanuel]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170925150345

Steps to reproduce:

I have a React app with inline sourcemaps generated via jspm (https://jspm.io/). When using debugger with source maps, I see that Debugger is able to correctly identify all original source files. But if I put a breakpoint in original source files it does not work.

However if I open the transpiled bundle file in Debugger and find the location of the code in question where I am trying to add a break point then it works. 

Steps.
1. Put breakpoint in a source map file. (Refer to screen shot titled "source")
2. Click button in web page which should trigger beak point.
3. Put break point in original transpiled JS bundle file. (Refer to screen shot titled "transpiled")
4. Click button in web page which should trigger beak point.


Actual results:

1. Debugger did not trigger break point in original source file.
2. Debugger did trigger breakpoint in transpiled JS bundle file.


Expected results:

Debugger should have triggered breakpoint in source file.

Comment 1

[Jithin Emmanuel]

Attachment: Break point location in source map file

Comment 2

[Jithin Emmanuel]

Attachment: Break point location in transpiled js bundle

Comment 3

[Jason Laster [:jlast]]

Thanks Jithin for the clear bug report.

It looks like the breakpoint is added to the correct line. Is the issue that we're not pausing at the breakpoint?

Comment 4

[Jithin Emmanuel]

(In reply to Jason Laster [:jlast] from comment #3)
> Thanks Jithin for the clear bug report.
> 
> It looks like the breakpoint is added to the correct line. Is the issue that
> we're not pausing at the breakpoint?

Yes, Debugger is not pausing when I break on a Source map file. But it is breaking if I hunt down the corresponding line in the original JS bundle.

Comment 5

[Jason Laster [:jlast]]

Hey, we've made a lot of improvements to source maps lately. Would you mind re-testing?

Comment 6

[Marek]

I have got the same issue.
On page http://bit.ly/2Sjb6Et
Firefox developer edition 66.0b5.
You have to enable responsive mode and set device for example iphone6/7/8.
Minified file: /wp-content/themes/szablon/js/scripts.min.js
Original file: /wp-content/themes/szablon/js/scripts.js
There is section to detect if the #product-content container is in vieport area on window scroll event. Lines from 202 to 235.
I want watch isInViewportDetect variable.
I set two breakpoints.
First on line 213: if ( productContent.length > 0 && isMobile.any === true ) {
Second on line 221: if ( isInViewportDetect === true && inviewport === false ) {
First problem is, the developer tool not show pretty format icon on minified file. OK, for this is map file. But developer tools, not use them to recognize which file should be use to debuging (I think). In any case devtools definitely does not use the file scripts.js
Because if I set breakepoints into scripts.js file, and scroll window and try click F8 button to resume, developer tools open jquery-3.3.1.min.js file, and never go to the appropriate lines of code in the file scripts.js or part of code into scripts.min.js file.
You can test it on Google Chrome dev tool, it works correctly there.

Comment 7

[Jason Laster [:jlast]]

Honza, would you mind looking into this?

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

First problem is, the developer tool not show pretty format icon on minified file. OK,

I can see this issue on my machine too.

Because if I set breakepoints into scripts.js file, and scroll window and try click F8 button to resume, developer tools open jquery-3.3.1.min.js file, and never go to the appropriate lines of code in the file scripts.js or part of code into scripts.min.js file.

I can't reproduce this behavior. My STR:

1. Load https://www.tcmeble.pl/produkty/giotto/
2. Create a breakpoint at line 212 and 216
3. Reload the page
4. Break on line 212
5. Resume
6. The debugger properly breaks on line 216

Is there anything wrong with my STR?
Can you please verify?

Honza

Comment 9

[Jason Laster [:jlast]]

Honza, which file could you not pretty-print? Perhaps we should close this bug and open a follow up for pretty printing?

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Jason Laster [:jlast] from comment #9)

Honza, which file could you not pretty-print? Perhaps we should close this bug and open a follow up for pretty printing?

Done, bug 1555307

Closing this one since I can't reproduce it and there is no response for my NI.

Honza