Developer Tools

In the spirit of jotting down things I’ve learned, another important building block is understanding the callstack.  When I was in the bootcamp, we talked about what it was and why it was important, but really didn’t dive too much into the details.  As the programs I’ve built and worked with have gotten increasingly more complex, understanding this fundamental concept has become more important to me every day.  I remember when I was making my first few apps (Bingo and Streamr), I would go on these wild white boarding sessions to try and understand exactly what the hell was going on with my code.  “Where is the code now?” “Wait, did X happen first or did Y happen first?” Etc.

Enter the call stack, particularly in Chrome’s Dev Tools.  This was eye opening for me.  An opportunity to walk through my code line by line and follow each incremental step was exactly what I was looking for.  There are way more in depth tutorials and documentation on the dev tools than I care to write right now, so I’m not going to try and one up them.  (Documentation here and tutorials here and here) But I do want to point out some of the features that I found the most helpful, especially as a beginner.  Before I go any further, I want to give a shout out to a book I read that helped me realize I need these tools.  Recommended to me by my boss, “Learning JavaScript Data Structures and Algorithms” was really helpful in diving into some what I like to call basic-advanced features of JavaScript.  They’re basics to seasons developers, but they’re the first real dive into some of the more advanced things someone should start to understand.  Check it out here if you’re interested, highly recommended for newer devs.

So here’s an example of how I tried to organize my thoughts in the past before using pen and paper.


It’s a mess.  It’s hard to follow, hard to edit, etc.  What I’m trying to show myself is that all of that code on the side is still running INSIDE OF startGame.  It’s the breakdown of my code for the Bingo app I wrote and linked to earlier.  (Spaghetti code available for all to mock on GitHub here!)  Here’s an example of what Chrome’s Dev Tools automatically do for you and allow you to walk through and see:

Screen Shot 2017-04-01 at 3.34.06 PM

The first thing you see is “Debugger paused.”  This literally means my program is paused at a specific spot in the code.  At this exact moment, I can see what all my variables currently are, the scope of my variables, and what we’re in the process of doing(aka the call stack).  This is AWESOME.  I would have used this so frequently in the bootcamp had I known about this.

Next thing to notice is the Call Stack.  Now these specific functions won’t mean anything to you, but the idea is more important than the specifics of these functions.  What it’s showing us is that Dictionary.has is the “active” function.  The program is currently trying to resolve whatever it can in Dictionary.has.  What’s important to note is that we got to Dictionary.has by calling other functions first, notably in this case the anonymous function from main.js on line 1002.  In that anonymous function, it called on “Graph.addEdge.”  Before Graph.addEdge could be resolved completely, that function needed the functionality of Dictionary.get.  And before Dictionary.get could be resolved, it called on the function Dictionary.has to help it resolve everything.  So while we’re currently in Dictionary.has as the primary function, we’re also STILL IN all of the other functions as well.  It’s kind of confusing until you walk through it multiple times on your own, but it essentially means that the function Graph.addEdge is still “open” for lack of a better term.  It hasn’t been completely resolved, it’s still waiting for other pieces to be figured out before it can do it’s thing.

The best way I can think to describe this is like Order of Operations in math.  Let’s look at an example like this below:

1 + 2 * 3

The correct answer is 7.  Based on the Order of Operations(PEMDAS as we lovingly called it in my day,) we need to do multiplication before we can do addition.  So we’re adding 1 to whatever the product of 2*3 is.  So while we go and do 2*3 first, we’re still keeping in mind that this 2*3 isn’t an isolated thing and we’re done with the problem once we solve that.  We still have this “1 + …” that we need to keep in mind and apply to our product.  So I think of the “1 + …” as the call stack.  We have to remember to do it, but we need to resolve other things first before we can figure out the whole problem.

This is a really trivial example, but if you have a math problem like this one below, following the order and keeping track of all the pieces that need to be put together is the only way to get the right answer.  You need to follow the mathematical call stack.

Screen Shot 2017-04-02 at 2.30.30 PM

TL:DR of this post – Chrome Dev Tools are awesome, use them!  I keep finding ways to compare math to coding and I love it!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: