[meta] Open developer tools slow down page load
Categories
(DevTools :: General, defect, P2)
Tracking
(Not tracked)
People
(Reporter: danemacmillan, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: meta)
Attachments
(3 files, 1 obsolete file)
Comment 1•10 years ago
|
||
Comment 2•10 years ago
|
||
Comment 3•10 years ago
|
||
Updated•10 years ago
|
Comment 4•10 years ago
|
||
Reporter | ||
Comment 5•10 years ago
|
||
Reporter | ||
Comment 6•10 years ago
|
||
Comment 8•10 years ago
|
||
Comment 9•10 years ago
|
||
Comment 11•10 years ago
|
||
Comment 12•10 years ago
|
||
Reporter | ||
Comment 14•10 years ago
|
||
Comment 15•10 years ago
|
||
Comment 16•10 years ago
|
||
Comment 17•9 years ago
|
||
Comment 18•9 years ago
|
||
Comment 19•9 years ago
|
||
Comment 20•9 years ago
|
||
Comment 21•9 years ago
|
||
Comment 22•9 years ago
|
||
Comment 23•9 years ago
|
||
Comment 24•9 years ago
|
||
Comment 25•9 years ago
|
||
Comment 26•9 years ago
|
||
Comment 27•9 years ago
|
||
Comment 28•8 years ago
|
||
Comment 29•8 years ago
|
||
Comment 30•8 years ago
|
||
Updated•7 years ago
|
Updated•7 years ago
|
Updated•5 years ago
|
Mass-removing myself from cc; search for 12b9dfe4-ece3-40dc-8d23-60e179f64ac1 or any reasonable part thereof, to mass-delete these notifications (and sorry!)
Comment 32•5 years ago
|
||
This is still a problem to be honest. This isn't something that the average user will notice but makes the life of developers very very difficult. I have also noticed that the source maps are reason for this slowdown. But I also tried compiling a big angular project without source maps, the website loaded, but until dev tools parsed all the files, the website remained unresponsive.
(In reply to canessa.alex from comment #30)
It (In reply to Maciej Jaros from comment #28)
Seems like a general problem with pages that load many scripts (JS) in
background.The problem presents when you're trying to use source map and you have many
JS files.
The same website with source map off, loads as expected.
Comment 33•5 years ago
|
||
Pavlos, we addressed the known slow paths (see closed bugs) and are looking for more real-life case that we can further do root cause analysis on.
Could you record a slow page devtools session with profiler.firefox.com (Firefox Platform preset) on your heavy JS project (preferrably using Nighty or DevEdition)?
Comment 34•5 years ago
|
||
I have uploaded the profiles. Here are the urls to those.
I am loading the same exact component with the same data and the same network connection.
Here is the profile with the Dev Tools closed:
and here with the Dev Tools open:
https://perfht.ml/3gbCE6T
As it can be seen, the page loads, but is unusable until the file parsing is finished.
Note: When I run the profiler with the dev tools open, I didn't let them finish parsing the js files as that would have taken a long time and I wouldn't be able to upload the profile. (>50MB)
Comment 35•5 years ago
|
||
Logan, do you have any idea what could cause the main thread thrashing of addSources/<
and insertSourceActors/<
in https://share.firefox.dev/2B5GXk7 ?
Comment 36•5 years ago
|
||
This seems to be primarily perf issues around updating the data neeed to drive the Debugger's source-file list tree as new sources appear. I know it's something others have looked into in the past, but it may be worth me digging into it to see if I can see anything we'd want to address.
One change that I think is relatively low-hanging would be addressing https://bugzilla.mozilla.org/show_bug.cgi?id=1622191, but I don't know if eval is at all involved with the code being debugged in the case of this profile so that could be entirely separate.
Comment 37•4 years ago
|
||
I've been experiencing this bug for a couple years now, any site I go to, loads smooth, If I pop open dev tools, it takes 10-15 seconds to fully load.
Is there a fix for this? 🤯 I can't properly do any benchmarking with performance tests with this bug.
Please help
Comment 38•4 years ago
|
||
Are there any specific/shared characteristics of the pages you load and experience the perf issue with?
E.g.
- Happens on pages with a lot of HTTP requests
- Happens on pages with a lot of JS files
- Happens on pages with a high JS activity
Also, can you please attach a profile?
https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler
Thanks,
Honza
Comment 39•4 years ago
|
||
Hey, not sure if my issue correlates directly to this, but whenever opening devtools on https://csgohub.com the page hangs for ~2 minutes and devtools only renders post that. Seems like opening devtools causes a full 'rerender behind the scenes?'
I have successfully captured a profile, but I'm stumped as to why this only happens in the production build of this.
Thanks,
David
Comment 40•3 years ago
|
||
TLDR - SEE SOLUTION AT BOTTOM!
Firefox Dev edition 93.0b1 64 bit Linux 5.10 Kernel
I just encountered this on a webapp I've been developing over a long period of time.
It only occurred yesterday, when I was working on a new big commit.
So I stashed and went back to previous commit, where loading the site with the console open was fast... but it was also slow.
That's weird. I could have sworn the slowness only started on the latest commit.
Then I tested with Chromium, fast with dev console open or closed.
Then I realized I have a ton of plugins in FF.
!!!!!!!!!!!!!!!!!SOLUTION!!!!!!!!!!!!!!!!!!!!
So I disabled all plugins one by one. Then all my tabs suddenly self closed.
I opened the site with console open. It was fast.
I enabled each plugin and retested each time one by one.
It was fast.
Eventually I had all the same plugins enabled again, and it was fast with the dev console open.
So I guess Firefox got a bit crusty with the Addons.
Might be an addon crustyness bug.
Comment 41•3 years ago
|
||
I can confirm that issue permanently exists.
I've created repository with frontend app, which has multiple files and you can clearly see there slowdown:
https://github.com/michalzubkowicz/slow-vite-demo
npm install
npm run dev
Comment 42•3 years ago
|
||
Redirect a needinfo that is pending on an inactive user to the triage owner.
:Honza, could you please find another way to get the information or close the bug as INCOMPLETE
if it is not actionable?
For more information, please visit auto_nag documentation.
Comment 43•3 years ago
|
||
The behavior of the developer tools is much better with Firefox 103 as it was 8 years ago. Especially the duration to load the sources in the Debugger tab.
But the "Network" tab is still twice longer as in Chrome and Edge.
Comment 44•3 years ago
|
||
Alex, is there anything actionable on this meta or should we close it? (all dependencies are closed)
Comment 45•3 years ago
|
||
(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #44)
Alex, is there anything actionable on this meta or should we close it? (all dependencies are closed)
The value of this bug is mostly about the user reports rather than bugs management.
It could be worth looking at comment 41 and see if that's still slow and also request more information about comment 43 slowness on the netmonitor.
(In reply to Xavier OTTOLINI from comment #43)
The behavior of the developer tools is much better with Firefox 103 as it was 8 years ago. Especially the duration to load the sources in the Debugger tab.
But the "Network" tab is still twice longer as in Chrome and Edge.
Xavier, would you have a test page to demonstrate a significant difference between firefox and chrome/edge?
Comment 46•2 years ago
|
||
In https://bugzilla.mozilla.org/show_bug.cgi?id=1125322#c41 I've provided test case, and I can confirm that it's still valid.
Reproduction is quite simple. Clone the repository, run: npm i && npm run dev , and then You'll see that in chrome with network tab open in FF everything is loading 1s, in Chrome it's 133ms.
Comment 47•2 years ago
|
||
(In reply to michal.zubkowicz from comment #46)
In https://bugzilla.mozilla.org/show_bug.cgi?id=1125322#c41 mapquest directions I've provided test case, and I can confirm that it's still valid.
Reproduction is quite simple. Clone the repository, run: npm i && npm run dev , and then You'll see that in chrome with network tab open in FF everything is loading 1s, in Chrome it's 133ms.
Thanks for the detailed explanation
Updated•11 months ago
|
Comment 54•9 months ago
|
||
When you're working with source maps and you've got a bunch of JavaScript files, that's when things start getting tricky. But if you turn off the source map for the same website, everything loads just fine.
Comment 55•5 months ago
|
||
Clear a needinfo that is pending on an inactive user.
Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE
.
For more information, please visit BugBot documentation.
Comment 56•5 months ago
|
||
Not sure if this is the right place, I never had a big issue with the speed of dev tools opening, but starting two or so weeks ago, it became really slow. When I press F12 now, an empty window appears almost instantly, and then it takes around 7 seconds until it is filled with content and operational. This happens both on Linux and on macOS, and the sites I'm working with are the same, could it be that there was a regression somewhere?
Comment 57•5 months ago
|
||
Added screen capture of devtools loading
Comment 58•3 months ago
|
||
Clear a needinfo that is pending on an inactive user.
Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE
.
For more information, please visit BugBot documentation.
Description
•