First Glance: Debugging JavaScript FE

First Glance: Debugging JavaScript - Front End Addition

Debugging JavaScript can be an intimidating part of becoming a front end developer. Because JS is run entirely in the browser, the technique for troubleshooting broken code can happen in many places. Luckily, modern browsers are aware of this and give us a collection of options for digging into your code.

### 1. Developer Tools
One of the first things you should familiarize yourself with when working with JavaScript (or HTML...or CSS...) are the dev tools. You can find a cool tutorial to dive deeper with  [Code School's Discover-DevTools Tutorial.](http://discover-devtools.codeschool.com/) (Chapters 3 & 4 are particularly helpful)

To open developer tools in Chrome:
  - Mac: `Cmd` + `Opt` + `i`
  - (or) Right click on the browser window and select `inspect`
  - (or) Select `View` in the navbar, then `Developer`, then `Developer Tools`

Personally I find that pinning the dev tools to the upper right is the most convenient (You can also expand them into their own window)

![navigating](http://g.recordit.co/L8euYRVfrA.gif)

When working with JavaScript, it is useful to keep your console open at all times to watch for errors and anything you've told your code to print out. Bringing us to...

*Note - To see both the default dev tools AND console at the same time, hit `esc` with the dev tools open. You can also click on the three little dots in the upper right hand corner of the dev tools window and select `Show Console`*

### 2. console.log()
`console.log()` is to JS what `puts` is to Ruby. This line of code will print whatever is provided as an argument to the console, which lets you dig in and make sure you're getting back what you expect.

Given the following function called `printStuff()`, adding console.log() will print the value of `myVariable` to the console.
```
function printStuff(){
  var myVariable = 5 + 5
  console.log(myVariable);
}

printStuff()
=> 10
```

If you're confused about what a variable or function is returning, throw `console.log()` into your code or directly into the `console` in your browser to confirm/deny suspicions.

### 3. Debugging In the Console

There are two ways to use JS debugger.

#### Option 1: Let the Console Debug For You

Lets say you want to build an app that keeps track of some really great ideas. You wrote a bunch of code to filter said ideas based on text you enter into a search field and as far as you know, everything is perfect.

The following event delegator watches for text to be entered into search field. ( For this example I've intentionally misspelled the reference to the jQuery variable `$ideaContent` to be `$ideacontent` in the if statement.)

```
// index.js
$('#search-ideas').on('keyup', function() {
  var currentInput = this.value.toLowerCase();

  $ideas.each(function (index, idea) {
    var $idea = $(idea);
    var $ideaContent = $idea.find('.content').text().toLowerCase();
    if ($ideacontent.indexOf(currentInput) >= 0) {
      $idea.show();
    } else {
      $idea.hide();
    }
  });
```

When I first fire up `rails s` and visit `localhost:3000` my app looks normal, but when I enter an `s` in the search bar, my ideas aren't filtering correctly. WTF Mate?

If I open my console in the dev tools (`opt+cmd+i`) this is the screen I see:

![Console Error](http://i.imgur.com/sPfEO15.png)

Check it out! There are three important things to notice here.  

**One:** We see a little red circle with an X in the corner. This will appear when you are on any tab in the console, but for more details select the `Console` tab.

**Two:** In our console log history we see a very helpful error message! `$ideacontent is not defined`. That's a true story because we spelled it wrong, but what if we didn't know that?. 

**Three:** To find out exactly where this line of code is found, check out the link to the right. Here it tells us that the error is happening in (`search.self-....js?body=1:11`) - So we're dealing with our `search.js` file, and the last digit `11` indicates the line number. Now we have some information and go back to that file and start debugging.

Overview: We see The file name, the chunk of text causing problems, and the exact line where `$ideacontent is not defined` is flagging the debgger. Huzzah!

*ProTip:* If you click on this link it will open up the `.js` file and point directly to the issue.

![Imgur](http://i.imgur.com/cbcFX0B.png)


#### Option 2: Stick `debugger` Directly Into Your Code
Debugger is a built in tool of JS that will stop your app in it's tracks whenever the browser gets to it. Stick `debugger;` within a function to pause the browser from running the script when it hits a particular part of your code. Once you've "hit the debugger", you can use your console to poke around in your code with access to any information your program has at that point.  

Lets revisit our search-functionality example, but this time throw the line `debugger;` where you think you're having a problem.

```
// index.js
$('#search-ideas').on('keyup', function() {
  var currentInput = this.value.toLowerCase();

  $ideas.each(function (index, idea) {
    var $idea = $(idea);
    var $ideaContent = $idea.find('.content').text().toLowerCase();
    debugger;
    if ($ideacontent.indexOf(currentInput) >= 0) {
      $idea.show();
    } else {
      $idea.hide();
    }
  });
```

Now when we run `rails s` and `localhost:3000`, if we open up the dev tools, navigate to the console and try to search for something.  The program will freeze on the line `debugger`.

*NOTE - The console must be open for debugger to catch, otherwise the app will look normal and you won't get any error messages - if you get stuck, refresh your page while the console is open and go from there.*

![Imgur](http://i.imgur.com/Ch2bxhb.png)

You can see the code has stopped on the line `debugger`. This lets us type some stuff into our `console` to see what's going on. If I was still confused here, I'd start reviewing each line of code after the debugger to make sure I was getting back what I expected. SURPRISE! `$ideacontent` is still undefined.

The two areas marked with `***` are the js control panel - Here you can either click the blue play arrow to continue executing the function (similar to  `exit!` in `pry`, which is the blue arrow) or "step through" to the next action in that function (the arrow over the dot).  

___

For more details and information about other ways to dig into your js, checkout the [Chrome Documentation](https://developer.chrome.com/devtools/docs/javascript-debugging).