All of the major browsers come with built-in JavaScript debuggers, but they vary in quality. After trying all of the A-list browsers, I have come to the conclusion that Chrome’s is tops in the area of page testing and debugging. I already gave a general overview of Chrome’s excellent developer tools in the Just One Reason Why Chrome’s Developer Tools Are The Cat’s Pajamas article. In today’s special Yuletide themed follow-up, I’m going to home in on features of the Chrome JavaScript Debugger that are especially near and dear to my heart. Feel free to follow along!
Selecting JavaScript Files To Work With
The first thing you’ll want to do is bring up the debugger. To do that, navigate to the page that you’d like to work with. That’s important because the debugger is frame specific so that it will only appear for the tab or window that it’s associated with. That’s a great feature because it allows you to browse to other sites without having the debugger spit out warnings and such for pages that you have no interest in debugging – a definite annoyance with some debuggers! The debugger is part of the larger Developer Tools suite; these include a whole slew of categories, including DOM elements, page resources like local storage, and network tasks. They Developer tools are accessible via the Tools > Developer tools menu item from the Chrome menu, located at the top-right of the browser window:
Here’s another easy way of getting there that I often use. Just right-click on any page element and select “Inspect item” from bottom of the popup menu, and voila, the element’s markup code is highlighted in the Elements pane of the Dev Tools.
Once the Dev Tools are displayed, click on the Sources button to access your page files – it’s the fourth one from the left. Then, click on the “Show Navigator” button on the far left to navigate to the file that you’d like to work with:
The Sources pane shows all files associated with the current page. Once you’ve found the script that you’d like to debug, one click will open it in The JavaScript code pane. You may select several files without the navigator closing on you after the first one by clicking on the “Pin navigator button” beside the Snippets tab:
Editor Features
The JavaScript code pane is quite intuitive and offers more than enough functionality to make writing and testing your scripts a highly productive process. It provides syntax highlighting and is completely editable. Changes can then be saved so that you can replace the old file on your server with the new one.
Live Editing
As far as I am aware, Chrome is the only browser that allows you to edit your code on the fly. Here’s how it works.
- Open a script file in the code editor and place a breakpoint by clicking in the left-hand margin.
- Refresh the page to execute the script up to that line.
- Now you can click directly in the code editor. You’ll see the flashing cursor appear, ready to accept text input.
Usually, just a few key strokes is all that’s required, thanks to the auto-complete feature:
Changes may be tracked in the Local modifications pane. From there, you can also revert back to earlier versions:
Working With Minified Scripts
One source of frustration when working with server files, is that they are often minified; not ideal for development or debugging! However, Chrome makes it possible thanks to the “Pretty print button”. It adds the newlines and indentations back in for easy stepping through the code. Here are some before and after screenshots for comparison:
Before:
After:
Not only does the Pretty Print formatting make the code easier to follow, but it’s really quite essential for adding breakpoints.
Code Navigation
Tracing your way through dozens of function calls can become a maddening ordeal fast. To make navigating through the code a little easier, Chrome offers some handy shortcuts. For instance, pressing Ctrl+Shift+O (Windows) or Cmd+Shift+O (Mac) brings up a list of available functions. Selecting one will bring you directly to its signature:
Another approach is to hover the mousepointer over a function call. That’ll bring up the function’s code as well as a link that can be clicked on to bring you to that function:
Directing Code Execution
Numerous steps may be required on your part to reach a given breakpoint. For that reason, it’s in your best interest to avoid having to repeat them. The following scenario will illustrate how to repeatedly execute the same block of code by controlling both forwards and backwards code execution.
Imagine that you’ve placed a breakpoint in a function and that code execution has halted on that line. To execute the function without returning, right-click in the margin on the left of the last line in the function and select “Continue to here” from the popup menu. That will run the code up to that line, at which point the debugger will break. The real trick now is to return the code execution back to the original breakpoint. In most browsers, there is simply no way to do that, but in Chrome, you can use the Restart Frame command to restart code execution from a given point:
You can start execution in any calling function ancestor by selecting a process further down the Call Stack.
Conclusion
Having worked with some excellent (and some of the most expensive) IDEs, I can say without hesitation that Chrome’s ranks up there with the best of them, despite it’s basement bargain price of $0 dollars. And I’m not alone in that opinion; Paul Irish is another notable Chrome enthusiast. OK, so he works for Google. Nonetheless, you don’t think that he would waste his time on anything but the best tool that he could get his hands on, do you? Right, so have yourselves a great holiday season, and I look forward to writing up some more articles for y’all in 2014!