Paused debugger during page navigation led to empty Inspector
Categories
(DevTools :: Inspector, defect, P2)
Tracking
(Not tracked)
People
(Reporter: Harald, Unassigned)
Details
Attachments
(1 file)
|
347.14 KB,
image/png
|
Details |
image.png
71.0a1 (2019-09-18) (64-bit)
STR:
- Opened Debugger with pause on exception https://jealous-shelf.glitch.me/
- Refresh
- Debugger pauses
- Switch to Inspector
AR: Blank inspector.
Browser Console error: uncaught exception: Object
|
Reporter | |
Comment 1•6 years ago
|
||
Seems to break the first time and on soft refresh. Breaks again on hard refresh.
|
||
Updated•6 years ago
|
|
||
Comment 2•6 years ago
|
||
I can reproduce. When I reproduce, the page hangs (though the Debugger remains responsive) and the Browser Console gives me infinitely repeating errors of the form:
Request to access cookie or storage on “<URL>
This works fine for me. The debugger pauses but at that point there is no DOM so that is why nothing is visible in the inspector.
When I press continue in the debugger and then switch to the inspector the DOM is displayed correctly.
|
|
||
Comment 4•6 years ago
•
|
||
I can reproduce this. A few things worth noting:
- the Firefox parent process is not hung, the UI of the browser and of devtools remains responsive
- the content process is hung however, you can't select text on the page for example
- the tab is in a loading state the whole time the debugger is paused
- once you resume, the inspector does show the correct content
So, this is related to how the inspector displays the content when a page is loading. Here, the loading is halted because of the debugger breaks on exceptions, and this appears to prevent the inspector from displaying the content.
|
|
||
Comment 5•6 years ago
|
||
In Chrome DevTools, things are similar, but better:
- the tab is also in its loading state the whole time the debugger is paused
- the Element panel does show some of the page content: it shows the
<head>tag and everything inside it up to the<script>that contains the code that the debugger is currently paused in - once you resume, the inspector shows the remaining of the page
Chrome uses different page loading events to populate its Element panel. In Firefox, we probably wait for an event that occurs later, after that particular script has finished executing, hence the inspector remains empty until the event has fired.
We could do 2 things:
- Do what Chrome does. I remember Alex attempting this a while ago. I don't remember in which bug. It worked, but was a bit weird because you could see the inspector "jump around" a lot while pages loaded, because head and body would come as mutations after the initial root node had been added.
- Or have a loading indicator of sorts in the inspector that appears while a page is loading and before the first root node has appeared.
Alex, do you remember the bug where you experimented with this?
(In reply to Patrick Brosset <:pbro> from comment #5)
In Chrome DevTools, things are similar, but better:
Alex, do you remember the bug where you experimented with this?
That would be bug 1151909.
We currently use DOMContentLoaded so when the debugger pauses the markup view needs to wait because the DOM is not yet loaded, hence the blank panel.
Alex commented in https://phabricator.services.mozilla.com/D28972 about the approach of loading things as and when they become available as opposed to using DOMContentLoaded.
|
|
||
Comment 7•5 years ago
|
||
Downgrading to P2 as this only occurs when loading, and we have had no other user report the problem so far.
|
||
Updated•2 years ago
|
Description
•