Google Chrome developer tools works very slow
Google ChromeGoogle Chrome-DevtoolsGoogle Chrome Problem Overview
Sinсe Google Chrome was updated to 50.x version, it become impossible to work with DevTools. This issue reproduced mostly in "Network" tab. Every time when you click on "request" it takes about 30-40 sec. after that chrome can crash. Tried to delete all extensions, clear cache, and reinstall, but didn't help. Does anybody know how to fix this issue?
I'm running Chrome 50.0.2661.87 m
UPD: The problem may be occurs because of long headers. Try to close response and request headers.
Google Chrome Solutions
Solution 1 - Google Chrome
I've been having similar issues for debugging in Chrome versions 50+ on Mac OS X 10.11.3. The only solution I've found so far is to keep the dev tools docked to the right and it seems to be as performant as before. Not the optimal solution, but it works in my case.
Solution 2 - Google Chrome
Finally, a solution has been found which helped me after such a long time and after so many failed attempts to fix it: Solution on Google Chrome Forums
> Go to chrome://flags/#force-color-profile > > Change it to sRGB
Since Google does not allow direct links to chrome://
you'll have to insert the colon by yourself, or enter the whole link manually into your toolbar.
Solution 3 - Google Chrome
My situation was similar, after struggling a while with extreme slow developer tools response I found out the problem was caused by a Chrome extension I had installed for knockoutJs. So for people experiencing these issues, as part of the initial troubleshooting, try disabling chrome extensions.
Solution 4 - Google Chrome
I'm using the Version 61.0.3163.79 and I have the same issue that this post talks about.
With some searches I found out that the problem was in the user that I was using. What I tried was to enter int google chrome as guest and the devtools became faster again.
So what I did was:
- Check out if debugging using the guest user is faster as it should be.
- Logout from the account.
- Clean all cache associated to google chrome.
- Restart the PC (but i think closing the browser is enough)
- Login again in your account.
I hope this could help other people with same problem.
[EDIT:]
I found out that after some time (weeks) the google chrome dev tools will get slower again. So I tried the following solution and it worked:
- Open the
dev tools
- Go to the
Sources
tab. - Cleaned all watched variables, breakpoints, DOM breakpoint and Event Listeners breakpoint.
[SECOND EDIT:]
After some weeks, the issue came again. What I did was installing the google canary Version 64.0.3249.2 canary (64-bit) and my problems vanished.
For who's that doesn't know what is canary, please check this link.
Solution 5 - Google Chrome
Google is aware of the problem - https://bugs.chromium.org/p/chromium/issues/detail?id=624097
The problem seems to have vanished in v.53 - they are currently trying to figure out what fixed it. If possible, the fix will be merged back to v.52. But at least they are working on it.
Solution 6 - Google Chrome
In case others arrive here facing the same issue I had, try changing the Dev tools tab you're looking at to Elements.
I had the "Sources" tab open and Chrome was trying to load enormous assets for that tab, which created a multisecond delay between the console.log()
events I created and the display of those logged messages.
Solution 7 - Google Chrome
Make devtools snappy again by deactivating all breakpoints:
Go to the Sources
tab, show the debugger (may be hidden) and hit Deactivate breakpoints
.
(Chrome v62.0 on Windows 10)
Solution 8 - Google Chrome
I've had the same time issue on 54.0.2840.99 m version of Google Chrome.
But switching to Chrome Canary worked !
Solution 9 - Google Chrome
I also face same issue.
I tried unchecked toggle screencast. Now it is working fine.
Solution 10 - Google Chrome
resource
being overridden
Reduce size of Only overriding
files with less lines of code worked well for me. I landed here because I was overriding
a file which had 35,000 +
lines of Javascript
.
Further, if your resource
is a new one - i.e. it is not included in a script
tag or link
tag, you can override
main html document
and add the tag : <script src="/my-new-script.js"></script>
. Add the file to your domain-root within the Overrides folder
on Chrome
:
overriding
HTML
overriding
CUSTOM SCRIPT:
then
Good Luck...
Solution 11 - Google Chrome
In my case, I had Local Overrides setup (https://developers.google.com/web/updates/2018/01/devtools#overrides) in Downloads folder which had a lot of files in it and that slowed down devtools.
Setting up overrides in its own seprate directory fixed the slowness.
Solution 12 - Google Chrome
I sped up Chrome again by doing the following:
- Open DevTools -> select Elements tab ->
- select nested Computed tab -> under Filter, make sure that Show all is unselected.
- select nested Event Listeners tab -> make sure that Ancestors and Framework listeners are unselected.
Solution 13 - Google Chrome
For me, running Chrome Version 81.0.4044.138 (Official Build) (64-bit) on Ubuntu 18, the problem seems to be the mobile view. When I disable mobile view inspecting becomes really fast again. I think it is caused by touch emulation and other mobile stuff.
To have something similar to a mobile view I move the DevTools dock to the side and resize it until I get the width I need. It is not perfect, but it is useful most of the time.
Besides Chrome, Firefox is much faster when inspecting sites overall, though I didn't use FF because I'm used to specific things on Chrome. Moreover, most of the sites I work with do not trigger these issues on Chrome, in fact, it happens with only one site.
PD: the site that triggers the issue on Chrome Dev Tools has lots of CSS variables. Not sure if that is related.
UPDATE 1 WEEK ago I was able to use Chrome without issues even in the mobile view by disabling the option "Show media queries"