Open Bug 1311616 Opened 3 years ago Updated 7 months ago

Page slow to load when developer tools are open (React)

Categories

(DevTools :: General, defect, P3)

49 Branch
defect

Tracking

(Not tracked)

UNCONFIRMED

People

(Reporter: luca, Unassigned, NeedInfo)

References

(Blocks 2 open bugs)

Details

Attachments

(1 file)

Attached file about-support.txt
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160922113459

Steps to reproduce:

When loading a page with a React application, when the developer tools are open, the page is slow to load and becomes unresponsive for some time while loading.

Steps to reproduce:

1. Setup this React/Redux project: https://github.com/reactjs/redux/tree/master/examples/todomvc and open it in a new tab
2. Open developer tools (Web Console tab) with Command-Option I
3. Refresh the page


Actual results:

The page is slow to load, and tab and Firefox hang for 5-10 seconds


Expected results:

The page should load the same as when the developer tools aren't open
Here are requests made with the Gecko Profiler extension.

Without developer tools open:

https://cleopatra.io/#report=93d627d6b7600d646e394fd6e455972bba9edc7f

With developer tools open:

https://cleopatra.io/#report=3a3ec32d0efb42a2ea847280d9a578d149e0b673
Component: Untriaged → Developer Tools
Thanks for the report!  Does the test page use source maps?

Also, are you sure Firefox 49 is the correct version?  The line numbers in the profile don't seem to line up correctly with the source for that version.
Flags: needinfo?(luca)
Priority: -- → P2
I can confirm the exact same behaviour still persists in my Firefox 53.0.3(64-bits) macOS version.
Currently running vimium, adblock plus and redux devtools extensions.
I'm using 53.0.2 (64 bit) on macOS and have the same issue.  My page uses sources maps runs a marionette application.
I'm using v 54.0 on Ubuntu and am facing this issue.
I'm using v 54.0.1 on MacOS (10.12.5) and have the same issue.
v 56.0b1 is unusably slow when loading or interacting with a react page. I know react is terrible but this issue seems to be getting worse.

Opening the inspector takes a full 2 seconds.
Changing the selected element in the selector takes about 2 seconds to update the rules in the sidebar.
Reloading the page with the devtools open takes about 7 seconds.
Flags: needinfo?(luca)
@Luca, we've made a lot of performance fixes. Can you try your scenario again?
Do you experience the same problem? Or is it better?

Honza
Flags: needinfo?(luca)
@Honza I'm not the original reporter, but I can confirm that using developer tools with react using 58.0b8 is usable but is slow. The page seems to gain at least 1-2 seconds load time.

This may be related and I haven't found similar bugs (came here to log these), but debugging on a React/Webpack page is extremely slow. With this setup, everything is bundled into a single bundle.js file which gives you a 100k-200k LOC js file. I'll see if I can do things differently, but I'm pretty convinced that this is the cause.

Another side effect of the giant soruce file is that debugging is nearly impossible. For example, when clicking a source link from the console:
1. The tab seems to lock up
2. Swapping to other tabs is very slow
3. Typing/scrolling/browsing on other tabs is slow (it appears that whatever background thread is running for the debugger is locking up the UI thread? -- I'm not familiar with Firefox's codebase so forgive me if I'm just wildly guessing!)
4. Closing Firefox afterwards requires a Force Quit on mac
React pages are still really slow on 58.0b3 and source maps are now broken and the debugger can't load the plain js file, it just hangs.
I meant 59.0b3, sorry. Can't seem to edit my comment.
Product: Firefox → DevTools
Moving this inactive P2 to the backlog (P3)
Priority: P2 → P3
You need to log in before you can comment on or make changes to this bug.