Breakpoints: Not just for nerds! 🤓
Tags: ux, debugging, javascript, tutorial
Published: 2020-11-13 20:37:18

It's common to use `console.log` in your code as a quick way to 'debug' and determine the value of a variable, or where and if a function is being called. It's straightforward and works the same way in every browser. It almost seems like a waste of time to use anything else. BUT, once you learn to use breakpoints and have an idea of what they can do, the `console.log`'s **_will be like acid in your eyes_**.

![Radioactive Man hit with acid](https://dev-to-uploads.s3.amazonaws.com/i/8k8zsjfb5ga9wuh3l9ka.jpg)

I want to keep this short, so here's a link to a live example so you can follow along: [sesamechicken.github.io/react-startup](https://sesamechicken.github.io/react-startup/), and the [repo for it here](https://github.com/sesamechicken/react-startup). I'm using Chrome for this, but you can use the browser of your choice.

Our test code is a simple React app which shows 2 components - one that displays some witty text, and another connected component that will allow you to add items to your grandma's shopping list.

Since you already `console.log`, you know how to open the devtools, so let's do that now. Once open,  use `cmd + p` to open the command palette so we can find the file we want to work with. In this case, we're using 'connected_component'.

![The connected_component file in the source pane](https://dev-to-uploads.s3.amazonaws.com/i/f9bc7vdbdn76tm97jwga.png)

So, let's look around for just a sec. There are two functions that actually *do* things for us. `onKeyUp` and `addListItem`.

```js
 onKeyUp = (e) => {
    const { value } = e.target;
    e.persist();
    this.setState({ inputValue: value });

    // A little overboard; I'm looking for the ENTER key
    if (e.keyCode === 13) {
      this.addListItem();
      e.target.value = '';
    }
  }

  addListItem = () => {
    const { inputValue } = this.state;
    const { addToList } = this.props;

    addToList(inputValue);
    this.setState({ inputValue: '' });
  }
```

In console-land, to see if our `onKeyUp` method is firing properly and that we're getting the value we expect, we might do a little something like this:

```js
onKeyUp = (e) => {
    const { value } = e.target;
    
    // We just added this
    console.log(`I fired! The value is ${value}`); 

    e.persist();
    this.setState({ inputValue: value });

    ...
```
This seems reasonable. In fact, it is. *But*, we can get the same info by not touching the code, and not waiting for a rebuild/re-render. Let's take a look...

## Attain the same info by not touching the code, and not waiting for a rebuild/re-render.

![Adding the breakpoint in the devtools](https://dev-to-uploads.s3.amazonaws.com/i/npfqj2urduy8e4gisz3i.gif)

### Breakpoint (line-of-code)
To add a breakpoint, we click in the margin next to the line we want to 'break' on, or, _pause script execution_. When we type into the text input, the function fires and the browser halts at our breakpoint! Not only does it stop, but it provides us with all the information it has up until that moment. As you can see, we can see the value we're pulling off of `e.target`, and, we can see the entire event passed to the method!

This is the most basic breakpoint we can add and it covers _most_ use cases for `console.log`. We have the info we wanted, we didn't touch the code, we didn't have to reload the page, and our tools didn't have to rebuild or re-bundle anything. 😀

Once a breakpoint is reached, we need to instruct the browser to move on and continue script execution. We do this by clicking the Resume button in the dev tools or in the viewport.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/01d0otqdt27vkplj1cj6.png) or
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jjya82vsu9254cf27oi9.png)

### Logpoint
Let's look at another type of breakpoint: **logpoint**
The `logpoint` does exactly what you might think: it allows you to log any value you wish from the position you place it in the code into the console. Let's try it out.

This time, let's play with the `addListItem` method and select 'Add logpoint' on line #30. You'll notice a couple things that are different about this type of breakpoint. The first is that you can specify what to log out. The second is that the execution of the code won't stop when the browser reaches this breakpoint. Try adding 'value is: ' + this.state.inputValue. Now switch over to the console and add some items to your grandma's list.

![Logpoint](https://dev-to-uploads.s3.amazonaws.com/i/eqa2mh4vn77b015mszir.png)

### Conditional Breakpoint
Building off of the last example, right click on your logpoint, and select 'Edit breakpoint.' Change the type from 'Logpoint' (via the dropdown above your text to log) to 'Conditional breakpoint' and enter the value: `this.state.inputValue === 'oranges'`. Now, when you add items to the list, this breakpoint will watch the value. If it strictly equals 'oranges', it will stop and pause execution.



There are other breakpoint types available to you, including:
* fetch/XHR
* function
* DOM change/update
* event listener
* maybe more

If you made it this far, I'd like to thank you for reading through my first technical post. I hope you learned something useful. Breakpoints are awesome when you know how to use them and how easy they are (plus you can debug a site that's in prod and not running locally!). If you have any advice or suggestions on how I may improve my writing or if this helped, please drop a note below!

Keep coding! 🤠

More reading:
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints