Debugging JS Part Two, "Console"

Debugging JS Part Two -- Console

The console in chrome (or firefox) is incredibly useful for debugging and writing code, and I use it constantly.

Open the developer tools in Chrome with F12

I generally use the console in the drawer (under Sources, with the symbol that looks like this:
This allows you to use both Sources and the Console, which work quite well together. Here are some of the things you can do in the console, but first, a quick tour.

In the drawer mode you'll see tabs labeled console, search, emulation, and rendering. Console is what we want. Search will search your source code (which can be handy), emulation allows for, well, emulation of user environments (like different web browsers, screen sizes, etc), and rendering enables some debug view options, that, for our project, don't work (except for the FPS meter).

Beneath that are buttons to clear the console output, filter to exclude certain things (like to show only warnings/errors), and a button labeled <top frame> which I've never used and isn't useful for Automaton.

Test an expression or syntax before putting it in your code

Suppose you took a week off for spring break, and you come back, and can't remember whether obj.foo works like obj[foo], (hint: only sometimes) or you want to know what the prototype (parent) of an object is. Or you want to try out a math expression. You can do all of those things, and more, in the console, which makes it a good way to quickly test something you're unsure of, especially if it could take a while to get it right by writing it, saving it, refreshing the browser, and then manually testing.

Test an entire function, or plug parts of your codebase together 'interactively'

This is one of my favorite things about the console: you can write functions in it, then test those functions, and plug them together with your existing code, or plug parts of code together that haven't been "wired up" internally just yet. Maybe you have some type safety concerns, or maybe you're creating mock objects for testing. This can be a good way of doing that. If it's a unit test that you want to repeat, you're better off just making unit tests.

Because functions are first-class functions, we can do all kinds of nutty things in JS. Just be careful to NOT use recursion, because it's a great way to freeze your web browser.

Dynamically inject code and inspect properties

If you pause your code, your console will have visibility of the current scope. So, if you put a breakpoint on a line where a variable, x, is set to something else, call it y, you can use the console to get the current value of y dynamically. You can even set x to something else! You can do all of this without pausing - as long as the objects are global. this allows you to test and modify instance variables, or look inside of inner loops to see what the devil is going on. It can be faster than using watch expressions, and much more flexible.

You can even call functions at certain points inside the code, internally. Be cautious, because this can still cause side effects, and the results might be completely, utterly wrong, because suddenly the browser is executing code out of the order it was intended to be executed in!



The console is a great tool in Chrome, and has some features not found in most consoles - and therefore worth writing about here. In particular, the ability to wire together system components with puppet, "tonka toy" parameters or values, and check that they work before committing to writing the full-on system is an invaluable tool. I use the console regularly for all of these things. It saves a lot of time spent writing and then checking - especially since, in Javascript, runtime errors are the best you can hope for.