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.
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.
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.
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.
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.
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.
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.
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)
I've had the same time issue on 54.0.2840.99 m version of Google Chrome.
But switching to Chrome Canary worked !
Reduce size of resource being overridden
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
then overriding CUSTOM SCRIPT:
Good Luck...
I also face same issue.
I tried unchecked toggle screencast. Now it is working fine.
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.
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.
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"
Go to the network tool and change it without any restrictions. Sometimes this happens if you change mobile settings. Google chrome changes this setting to test mobile device on low internet connection and leaves it that way.
When Chrome stops WebGL and gives you the following error (in a yellow banner on top of the screen): "Rats! WebGL hit a snag...", and reloading does not work (WebGL is still not re-enabled), is it possible to re-enable WebGL without restarting Chrome?
Context:
Chrome disables WebGL probably because it requires too many resources: I ask it to display 400,000 billboards on Cesium, for those who know what this is.
I know how I could reduce the resources my app asks for, but actually I am exploring its limits for testing purposes. So I am going to make Chrome disable WebGL a lot of times, and I do not want to restart it everytime it disables WebGL.
My configuration:
Chrome 35.0.1916.114 m
Windows 7 Pro 64 bit.
Solutions explored:
I already tried to open a new Chrome window, it does not work. For the moment all I can do is close all Chrome windows and restart it.
I already tried to put --ignore-gpu-blacklist in the Chrome shortcut (even if I understood this is for Windows XP, right?).
Hope I was clear enough.
Thank you for your help.
I was having the same problem and I just found a solution. It sounds like this didn't work back when this question was posted but, it works now!
Refreshing the page doesn't work. If you clicked a link from a different tab to open the tab the crashed, clicking that link again doesn't work. You have to open a new tab and paste in the URL of the page that you want to reload.
I'm guessing this is due to chrome threading... by opening a brand new tab, you create a new thread instead of using the existing one.
In your application you should properly handle webglcontextlost and webglcontextrestored events. In particular, you should prevent default event action in webglcontextlost handler thus telling the browser that you can restore proper functioning of your app when webglcontextrestored will be fired.
This is a question about debugging a project, not about writing the code.
I am on the final stages of developing an HTML5 web app. Fairly last minute, our client tells us it should run on IE8. Since I use the HTML5-canvas in the app, this required the addition of Google Chrome Frame. Once installed and testing, however, IE8's developer console no longer prints any data, and the HTML viewer never loads. Is this a bug? Is there a way to fix it? It will really suck if I need to debug with alerts...
From Google Chrome Frame documentation:
You can use the Web Inspector in GCF just as you would in the Google Chrome browser. To use it, right-click and choose "Inspect Element". Logging is available via the console.log method, and you can set breakpoints and inspect network activity.
I'm using Rubymine 5.4 for Windows and it's overall amazing, and 95% as good as Visual Studio as an HTML / CSS Editor with a few exceptions... the main one being a lack of a live preview /WYSIWYG ability, i.e. as I type I can see the resulting preview live (in addition to VS, DreamWeaver also has this feature). I can't seem to find anything like it in the IDE, help, or any Google/Stack searches.
To be clear, what I am looking for is a way to have a split screen view in RubyMine where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane.
Ideally, this would be:
in RubyMine itself (using native panes/tabs as described above)
the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in...
...however, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).
Thanks to #CrazyCoder & #LazyOne for the pointers...
After a bit more research, I've confirmed and gotten more detail:
The solution is to use the Official Jetbrains (maker of RubyMine) LiveEdit plugin which you can find here: http://plugins.jetbrains.com/plugin/?id=7007
Detailed Instructions
Download the JetBrains LiveEdit plugin from here: http://plugins.jetbrains.com/plugin/?id=7007
Run Rubymine > Settings > Plugins (type "plugins" in the search
box in settings)
Click the Install Plugin from disk button at the bottom of the list
Navigate to where you downloaded the plugin and select/open it
Activate by checking it on the plugin list
(You will likely have to) restart RubyMine
Once restarted, go to the menubar > View > LiveEdit (which will then be checked)
Download the JetBrains IDE browser Extension for Chrome here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
The Chrome extension supports both WYSIWYG/real-time "LiveEdit" outside the IDE, in an external Chrome window and JavaScript debugging inside the actual RubyMine IDE
I believe there is also an extension for FireFox, which I believe ALSO DOES support
Javascript debugging through the IDE. BUt, I'm not sure if it supports LiveEdit like the Chrome extension
(Launch) Debug your project
Edit as you normally would
Observations/Opinions
The plugin pretty much works seamlessly. I've found it cuts development time significantly by not having to constantly MANUALLY reload the page, i.e. use your mouse or keyboard to bring focus to the browser window and hit refresh... this time adds up especially if you are doing a lot of HTML/CSS and want to check your changes often.
However, I'd suggest turning it off if you're going to do any major back-end/Rails or Javascript as the reload might be slightly longer due to code interpretation/processing and you hit errors as you are mid-statement and the LiveEdit decides to refresh while variables aren't defined or have improper values. In this case, the time you save by not having to manually refresh, may be lost (more than 1x fold) b/c of how often and how long it takes for content to be created/rendered on the server-side or in JS on the client.
I've tried everything. I've tried ctrl-shift-R. I've tried ctrl-F5. I've checked the Disable Cache box in the developer tools. I've completely cleared my browser cache. But I cannot for the life of me get Chrome (Version 24.0.1312.57 m for Windows 7 - the most up-to-date version) to reload a specific piece of inline javascript (meaning it's in my html page, not in a separate js file.)
Is there any other way I'm missing to get this done, or do I need to completely uninstall Chrome and reload? Please don't tell me to use Firefox instead; the code works in javascript but doesn't in Chrome, and I need to be able to test it there.