How to Debug JavaScript Events with the Timeline

May 27, 2016 | John Cornelius, Web Development

It’s often difficult to debug JavaScript because, with few exceptions, scripts run within the browser are processed in a single thread. As a result, JavaScript is executed on a first-come, first-served basis, with events synchronously ‘stacked’ into an event queue.

While logical considering the memory and security constraints, the queue approach becomes especially problematic for things like timing events, which, despite a programmer’s intentions, may be forced to fire out of sequence—creating unexpected output or other errors.

This uncertainty can make debugging scripts a laborious process, fraught with console.log() statements and other tricks meant to provide some insight into the state of the event queue. Spend enough time working with JavaScript and you’ll invariably find yourself pining for something easier.

Using the Timeline to Debug JavaScript


Fortunately, something easier exists. JavaScript’s prevalence on the modern web, thanks in large part to client-side frameworks like Angular.js and libraries like jQuery, has given rise to powerful developer tools built directly into browsers like Chrome, Safari and IE.

The timeline is one of those tools. At its most basic, the timeline records activity over a desired period and then returns that activity in graphical format for user analysis. Things like resource fetching and evaluation, DOM rendering, CSS rendering, JavaScript listeners, events and more can be collected and analyzed on the timeline.

Debug  JavaScript 1

In Chrome, the timeline can be accessed by navigating to View > Developer > Developer Tools, then clicking Timeline and starting a new capture. Accessing the timelines in Safari and IE follows a similar process.

Debug  JavaScript 2

The timeline makes it easy to profile your application’s performance from page load through presentation, and to manually fire discrete JavaScript events (for example by clicking a button or link, or by scrolling a page while capturing) to observe the queue created by that event, plus the function(s) called and even the line number(s) evaluated.

Debug  JavaScript 3

Analyzing scripts with the timeline provides significantly more insight into event queues and browser processes, and can reveal a wealth of subtle interactions or clarify errors that otherwise would take much longer to find and debug.

Share This