# Debugging your JS with Chrome's Developer Tools
###### tags: Chrome Tools, Breakpoints, Debugger

While working on your project or labs you can debug via the Developer Tools in your browser. This can help you to figure out a little quicker what is wrong in your code or help you spot your data slightly faster than you normally would using `console.log`, more on console.log [here](https://medium.com/@demetrio-lima/console-log-console-yeah-13b4eb974c9e). I'm not saying to completely stop using `console.log`'s, instead this is another way to make your debugging more powerful.

## Set Up
In order for this to work on your machine you'll need to make sure you have 2 things.
1. Developer Tool's installed into your Chrome Browser
2. The extenstion "open in browser" installed into your VS code

## How to get there?

When you're on a lab/project/ticket and you are having trouble with your code, you can open your lab in a browser by right clicking on your `index.html` and going down to the ***Open in Browser*** selection. This will open the page on your perferred browser. When you're using React this will automatically happen when you use `npm start`.


Once on your webpage, you then right click again and go to ***Inspect***. Which will open an empty Console that will show you a selection of different things. This can show you your elements in your `html` file, your `console.log` outputs down below, as well as the application itself. The Console will also show you and number of warnings and errors happening within your code so you'll becoming familiar with it during your journey.


From here we want to go to ***Sources***, where we find the files for our application/lab. For bigger projects you might find multiple folders and files. Outside of school and home projects you may have to do more digging around but this should still work nonetheless.


For this example we are just going to our `index.js` file. Here we can insert ***Breakpoints***, which when running our application will start a debugger within the code. This allows us to test our code in real time without having to refresh the page or returning to VS code to make continous changes.


To finish the requirement for this `function` we have the following instructions:

### `createTimeInEvent`
* **Argument(s)**
* An employee record `Object`
* A date stamp(`"YYYY-MM-DD HHMM"`)
* **Returns**
* The updated employee record
* **Behaviour**
* Add an `Object` with keys to the `timeInEvents` `Array`, on the record `Object`:
* `type`: Set to `"TimeIn"`
* `hour`: Derived from the argument
* `date`: Derived from the argument

The first thing we decide that we need to do in this function is to [**`split`**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) the date stamp that we recieve as an argument. In order to make sure that our `split` function is working how we hope, we can test this in the console via the breakpoint.

To insert the breakpoint we click on the line that we want to insert it at. Since I'm checking if `dateArr` is indeed equal to an array with both the date and hour as elements within.

As you can see our array has the correct elements split right where we wanted it to be. Not only can you see the split down in the console, you can also see the result right on line 20 next to our code!

**Tip**: *If you insert the breakpoint on a line in which your function declares a data point your console will not see it.* That's because it stops right at the beginning of the line not after the line is done.

We can continue to develop on the console, allowing us to see in action what are the results in real time. However, you will need to copy your work over to VS code to save it. Also the console doesn't need you to use `let`, `var`, or `const`. Meaning you'll have to insert those yourself when copying over the code.


**Tip**: You can insert multiple breakpoints, so you can watch as your application goes through your fetches, data manipulation, and more following along the whole time. The way to continue through is using the icon  to go to the next breakpoint you created.