Going Full đź’Ż Karen on JavaScript with the Web Console

Written by Jordan H.

Karen Hates JavaScript

Whether you like it or not, at some point, with whatever programming language you’re develping in, you’re going to have to enter the debugger. C uses GDB. Java uses JDB. Python uses PDB (or iPDB). This allows you to step through the code and find out where an error exists.

But there doesn’t seem to be a “jsdb” for JavaScript. If you’re using node, there’s a debugger for that, but what if you’re not using the Node framework? How can you tell what your code is doing?

You speak to the manager, that’s what you do!


Where’s the Feedback?

Consider the following:

<!DOCTYPE html>
  <html>
    <head>
        <title>Simple JavaScript Debugging Example</title>
    </head>
    <body onload="init()">
        <p>To do list:</p>
        <ul id="todoList">
            <li>Unit Tests</li>
            <li>Documentation</li>
            <li>Writing Code</li>
            <li>Comments</li>
            <li>Integration Testing</li>
        </ul>
        <script type="text/javascript">
            function init () {
                items = document.getElementById("todoList").children;
                for (let i = 0; i < items.length; ++i) {
                    let rgb = [
                        Math.round(Math.random() * 200),
                        Math.round(Math.random() * 200),
                        Math.round(Math.random() * 200)
                    ];
                    items[i].attributes["style"] = `color: rgb(${rgb.join(", ")})`;
                }
            }
        </script>
    </body>
</html>

Essentially what we’re doing here is assigning a random color (below rgb(100, 100, 100) so we can read it) to each element of the “To Do List.”

For those not familiar with JavaScript, those back tick marks (``) indicate that whatever is inside ${} is to replaced by variables in the current scope.

By the look of this code, everything seems correct (astute JavaScript developers can probably spot what’s wrong, but that’s not the point of this article).

But why doesn’t it work?

Why doesn't it work?

Where are the pretty colors? That’s okay…The debug console will tell us.

No Error?

Hm…perhaps not.

You can ignore the 404 error (It’s the browser trying to find a favicon). But we don’t see any error in the console related to the JavaScript

But our web page does not show the list items with pretty rainbow colors?

Now, ask yourself…would Karen give up, or would she demand that JavaScript tell her what’s wrong?

You know the answer to that one! Let’s speak to the manager!

The manager (in this case) is the debug console.

Debugging in the Console

We must use the browser console for debugging in this instance.

I’m a fan of Firefox, moreso because of Mozilla’s respect of user privacy, but Chrome an Safari have similar consoles.

One neat feature about the console is that it has very powerful object inspection. You can duplicate objects, edit objects live, and even add break points to code.

How can we do this? console.log. Open up the JavaScript console and type console.log("Hello World"). You should see the following line in the console:

Hello World                 debugger eval code:1:9

What this is telling you is that this value is given on line 1, column 9 of the “debugger eval” (equivalent to a source code file).

But there’s more to this. console.log can also print out objects.

console.log(window);

OK? So? How does that help us?

Right click on the object of the line printed, and you should see the following menu.

Store As Global Object

Click on “Store as Global Variable.” You’ll now see the following in the console:

temp0 is now window

This is cool! Now we can do whatever we want with window as temp0! This is how Karen can get her way in the code.

So let’s make a small modification to the code to print out the variable in JavaScript:

// ...
    function init () {
        items = document.getElementById("todoList").children;
        for (let i = 0; i < items.length; ++i) {
            let rgb = [
                Math.round(Math.random() * 200),
                Math.round(Math.random() * 200),
                Math.round(Math.random() * 200)
            ];
            // Print out the current item.
            console.log(items[i]);
            items[i].attributes["style"] = `color: rgb(${rgb.join(", ")})`;
        }
    }
// ...

If we open up the console window we’ll see the following:

List Items Printed

As you can see, each individual li item has been printed to the console.

Note this corresponds to items[i], for which we don’t correctly set the style color. Why is this? Let’s inspect the items[i] element.

First right click on it, and say “Store as Global Variable.” The new variable name will be called temp0.

Here’s what’s cool…even though the items[i] printed to the console only lives as long as the for loop, Firefox stores a reference to this instance in memory for future use.

So now let’s use temp0 for debugging.

First, let’s see if there’s anything called attributes

temp0.attributes
// > NamedNodeMap []

Looks like there is. So there’s no issue there. What are some of the items of NamedNodeMap? There’s a little triangle beside the result of temp0.attributes. If we click on it we’ll see an expanded definition.

I am setting attributes correctly

So, looks like I’m setting style correctly! But it still doesn’t work!

Me: goes on Internet hunt to search how to add styling to elements in JavaScript

Okay, looks like the actual way to do it is:

item.style = "color: <color>";

But let’s experiment to see if it would work. In the console, copy using temp0, try setting the color to green:

temp0.style = "color: green";

Whadayaknow it works!

Whadayaknow

So let’s correct our new code to use items[i].style:

// ...
            function init () {
                items = document.getElementById("todoList").children;
                for (let i = 0; i < items.length; ++i) {
                    let rgb = [
                        Math.round(Math.random() * 200),
                        Math.round(Math.random() * 200),
                        Math.round(Math.random() * 200)
                    ];
                    items[i].style = `color: rgb(${rgb.join(", ")})`;
                }
            }
// ...

And now when we reload the page we have pretty little rainbow text!

Pretty Little Rainbow Text

Conclusion

As we saw, there really is no good debugger in JavaScript that has the same power as GDB or PDB. However, with a little inginuity, we can find out what’s wrong in our code and correct it.

It essentially involves printing the object within the current scope to the console. You can do this from within any code construct, including anonymous functions. The browser is pretty good at maintaining references to all these elements, so all you have to do is explore the object you’re interested in.

This was a pretty simple example, but you can imagine the more quirky examples that you may have in your own development process (e.g. responses from AJAX calls).

And note that there are a lot of other features with the web console and debugger I didn’t even cover, like setting break points and stepping through code. There are a lot of tutorials written on this, but I didn’t see a lot that covered this simple strategy.

Essentially, we went full Karen. Because we deserve better from JavaScript!

Did you like this article?

Did you know I'm available for hire?

Send me an email here: hireme@jordanhewitt.pro

Or connect with me in Wire: @nswered