JavaScript Development Tools

In General

Use a network analyzer to identify bottlenecks in the loading of scripts and other page assets; this helps determine where script deferral or profiling may be needed.

Use a profiler to identify slow areas in script execution, examining the time spent in each function, the number of times a function is called, and the call stack itself.

Helpful Tools

JavaScript Profiling – It is the language itself as a tool that comes with all JavaScript implementations.

YUI Profiler – It is a JavaScript profiler written in JavaScript. In addition to timer functionality, it provides interfaces for profiling functions, objects, and constructors, as well as detailed reports of the profile data. It enables profiling across various browsers and data exporting for more robust reporting and analysis.

Anonymous Functions – A common coding pattern in JavaScript, many functions profiled within a given page may be anonymous, making it difficult or impossible to measure and analyze. The best way to enable profiling of anonymous functions is to name them.

Firebug – It provides a console for logging output, a traversable DOM tree of the current page, style information, the ability to introspect DOM and JavaScript objects, and more. It also includes a profiler and network analyzer. It can measure and report on the execution of JavaScript on the page. The report details each function that is called while the profiler is running, providing highly accurate performance data and valuable insights into what may be causing scripts to run slowly.

Internet Explorer Developer Tools – Internet Explorer provides a development toolkit that includes a profiler. The profiler includes function profiling and provides a detailed report that includes the number of calls, time spent, and other data points. It adds the ability to view the report as a call tree, profile native functions, and export the profile data. Although it lacks a network analyzer, the profiler can be supplemented with a generic tool such as Fiddler.

Safari Web Inspector – The Web Inspector profiles native functions and provides an expandable call tree. It also includes a Firebug-like console API with profiling functionality, and a Resource panel for network analysis.

Web Storm

Chrome Developer Tools – Chrome includes the Web Inspector Profiles panel, and adds the ability to take “heap” snapshots of the current memory. As with Safari, Chrome profiles native functions and implements the Firebug Console API, including console.profile and console.time.

Script Blocking – Older browsers used to limit script requests to one at a time. This was done to manage dependencies between files. As long as a file that depended on another comes later in the source, it will be guaranteed to have its dependencies ready prior to execution. Today’s modern browsers allow parallel downloading of scripts but block execution, to ensure any dependencies are ready. Although this allows the assets to download more quickly, page rendering is still blocked until all scripts have executed.

Page Speed – A Google tool that provides information about the resources being loaded on a web page. In addition to load time and HTTP status, it shows the amount of time spent parsing and executing JavaScript, identifies deferrable scripts, and reports on functions that aren’t being used. This is valuable information that can help identify areas for further investigation, optimization, and possible refactoring.

Fiddler – An HTTP debugging proxy that examines the assets coming over the wire and helps identify any loading bottlenecks. It is a general purpose network analysis tool for Windows that provides detailed reports on any browser or web request.

YSlow – The tool provides performance insights into the overall loading and execution of the initial page view. It scores the loading of external assets to the page, provides a report on page performance, and gives tips for improving loading speed. The scoring it provides is based on extensive research done by performance experts. Applying this feedback and reading more about the details behind the scoring helps ensure the fastest possible page load experience with the minimal number of resources.

dynaTrace Ajax Edition – A robust Java/.NET performance diagnostic tool tool provides an end-to-end performance analysis, from network and page rendering to run-time scripts and CPU usage. The tool’s reports display all aspects together, so you can easily find where any bottlenecks may be occurring. The results can be exported for further dissection and analysis.

Advertisements

I am a technologist with a strong background in software engineering. I have many interests. My current distractions are 70s-80s-90s music [it's a very eclectic collection], ontology, information architecture, mobile device technology, medical bioinformatics, artificial intelligence, and nanorobotics.

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: