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.
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.
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.
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.
