1394998 - Click on events in inspector should bring to the prettified version of the JS

Status: RESOLVED DUPLICATE of bug 1578752

(DevTools :: Inspector, defect, P1)

Description

[Karl Dubost💡 :karlcow]

Attachment: minified script after following an event.

Steps to reproduce:

1. Go to Mozilla.org
2. Inspect the page
3. Click on an event (for example the list on html element, and choose hashchange)
4. The debugger opens

Actual: The page with the minified script is open at the first line, first column. The sidebar doesn't show which script, we are in.

Expected:
  1. Bring me to the prettified version of the script at the right location (even if the prettified version was not previously opened). The minified code doesn't help even less so when we are not being shown where this is happening.

Comment 1

[Patrick Brosset <:pbro>]

Hi Logan, I know you're working on pretty-printing in the debugger these days. This one has been a long standing bug on the inspector's event popup that we'd really like to try and fix this year.
Do you mind giving a few pointers to the code in the debugger that would allow us to get started on this one?

Comment 2

[Logan Smyth [:loganfsmyth]]

Yup, I'm starting to dig into pretty-printing.

The big thing would be changing the current structure of this file-open request. Right now the inspector sends a file URL and line number. Since the file is minified, the line number is essentially meaningless so the debugger just doesn't have anything to go on, no matter how good the pretty-printing is.

Right now this calls through https://github.com/devtools-html/debugger.html/blob/4ccec22c23422f63dcbb60a30ab6e1b2c70403a0/assets/panel/panel.js#L103 to https://github.com/devtools-html/debugger.html/blob/4ccec22c23422f63dcbb60a30ab6e1b2c70403a0/src/actions/sources/select.js#L67. The debugger itself can accept a line and column number pretty easily, but the main issue there I think is that the inspector's listener lookup API relies on the position of Debugger.Script objects, and they don't actually have a column number. All they have is a `sourceStart` general character offset, so either the inspector `node` endpoint would need to convert that into a line/column value for us, or it can pass the overall offset through to and let the debugger do it. Part of that would really depend on if the inspector wanted to show the column values as part of the `origin` URL, which currently includes the line number. It may just make sense for the inspector to normalize to line/column.

Once the debugger is passed an accurate location, the specifics to some extent depend on timing. We want to implement a heuristic for auto-pretty-printing, so if that is done by the time this lands, I don't know if there would be any more work needed. If it's not through, we might want to consider having the panel's `setSource` passing some hint flag to trigger a simpler heuristic until a better one lands. I don't think I'd want it to just always pretty-print, since I could see that being frustrating for users.

Comment 3

[:Harald Kirschner :digitarald]

Carry over test case from bug 1532240:

Simplified test case: https://debugger-pretty-print-events-1532240.glitch.me/

STR:

• Pretty print compressed.js in Debugger (click through via console log)
• In Inspector find the click event on the body element
• Navigate to Debugger via event handler location

Alternative STR:

• Inspect body element to find the click event from compressed.js
• Pretty print compressed.js

AR: Wrong line (setup declaration) is focused (compressed.js:formatted:7)
ER: myEventHandler declaration is focused

Comment 6

[:Harald Kirschner :digitarald]

Logan, linking to pretty-printed sources is working better in Console (bug 1532295 and maybe others). Can the same solutions be applied for Inspector's event inspection?

Comment 7

[Logan Smyth [:loganfsmyth]]

We'll need to do a bit of work still, but this is definitely something we can do now that https://bugzilla.mozilla.org/show_bug.cgi?id=901138 has landed. We'll just want to add some more data to the API response and use that here.