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.

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?

Interesting interview question #1

During an interview (for a software developer position) with a major employer in the state of Utah, I was asked an interesting programming question:

Create a function that, given an integer parameter, will return the middle three digits

I mentally wiped the sweat away from my forehead: whew — not computing bigO notation,  inventing a new search algorithm, or performing my favorite song!

I verbally walked through my thought process:

There will be a need for some looping to trim off the first and last digit of the integer each iteration — perhaps a while loop with the condition that the value is greater than 99? No, there is a better way: I’ll trim the digits recursively.

I asked for some feedback on my thought process, then set out writing some code. I came up with something like this:

“Nice solution,” the interviewer replied. “How will your function handle 4501?” Uh-oh: It will trim 4 and 1, and return 50. “Hmm… What about 40251?” Darn: It will trim 4 and 5, recursing on 025, which will be interpreted as 25 and fail.

So, as it turns out, programming questions in interviews might not be about creating the elegant, recursive solution — but about asking the right questions. Thorough requirements gathering.  Lesson learned.

After the interview, I couldn’t get the question out of my mind, and spent some time giving it a proper solution: handling input less than 999, error-ing on even values (finding the middle three of an even digit value is a somewhat undefined behavior), and polishing it off with some unit testing.

See a live version here

 

Camera Shake in Unity

After much Googleing for how to do a camera shaking effect in Unity, I decided to write my own small script to accomplish the effect. It combines both positional movement with rotational movement to simulate closely an actual camera shake.

The two key variables are:

shake_intensity

Shake_intensity determines the initial intensity of the shaking — how much variance to allow in the camera position.

shake_decay

Shake_decay controls is the amount that shake_intensity is decremented each update. It determines if the shake is long or short.

 

 

 

 

Unity Web Player. Install now!

 

 

 

JavaScript

C# (c# port by commenter georgeegonut. Thanks George!)