Front-end Series: JavaScript debugging tips and tricks

Note: many of these tips are written with Chrome in mind, but are applicable to any modern browser with developer tools.

  1. Understand what is happening in your code
  2. Set and use Breakpoints
  3. Use the Console api
  4. De-minify
  5. Modify scripts locally
  6. Use a Unit-Testing framework

1. Understand what is happening in your code

A prerequisite to debugging is understanding the code in question. Before debugging, you should be able to answer: what is the purpose of this function? What should the parameters be? How will this line affect local and global variables?

Basically, run the code mentally before trying to debug.

2. Set and use Breakpoints

Once you understand how the code should function, set execution breakpoints at key places. When reached, a breakpoint will pause the execution of script on that line. You can then “step-through” the code one line at a time. This view also allows you to inspect any global or local values to ensure they are what you expect them to be. Often times, you can observe a variable which should contain a value, but is undefined. From there it is easy to trace your way back up and see where the error is occurring.

Breakpoints can be set by clicking on the line-number in the script tab of chrome developer tools, or programmatically using the  debugger; directive.

debug-breakpoints

Use the console api

While sprinkling a few  console.log ‘s sparingly throughout your code can be useful, the console api has many useful functions that might serve the purpose better. Here are a few console api methods I have found useful:

console.dir

Displays all the properties of an object.

console.dir

 console.table

Formats arrays and objects as tables, and allows sorting on columns.
console.table

console.time

Starts and stops a timer (string tag based), logs time (in ms) of intermediate code.
console.time

console.memory

Returns heap information for this process.
console.memory

console.trace

Returns a stack trace for the function where it is called.

console.trace

4. De-minify

When debugging, it can be very frustrating to see an error like:

When at all possible, swap out the minified version for a full expanded and commented version of the script.

When a full version is not available, Chrome’s developer tools come to the rescue. The curly brace button below the script will automatically expand lines for better breakpointing and debugging. It does not however rename obfuscated variable names.
de-minify

Minification bugs

Every so often, you can run into the maddening bug of a full script working, and the same minified script breaking. Luckily, these bugs often attributable to one of a few small problems (mostly having to do with missing semicolons).

For example:

These bugs can also creep in from preceding scripts, or when multiple scripts are concatenated together. This is the reason that jQuery plugins typically start with a  ; . It is a preventative measure against misbehaving code above it.

5. Modify scripts locally

Chrome allows you to modify script files and run them locally. Simply double click into source file, type, and CTRL-S to save. Not much more to explain, but very useful trick!

6. Use a Unit Testing framework

There are a handful of very good third-party unit-testing frameworks for JavaScript, each with their own philosophy and syntax.

See this great Stack Overflow post for many more.

Creating your own JavaScript Library – part 2 – Event Handling

write-your-own-javascript-libraryIn Part 1 of Creating your own JavaScript library, we cover the library essentials: library design, creating a solid object constructor, and adding functions by extending the object prototype. This post focuses on extending our basic library with event handling.

Out of the box event handling can be accessed  through Javascript and DOM apis, shown in the first 3 examples:

Simple event handling:

Assigning functions to events this way can be problematic, as only one function can be assigned at any given time. Mozilla Developer Network recommends that the addEventListener method be used instead, because of its flexibility.

Better Event handling

The addEventListener method accepts three parameters:

Assigning an anonymous function:

We can easily wrap this built in functionality with our library by creating a click function with a parameter that is passed to this native DOM event. This parameter will be an anonymous function (like the previous example) that will then bound to the element’s handler.

Handler wrapped by our library:

This pattern can be applied to any event natively exposed, such as:

  • onclick
  • onmouseover
  • blur
  • keydown

Non-standard or browser specific events

In the case where one browsers event api differs, it is simple to account for this in our event handler:

Optimizing our code

Instead of duplicating the addEventListener code in each event wrapper, we can optimize by creating an internal addListener(event, callback) function which will be called by other exposed functions, such as click, onMouseOver, etc

This separates the public wrapper from the internal event binding, allowing us to easily modify or expand the actual event binding code without modifying it in numerous places

 

Custom events system in JavaScript – LightEvents.js

Needing an event subscription and publishing system for a HTML5/canvas game I’m creating, I wrote a very light event system.

Anything than can call JavaScript (link, button, etc) can raise an event:

LightEvents.publishEvent('event name', data);

Subscribing to events is equally easy:

Here is the LightEvents object, demo is embedded below

JS Bin

Quick and reliable ad-rotator

In the course of my work, I’ve created and refined a simple ad rotator. It is built in JavaScript, and does not rely on any library, like jQuery, to function.  In my experience, it defeats ad-block, and loads easily on all mobile, tablet, and desktop browsers.

The rotator can be included multiple places on one page without any conflicts or collisions, so just drop-in where needed. Some coding is required to customize — basically copying and pasting your links and image urls, but nothing too heavy.

 

Full-adders, 32-bit adders in JavaScript

Full-Adder circuit diagram
A Full-Adder, courtesy of the Wikimedia Commons

Fascinated by a lecture as part of my CS degree pursuits (there is light at the end of the tunnel!), I  decided to build some digital circuitry beginning with logic gates and ending with a full 32-bit adder. LIVE DEMO

So here’s my question: I’ve got a 32-bit adder… What now?

Beginning with basic AND, and OR functions, (&& and || operators are native to JavaScript), I built a simple XOR function — which is the first building block not built in to JavaScript:

I wanted each gate/function to work with simple Boolean values, as in JavaScript 1==True, 0==False can get a bit messy. For formatting reasons, I return each value + 0, so they results of higher order circuits are displayed numerically in   binary, rather than a series of True, False’s

After implementing, these foundational gates, I coded up a full adder:

 Within the returned object, “c” represents the carry, and “s” represents the sum. Information about how adders function can be found at this great Wikipedia article.

While there are more complex versions, a simple 4-bit adder is just 4 full-adders daisy chained together which each carry leading into the next adder. The final carry is returned from the 4-bit adder:

16, and 32 bit adders function in the same way: several smaller units daisy chained together, returning the final carry along with the sum:

The functions can be used like so:

So here’s where you come in: What do I do with a 32-bit adder, other than build a 64-bit adder?

Convert
tag to Google Maps embed automatically with jQuery

Converting an <address> tag into a Google maps link is something I’ve written about in the past, but user “Moose” was wondering if you can do the same thing, but transform it into an embedded map. Quick answer: Yes!

Using jQuery, we search the document for <address> tags,  create some HTML to embed the map with the current address inserted in it, then write that HTML out into the current spot.

Welcome to JS Bin

JavaScript Constructors

Due to the familiar syntax of JavaScript, it is easy for experienced developers to make blunders without knowing it. One common problem is crafting object constructors. With some simple knowledge and scope checks we can create well formed constructors that function as developers expect.

Because syntax and control structures look very similar in classic OOP languages (Java, C#) to JavaScript, it can be easy for experienced developers to jump-in, make progress, and then shoot themselves in the foot due to misunderstanding core differences in underlying language design.

One of those core differences is how functions can function as objects with constructors.

In a classic OOP language, a class,  constructor, and usage might look something like this:

Although the syntax is similar, doing something like this in JavaScript will land you in a bad place:

Scope

The first and most pressing issue is scope management.  Look back up the the JavaScript example — The function used in place of a class, is just that: a Function. Whereas a custom class is a datatype, a template for data, our function is a function in the same way as this is a function:

Primarily, the problem is with the scope of the this keyword with in functions.  Inside of a OOP language class, the this keyword refers to the parent object — the class that it is inside of. For example:

However, in side of a JavaScript function, the this keyword refers to the global scope, or the window object. Thus:

For the uninitiated, this can cause big problems. For example, consider:

A function/object Building, which contains the properties height, location, and occupancy, which are assigned like this: this.location = “123 N. 789 W.” Since the this keyword refers to the window object, your function has just overwritten window.location, the property used in changing the current location (url) of the page. Whoops!

But wait, there is a solution!

It is true, that a JavaScript object/function is really just a function — but you can create new instances of the function using the new keyword. Not only does the new keyword created a new instance (so you can have multiple objects of the same type on a page), but also assigns the scope of the this keyword to the function, NOT the window object. So, to use the previous example without clobbering the global scope:

However, if you have ever written a line of jQuery, you might be shaking your head in disagreement. Like you, I write something like this weekly:

So, how does that work?

To make sure that jQuery object is allways called with the new keyword, it does it for you, every time. See the jQuery source constructor:

So, each time $(“#asdf”) is used, jQuery returns a new jQuery.fn.init object. Now, keep in mind that this is one of several hundred lines within jQuery’s constructor source, but the key section for this subject. We can implement this method, with a few checks, in our code very easily.

Conclusion and template

So, to avoid clobbering the global scope, and to be convenient for implementers of your code, here is a well functioning JavaScript constructor template that can be implemented in your code:

See a demonstration of new keyword usage

JS Bin

100% height using jQuery

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here /2016/modern-100-percent-height-css/

I few years ago, I wrote a post about forcing two divs to be equal height — quite a feat if you’ve ever tried!  Since then, a great jQuery plugin has came out that makes equal div height pretty easy to accomplish.

Using the plugin jQuery.equalHeight, it is as simple as:

Try out a live demo.

Of course, you should make your decision to use this method carefully. It’s quick and easy, but if your aren’t using jQuery already, is it worth the load time for this fix? If you want to check out a non-jQuery solution, check out this vanilla JavaScript solution.

JS Bin

Creating your own JavaScript Library

One of the phases I went through while learning about JavaScript was the intense desire to write my own library, similar to jQuery (but massively scaled down).

My library has gone through several major revisions — and more than one complete re-write, but now is exactly what I started out hoping it would be: functional, clean, small, and a solid learning experience.

I’d like to share what I learned from this project, and I hope you share back with me through the comments!

Finished project demo

Step 1: Identify the purpose of your library

This might just be one of the toughest parts of the whole process!  If you are to the point in your JavaScript knowledge that you would like to build your own library, than you’ve likely used jQuery, mooTools, Prototype, or any number of other popular libraries.  I use jQuery extensively in my projects, and know that it is very capable in many aspects, including: animation, user input validation, AJAX loading/submitting, event handling,  etc. Knowing this, it is tempting to have lofty goals for your own library. One piece of advice: Don’t. 

Pick one particular function, or aspect of web development/design that you would like your library to handle. Pick a niche need, and be happy with yourself when you fill it.

I decided my library would be a simple way to manipulate elements visually. At this point, I didn’t quite know how — but all you need is the kernel of the idea.

Step 2: Mock-up how would use the library

You always mock-up a webpage before you start building it right? Whether on paper, Photoshop, or even in code, it helps to pretend what the finished product will look like before you build it. It helps you to see obvious bugs, conflicts, and unwanted interactions you don’t catch when looking at the problem mentally.

Have you ever mocked-up your code?  Write some implementation, pretending that the class or object you are dealing with exists. Trust me, it will solve problems!

I want my library to do visual stuff with elements, and I like how jQuery looks. How about this?

Looking at my pretend implementation, I can see 1 problem and a hand-full of design implementation points.

The problem: $ as a function name is likely to conflict with lots of other libraries. Through some Googleing, I learn at StackOverflow that functions must start with a $ (dollar-sign) _ (underscore) or letters.

We can also tell some design patterns:

  • _ is the function name
  • _ must accept one or more parameters
  • _ should return itself so that a dot-operator will work
  • _ must control its scope so that we can have more than one _() on a page
  • dot-operator methods must also return the _ object for chaining

Step 3: Code up an outline

At this point, we know enough about the goal of our library, and how we will implement it, to begin outlining the structure of our library.

It may be useful for some (me) to review javascript function/object  prototyping.

Step 4: Fix-up the constructor

Now don’t try and run your code just yet: we have a pretty big scope issue (besides no functionality):

When our _() function returns this , it is actually returning the entire window, or the global scope.  Therefore, when we call _().toggle() , we are asking the browser to call the toggle() method which belongs to the window. Obviously this fails.

This problem can be solved by recursively creating another _ object using the new keyword.

What is the new keyword in JavaScript?

 

For an in-depth look at this problem, read more about JavaScript constructors

Next to implement in our constructor: making the _() represent an element with some bonus error prevention.

First, we create an about object that will be returned, if the implementation doesn’t specify an element id. Next, we check if the id parameter was sent, and then create a variable to contain that element.

Here is a final version of the _() constructor:

 

Step 5: Prototype method implementation

This step is pretty fun: being creative, and implementing what you want your library to actually do!

I mentioned earlier that I wanted my library to do some visual manipulation of elements. Make a list of what you want to do. I came up with the methods:

  • hide ()
  • show ()
  • bgcolor (color)
  • val (value)
  • toggle ()
  • size (height, width)

The depth of this step depends on the functionality of your library. Mine were rather trivial to implement:

 

Demo or download the finished library here

Part 2 – Event Handling

Final thoughts

Writing my own small library was a good way for me to learn about JavaScript. One of the great ways to learn more is to study the code of other libraries and see how they work.

Did you use this tutorial to create your own library? I would really like to hear about it. Please leave me a comment below.

Cheers!

Update
Stack Overflow user W3Geek asked a question about part of this tutorial. Visit his question: How do these pieces of code function exactly? His question is focused on Step 4 about the object constructor. User Leland Richardson does an excellent job explaining this further — I’d direct you to his thorough explanation rather than duplicating it here.