I have a page constructed using Dojo and I need to measure how long the page takes to complete rendering on my browser (NOT time-to-first-byte, or time-to-last-byte).
In other words, the page (all bytes) might get downloaded to my broswer but the components I'm using (eg. calendar, grid etc) might still initialize and render long after the complete page has been downloaded.
Are there any tools that would allow me to measure when the page and all its components have completely rendered, reliably?
For render times in Firefox try Google Page Speed.
EDIT: in Chrome try the new Google Speed Tracer (Chrome 4 and up), it's amazing
Firebug's profiler & net tab can be helpful. Chrome has similar functionality in their developer tools.
For Internet Explorer you could use dynaTrace.
I've found that "Page Speed" for Firefox is a great plugin, and dynaTrace is definitely the best if IE6 is required.
YSlow will help you with Firebug and as previously mentioned dynaTrace is your best bet for IE.
Can you just do a dojo.connect to a method like postCreate on one of your widgets and get a timestamp?
dojo.connect(dijit.byId("myCalendar"), "postCreate", function(){
console.log(new Date() - start);
});
where 'start' is a global declared in a SCRIPT block in HEAD?
-Adam
Related
When using Chrome's Developer Tools to debug Javascript, the list of 'Scripts' tends to add multiple occurrences of each script as I'm changing/reload/testing the code. Safari uses the same essential tool set and does not do this. It's not unknown for a script to show up in this list 10 times. When this happens, the only thing I can think to do is to kill the tab and reload it. Is this a known bug?
Chrome version 18.0.1025.168 (up to date as of this writing)
Mac OSX version 10.7.3 (Lion)
Cheers!
Mark
I think you are using Chrome extensions. Some extensions will cause this issue, check by disable some of them.
Yes, this could be a bug. See:
https://code.google.com/p/chromium/issues/detail?id=113490
You could try seeing if there are several frames that are using the same script and test the frames one at a time...
Double-check that the scripts are not being called in your source multiple times. It's been my experience that I include js files multiple times on accident and didn't realize it until inspecting the final source HTML in Chrome's Developer Tools.
I am currently investigating why my site takes so long to load.
The Firebug net panel tells me this:
7.74s (onload: 16.02s)
What might be causing this huge gap?
What exactly is the browser doing after all resources are loaded until it fires the onload event?
Thanks.
It would be difficult to say the cause without a site URL. But you can do the following things at your end.
You can install the following Firefox addons
YSlow
Page Speed addon (check it with Google it is a product from Google itself)
This addons will give you fairly good idea about what causes your issue.
Also have a look the Best Practices for Speeding Up Your Web Site article from Yahoo! that specifies several points to improve the performance of the website.
Hope this helps.
JP
It's download time vs processing time onload. See also Timing with the Firebug Net Panel: What is the onload time?
Processing time of your onload scripts is very high, so use a profiler:
Use the Firefox Profiler tool to find bottlenecks in your JavaScript code. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples.
You can launch the Profiler by selecting "Profiler" from the "Web Developer" menu. You'll find the "Web Developer" menu under the "Tools" menu on Linux and OS X, and directly under the "Firefox" menu on Windows.
If you use the Net panel in Firebug you will get an itemised list of requests and times - you can determine the problem from there.
Ahem...
I'm attempting to find a bottleneck in my Javascript. Basically I'm developing a chrome extension written in Javascript which is taking 4-5 seconds to perform a task. There's a lot of code involved in the task and using print statements / chrome built in dev tools just isnt working. The dev tools don't seem to even see my Javascript running. I'm wondering if anyone has any advice / tools they think could be of benefit?
Open your page in Chrome.
Tools -> Developer tools -> Profiles
Start Profiling (3rd button, grey circle on the status bar at the bottom)
Perhaps it'd be a good idea to open the HTML files in Firefox instead of letting Chrome extensions handle it. That'd allow you to use Firebug to determine any causes, which would be very helpful.
I remember Google Chrome has a built-in JavaScript profiler. Or can't you use this for your extension? (I have never built Chrome extensions.)
You can try to use Profiler as it was mentioned before or Timeline.
Timeline will help you if the time was spent in native code.
http://shanamccormick.com
The page loads all the images and then says "(1 item remaining) Waiting on http:// shanamccormick com..." How can i see what it is waiting to load here?? and why does it take sooo long?
The index.html file uses a couple small internal JS and one external JS located within my website (jquery.min) The size of the external JS file is 54kb.
IE8 has a Javascript profiler, like Firebug for Firefox.
But I think you need Fiddler to profile the performance of the HTTP request/response.
If you want the Javascript developer tools (including profiler) I recommend moving to IE8, but if you can't,
IE7 has downloadable dev tools, like IE8's built-in capability.
I have a few solutions that might help. I learned of these from another question I asked earlier:
Firebug Lite is a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named "Firefox". Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
WebWait is a website timer. Use WebWait to benchmark your website or test the speed of your web connection. Timing is accurate because WebWait pulls down the entire website into your browser, so it takes into account Ajax/Javascript processing and image loading which other tools ignore.
Also, the IE JavaScript Real Performance Tester can test your scripts.
Hope these help!
The page doesn't exist anymore? or is it: shanamccormick.com ? misstype?
Anyway I've found that googles IE8.js (for IE7 and less) (https://code.google.com/p/ie7-js/) takes up to 1 minute to load (on a computer from that time) every page load... could that have been the problem?
I use Firebug and the Mozilla JS console heavily, but every now and then I run into an IE-only JavaScript bug, which is really hard to locate (ex: error on line 724, when the source HTML only has 200 lines).
I would love to have a lightweight JS tool (a la firebug) for Internet Explorer, something I can install in seconds on a client's PC if I run into an error and then uninstall. Some Microsoft tools take some serious download and configuration time.
Any ideas?
You might find Firebug Lite useful for that.
Its bookmarklet should be especially useful when debugging on a user's machine.
Since Internet Explorer 8, IE has been shipping with a pretty impressive set of tools for JavaScript debugging, profiling, and more. Like most other browsers, the developer tools are accessible by pressing F12 on your keyboard.
Script Tab
The Script tab is likely what you'll be interested in, though the Console, Profiler, and Network tabs get plenty of use as well while debugging applications.
From the Script tab you can:
Format JavaScript to make it more readable
Move from source to source of various resources on the page
Insert breakpoints
Move in and over lines of code while stepping through its execution
Watch variables
Inspect the call stack to see how code was executed
Toggle breakpoints
and more...
Console Tab
The console tab is great for when you need to execute some arbitrary code against the application. I use this to check the return of certain methods, or even to quickly test solutions for answers on Stack Overflow.
Profiler Tab
The profile is awesome if you're looking for long-running processes, or trying to optimize your code to run smoother or make fewer calls to resource-intensive methods. Open up any page and click "Start profiling" from the Profiler tab to start recording.
While the profiler is working, you can move about the page, performing common actions. When you feel you've recorded enough, hit "Stop profiling." You will then be shown a summary of all functions ran, or a call tree. You can quickly sort this data by various columns:
Network Tab
The network tab will record traffic on your site/application. It's very handy for finding files that aren't being downloaded, hanging, or for tracking data that is being requested asynchronously.
Within this tab you can also move between a Summary view and a Detailed view. Within the Detailed view you can inspect headers sent with requests, and responses. You can view cookie information, check the timing of events, and more.
I'm not really doing the IE Developer Tools justice - there is a lot of uncovered ground. I would encourage you to check them out though, and make them a part of your development.
I would recommend Companion JS.
This is the free version of Debug Bar but I find it easier to use and have the features I need. Great to test little JavaScript snippets in IE the same way I do with Firebug in Firefox.
EDIT 5 years later: I now uses Internet Explorer integrated developer tools.
IE 8 is supposed to have better tools, but the IE Developer Toolbar is pretty good.
I use both Microsoft Script Debugger and FireBug Lite, depending on what I am debugging. Both are great tools- try them both out and stich with what you're comfortable with.
In IE8 just press F12!
Go to Tools->Internet Options…->Advanced->Enable Script Debugging (Internet Explorer)
then attach Visual Studio Debugger when an error occurs.
If you're using IE 8, install the developer toolbar because it has a built in debugger.