For a while I've been trying to run a JavaScript CPU profile of some applications I've developed, but everytime I start running the JavaScript CPU profiler in Chrome Dev tools, the application will stop responding at all (same as the profiler).
However, I noticed that this is not specific to my application, since I've been able to reproduce the same problem in other popular applications like Travis-CI.
I've been suspecting of extensions and plugins, but running without them doesn't seem to make a different -- the problem persists.
I've tested simpler apps with the same technology (the To-Do MVC example built in EmberJS) and that profile works just as fine.
I'm currently using Chrome 40.0.2214.111 m (64-bit).
Any idea on what the problem may be?
Update: I've tested both under incognito and guest browser mode. I thought the guest browser made a difference because I was able to profile my application once without problems. However, trying that again proved that the problem still persists.
Furthermore, I've found that the freezing time does not seem to be related with the application itself. Sometimes it'll hang when I focus an element, sometimes when I move around, some other times when I am in the middle of writing into a textbox. There seems to be nothing specific about the functionality of the app that's triggering this.
I've also tried disabling most extensions, without luck. I'll try disabling plugins as well and run as bare of a Chrome as possible.
Update 2: I've disabled all plugins and extensions completely, but the problem persists. I've also let the session go on to see if it eventually recovers. After around 2 hours, it was in the same situation. No bigger CPU consumption nor memory consumption, and other Chrome instances or tabs worked perfectly fine. I was able to close the developer tools but not interact with the original page anymore.
Update 3: I've just upgraded to Chrome 41 because it has been released in the stable branch, and I know it does include a few more things in the profiling section. I tried again and it didn't seem to make any difference.
Related
I'm building a React Native app (currently iOS only) and I found a very nasty bug that only manifests itself when 1.) running on a real device, and 2.) running without Chrome debugging. (Ouch, right?)
I'm using react-native-router-flux with tabs and when I tap on a button that loads a new tab route (Actions.tabRouteName), the screen goes blank. As I said, it works fine in the simulator, and also, on the device when I enable Chrome debugging.
Other things I tried: running on another device, reloading JS, rebuilding app in Xcode.
Any reason the behavior would be different in these different run cases?
Thank you.
Update: This appears to have something to do with animations and route switching. I posted more details in this Github issue. I also found anecdotal support for the idea that other people are encountering similar issues with debugging in this Github issue.
Any reason the behavior would be different in these different run cases?
It's because when you use remote debugging in Chrome, it practically runs the RN app in the browser (it then uses the V8 JavaScript engine) and communicates with the simulator (or device) through WebSockets. When it runs without remote debugging enabled, it uses JavaScript Core. There are many differences between these environments and these can cause inconsistencies, so don't rely much on running your app only with JS debugging enabled, it can give you false errors or hide errors that would actually cause problems on a real device.
Is there a way to remotely debug a website?
I've just finished putting together a website that has some jquery animations. The site works fine on every machine/configuration I've tested it on.
One of the people the site needs to work for, however, reports that the animations don't work; which effectively breaks the website.
I strongly suspect his companies' network is the root of the problem; however diagnosing this is challenging as he is not a technical user and guiding him through the webkit inspector/console, etc. is not really an option.
Ideally I'd like to be able to 'capture' the network/javascript logs from IE or Chrome so that I can inspect them and attempt to work out what's gone wrong.
Aside:
I'm using an off-the-shelf Wordpress theme (http://theme.co/x/) for the site; so I expect the code is good.
While it doesn't seem possible to remotely capture and inspect the network or javascript logs from another machine's browser; there are a number of services that allow you to add automatic error reporting to your javascript code, which you can then inspect to find the root of the problem.
Examples of these are Errorception and Raygun.
As far as I have found, there aren't any similar tools to do so for monitoring network performance / loading specifically- although a similar approach with a custom script to detect if specific items have been loaded could be written.
I have an Angular front-end with a PHP/MySQL backend. The application runs reliably at a number of client installations, both wired and wireless, cable and DSL, Chrome and Firefox. One user, however, can use the app for anywhere from 3-4 to 20 minutes or more, then some browser events stop firing - usually ng-blur and/or ng-change.
I've looked through the code repeatedly, to no avail. All the other users are fine. This user has attempted the app on 2 different Dell laptops using Win7 and Chrome, both wired and wireless, and experiences a similar issue each time.
Can anyone suggest a reason for this erratic behavior, like browser add-ins or network security programs that interfere with browser operation?
I have located the problem. After checking with my users, I found that the one experiencing the problem was using AVG antivirus, all the rest were using McAfee or Norton.
I installed AVG on an older machine, and within a couple of minutes was seeing the same sort of problems. I'm considering this "solved".
which is all the user, I'm having to remote debug can tell me... Since I'm also without a device to test for the next couple of days, I'm pretty much in the dark.
The application is a web-app written in javascript/jQuery Mobile and working fine on iPad1+2 and iOS3+4. When the user was instructed, the system worked without problems on his iPad
Now he is stuck on the first page and sometimes "nothing happens", but even when the page works he cannot even log into the system.
Question:
Since the application worked fine the first time and I have read there are some new caching mechanisms in iOS, I suspect it could be related to this. However, there is no place to go online when looking for things to be aware of when using script heavy web applications on iOS6.
So, what pitfalls do I have to be aware of when upgrading an application to iOS6?
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?
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.
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
This is an old question, but it may help someone landing here later like I did.
Using Chrome 46.x/47.x on Linux (RHEL 7), none of the proposed solutions worked for me. What did work was to disable the setting "Use hardware acceleration when available", in the advanced browser settings.
I noticed in the process monitor/list that the Chrome renderer was taking up a lot of CPU, even putting a breakpoint or stepping throught statements in the debugger would take 10+ seconds!
Might be worth a shot.
Undock the developer tools into separate window.
In my case, it's work.
I struggled with this also, to the point where stepping through code using the chrome debugger was just so slow it took hours away from my productive development time. In watching the CPU utilization when debugging in chrome I would see it use up to as much at 40% of all 4 cores of my processor. I tried everything to no avail. Finally, I tried making the browser window of the page I was debugging as small as I could without losing any of the required view and miraculously it solved the problem. So, now I keep my debugger window popped out in a separate window, and make the window of the page I am debugging as small as I can and my debugging experience is very fast again. I have tested this over a period of weeks and it has held out. Hope this helps someone.