1562824 - Can not debug iframe syntax errors in JSFiddle, Codepen, Stack Overflow

Status: NEW

(DevTools :: Debugger, defect, P3)

Description

[Gregg Tavares]

Attachment: firefox-debug-iframe.gif

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

Steps to reproduce:

1. Go to https://jsfiddle.net/greggman/0512t8un/
2. Open the Web Console
3. Clear the Web Console
4. Run the jsfiddle
5. Click the error message in the console

Actual results:

The debugger takes me nowhere useful. On Stack Overflow it opens an empty tab

Expected results:

It should have opened the debugger and highlighted the line with the syntax error.

Comment 1

[Gregg Tavares]

Attachment: chrome-debug-iframe.gif

Here's chrome in the same situation

Comment 2

[ovidiu boca[:Ovidiu]]

I tested this on Mac OS X 10.14 and Windows 10 x64 with FF release 67.0.4 and FF Nightly 69.0a1(2019-07-07) and in both cases, I have the same result:
If I open the Console without "Run the jsfiddle" I see the error and it says "show:80:14" clicking on that it will open the debugger and highlight the line with the syntax error. If I run the jsfiddle in the Console I see "_display:80:14" clicking on that the debugger takes me nowhere useful.

Gregg, can you please double check and see if you have the same results? Thanks

Comment 3

[Gregg Tavares]

actually I see something slightly different

Case #1:

1. Go to https://jsfiddle.net/greggman/0512t8un/
2. Open Web Console, it displays "show:80:14"
3. Click it

What happens:

it opens a NEW "view-source:" tab with the correct line highlighted.

What should happen

It shows the debugger UI in the same tab with the correct line highlighted, not a new tab and not the view-source: page

Case #2

1. Go to https://jsfiddle.net/greggman/0512t8un/
2. Click "Run"
3. Open Web Console, it displays "_display:80:14"
4. Click it

What happens

It opens a new tab with view-source:https://fiddle.jshell.net/_display/ (useless)

What should happen

It shows the debugger UI in the same tab with the correct line highlighted, not a new tab and not the view-source: page

Case #3

1. Go to https://jsfiddle.net/greggman/0512t8un/
2. Open Web Console
3. Click "Run"

What happens

Web console shows both links, "show:80:14" from the run when the page was loaded and "_display:80:14" from the run when the run button was clicked. Both links open new tabs view-source tabs instead of just showing the debugger in the same tab

What should happen

Both links should show the debugger with the correct line highlighted

Case #4

1. Go to https://jsfiddle.net/greggman/0512t8un/
2. Open the Debugger (not the web console)
3. Click "Run"

What happens

Web console shows both links, "show:80:14" from the run when the page was loaded and "_display:80:14" from the run when the run button was clicked.

The first link, if hovered over, says "View source in Debugger -> https://fiddle.jshell.net/gregg/0512t8un/show/:80:14. Clicking it opens a NEW tab to view-source:https://fiddle.jshell.net/greggman/0512t8un/show/. It does not open in the debugger like the hint claimed.
The second link, if hovered over says "View source in Debugger -> https://fiddle.jshell.net/_display/:80:14. Clicking it highlights a nonsense line in the debugger

What should happen

Both links should show the debugger with the correct line highlighted

Comment 4

[Gregg Tavares]

Tested on 69.0a1 (2019-07-08) (64-bit)

• Case #1 above, same results
• Case #2 above, same results
• Case #3 above, first link (show:80:14) same as above (new tab: view-source), second link (_display:80:14) opens debugger but to useless file
• Cast #4 above, first link (show:80:14) same as above (new tab: view-source) with correct line highlighted, should have opened debugger, second link shows useless file in debugger.

Comment 5

[Jason Laster [:jlast]]

Brian, what do you think of these new cases?

Comment 6

[Gregg Tavares]

Here's a gif example

https://i.imgur.com/fiOByHY.gif

Here's Chrome for comparison

https://i.imgur.com/nH5bfaK.gif

Comment 7

[Brian Hackett [Laid off!]]

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

Brian, what do you think of these new cases?

The general problem here is that the debugger doesn't know anything about sources that contain parse errors. When these sources are given to spidermonkey to parse, it generates an error and the contents of the source are discarded. When clicking the link in the console, the debugger is only given a URL, which is not enough to figure out where the error occurred.

To get this to behave reliably, we need to use the mechanism added by bug 1447244 to uniquely identify sources with an identifier, so that the debugger isn't relying on the URL and can view the source containing the error no matter whether it occurred in an HTML file, eval'ed code, etc. In order to do that, we need to be able to be able to create sources when a parse produces an error. That is bug 1583065, and I'll add some more about what is required there.

Comment 8

[Zac Svoboda :zacnomore]

Attachment: iframe-error.png

Test cases 1, 3, and 4 pass. Test case 2 provides this error when clicking on the link to source on the error in the console.
"Mozilla/5.0 (X11; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0"