Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Dev Tools very slow to respond in large web app

Tags:

I have a large, javascript heavy web app that I am working on. I am experiencing very slow response times from Chrome Dev Tools for XHR responses and console loggging (3-5 secs). The actual app is running fast and responsive, only dev tools looks like it is suffering.

Does anyone have any idea why Chrome Dev Tools is becoming sluggish as my app grows?

like image 426
wilsonpage Avatar asked Jul 07 '11 11:07

wilsonpage


People also ask

How do I check my DevTools performance?

To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.

How do you zoom out of DevTools?

Make sure it has focus first (click somewhere in DevTools). Use the Ctrl + + and Ctrl + - keyboard shortcuts to zoom in or out (replace Ctrl with Cmd on Mac).

Why Chrome DevTools is inaccurate for mobile testing?

Chrome's developer tools offer an emulator, not an actual phone or tablet, to simulate your website on any given mobile device. This emulation is based solely on changing the screen resolution to match the dimensions of the device. Consequently, Chrome's display of your website on mobile may be completely inaccurate.


2 Answers

Devtools are like any other debugger; they hook into the normal processing flow of an application, and store quite a bit more information than is normally required. This is much more work than simply rendering the page without debugging enabled, so it will indeed be slower.

That said, 3 seconds to respond to console.log seems high. I'd suggest that you first test the application in a nightly version of WebKit. If it's responsive in WebKit, but not in Chrome, please file a bug against the inspector via http://new.crbug.com/ along with any information you can provide about what scenario causes the slowness.

If it's equally sluggish in WebKit, please file a bug against WebKit's Inspector component: https://bugs.webkit.org/enter_bug.cgi

Either way, post the bug ID here, and I'll see that it's triaged into the correct team.

like image 174
Mike West Avatar answered Sep 21 '22 21:09

Mike West


I "fixed" the slow chrome developer tool by (under SOURCES tab)

  • clearing the "watch" list that accumulated over time...
  • clearing all the "snippets", i had dozens as well...

Not sure which of both made the most difference, but it certainly made a difference

like image 32
Colin Claverie Avatar answered Sep 17 '22 21:09

Colin Claverie