Was running tests on an internal webpage using IE, to check load times, and noticed the page loads roughly 3x's faster while having the developer tools open. I can reproduce this 100% of the time, and as soon as I close developer tools the website significantly slows down. If I had to guess it would be javascript related but outside that we're not sure.
Chrome and Firefox are lightning fast in comparison but IE is our corporate standard.
Any thoughts?
Related
I'm trying to debug a CMS-backed website (Drupal 7). It is displaying some problems due to conflicting Javascript. For a fraction of a second, the site components are fine, and then *SNAP*, they're broken. It must brake as soon as the conflicting resource loads.
Using Chrome's developer tools (or Safari, Firefox... even IE's), is there a way to load the page, one Javascript resource at a time? This way I can see exactly which resource loads when the page issues appear.
(I'm also open to better ways of debugging this kind of thing.)
You can use the Pause on exceptions feature of DevTools, in Sources Tab, it is the hexagonal pause button at the far right.
I got a website, which contains some JavaScript & CSS. Not much fancy stuff is made, but it makes Safari 7 (version 7.0.2) hangs when changing language ( click the Chinese character on the right top corner ); CPU spikes to >100% and the wording "Design to Inspire", which is a GIF image hangs at the middle. How can I diagnose the JavaScript on that site?
Some discussion online suggests that the new feature of Safari 7 to allow plugin to stop to save power is buggy, causing performance degradation. Yet, after disabled the feature, the issue persists.
On the other hand, some developers suggest that I can use Safari's Developer Panel to diagnose the performance, but the Panel hangs along with Safari. No usable data is captured.
Notes:
Same issue does not appear in Chrome / Firefox / IE.
Can't post all the codes here, as the JavaScript has over 1000 lines
In Chrome, developer console tells my CPU usage of JavaScript is normal
OS is Mac OS X 10.9.2
Safari in Guest User still has the same issue
Other software does not have major usage of CPU (i.e. CPU is almost idle)
I've got a page that takes about 15 seconds to load, due to a few loops I have going on, cloning DIVs and loading content into them. Is there some way in the Chrome inspector that I can easily see where the hold-up in my script is?
EDIT: I tried the 'Profiles' tab in the inspector, but it doesn't show my actual script. It shows the jquery.js source code which is not useful.
Look at the Profiles tab of the inspector. note: this is webkit only
More information on the specific browser profilers can be found...
Chrome: https://developers.google.com/chrome-developer-tools/docs/profiles
FireFox: http://getfirebug.com/javascript
Opera: http://dev.opera.com/articles/view/opera-developer-tools/
Even IE has dev tools: http://blogs.msdn.com/b/ie/archive/2008/09/11/introducing-the-ie8-developer-tools-jscript-profiler.aspx
at the beginning of what you want to inspect put:
var startTime = new Date().getTime();
and at the end:
console.log(new Date().getTime()-startTime)
If the problem is related to the performance of javascript then Profiles tab in Safari WebInspector or Chrome DevTools will help you.
The difference between them in the profiling code for Safari JSC and Chrome V8.
JSC has Instrumenting profiler, V8 has Statistical profiler.
The first one is more precise, the second less affects the performance of the page.
The UI is the same in Safari and Chrome.
There is two different sort orders for the profiling data.
Heavy (Bottom Up) and Tree (Top Down). You can change it in the combo-box at the bottom of Profiles page.
If the most time consuming entry is the '(program)' then I'd recommend to use Timeline Panel.
Chrome version of Timeline Panel provides more information.
Is there a web developer functionality/tool that allows us to know how many times a browser is doing reflows?
basically I want to have some sort of feedback/information. I don't know how it will be, but perhaps some sort of performance graph that shows the timeline (akin to Google's Speed Tracer) so I can investigate when suddenly at a point the browser is doing an insane amount of reflows so I can point out hey here's a bottleneck, there got to be a bug/bad implementation of something here or something.
Chrome and Safari have Timeline tab in Web Inspector where you can see all the reflows and redraws made by browser.
Firefox has MozAfterPaint event. It can help you understand which regions of the page and when repainted by the browser. Firebug Paint Events add-on can be helpful here. It shows repaint events in FireBug console.
You can track reflow information if you have a custom built Firefox.
see below:
https://developer.mozilla.org/en-US/docs/Debugging_Frame_Reflow
How to build Firefox with enable debugging mode:
https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions
Sometime after late 2013, the reflow logging is built into Firefox logging.
https://mail.mozilla.org/pipermail/firefox-dev/2013-October/001044.html
In browser console (Tools > Web Developer > Browser Console), in the [CSS] menu, select "Log"
I have a Javascript image switcher on my products page. It working perfect in IE and Firefox but both Safari and Chrome fails to load the script on some pageloads. A refresh seems to fix it but when changing product page or language it crashes.
The product page
Im using Wordpress and the script is varal.org/media/imageswitcher/
Thanks!
Anton
I did not experience any issues in either Chrome or Safari for Windows on your product page. Try this in Chrome, to check if the two scripts (imageswitcherconf.js and imageswitcher.js) are being loaded:
Press Ctrl+Shift+J to open the JavaScript Console/Developer Tools window.
Click the Resources tab on the top of the window.
Enable resource tracking/script debugging if you have to.
With the JavaScript Console/Developer Tools window still open, perform an operation that would normally trigger a crash, such as switching languages.
On the left side of the window, under the Resources heading, you should see imageswitcherconf.js followed by imageswitcher.js. (For me, they appeared fourth and fifth in the list, respectively.)
If the files aren't being loaded:
Are you behind a caching proxy?
Is your browser cache clear?