Meet the Console
Our final post for 2010 comes after a few discussions with industry friends. I was surprised to find that a number of them had never used the in-browser debugging consoles for JavaScript. Regrettably this also included a certain member of our own office, but he can remain nameless for now.
So for those of you who haven’t yet been formally introduced to the browser console API, here’s a great way to start fresh in 2011.
Visual Debugging
When you work on websites, debugging is mostly a visual experience. It’s easy to see misaligned columns or overlapping text, change something, and then refresh. With PHP, error reporting stops the script and displays the issue right on the page. In short, a good chunk of web design errors can be handled identified by page load.
The console API is a browser object that can be used to output debugging information as a page loads. For example, the console might output an error if an image element had a source of “definitelynotareallink” instead of a valid URL. The console really shines when it comes to JavaScript, especially when sorting through the DOM.
Firebug has the best documented (and robust) console API, but Firefox isn’t the only browser that can use it. Most modern browsers have development tools that include a console tab. For Chrome and Safari, you can reach this view by right-clicking and selecting “Inspect Element” from the context menu.
Simple Examples
The console support a number of options, but you’ll probably only use the same 3-4 regularly. From my own experience, the log() function is by far the most useful. It outputs a new message line to the console that can contain plaintext, DOM Elements, or variables. The examples below cover a couple of the more common functions.
In this script, the console outputs a different result depending on whether or not the full_name variable is empty:
- if (full_name != “”){
- console.log(‘The name \”‘ + full_name + ‘\” was entered’);
- }else{
- console.error(‘No name was entered’);
- }
For this jQuery click event, the console will return information about the target element’s attributes:
- $(‘.trace’).click(function(){
- //Run a trace on this click event
- console.trace();
- return false;
- });
Direct Input is Allowed
The console goes much deeper than simple outputs, and can also accept direct input similar to a command line. For example, type “document” and press enter to get the page returned. Console DOM traversal is a bit heavier (and not as immediately useful) for an introduction, so we’ll leave that for another post.
Keep the Page Clean
Debugging behind the scenes keeps your page clear of any “testing only” outputs that must be deleted before launching. It’s entirely possible to leave console debugging in a live installation without the user ever noticing.
Next time you’re working on a JavaScript project, give the console a go. It’s a hell of a lot easier than creating random alert() boxes for specific triggers. When it comes to troubleshooting, unobtrusive is wonderful.
If there’s a further interest in this topic, there are a number of things we can do more on, particularly with tracking jQuery events. If you have any suggestions, questions, or expertise of your own to throw in, leave a comment below and we’ll compile something for a future post.
