Debugging in the Browser
Tags: javascript, codenewbie, webdev, tutorial
Published: 2021-01-31 22:30:32

{% youtube yEvPB41UI7Y %}
---
Debugging is the process of finding or fixing errors (bugs) within a script.

Browsers contain debugging tools for developers to debug or trace code step by step.

Before following the steps below, hit `Ctrl` + `Shift` + `N` to open an **incognito window** on chrome browser.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g7ibd9ok389k7e3i06z8.jpg)

Below are the steps to debug or understand codes in a script:

1.) To open a console terminal, enter `F12` or `Ctrl` + `Shift` + `J`.

2.) Open the sources navbar and do the following:

- Click the `Sources` navigator tab.
- Click the `+ New snippet` button and rename the file `myScript.js`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rh1qqqmj0xhbkuv67pgb.jpg)


3.) Edit the file with the code below:

```js
function add(num1, num2) {
    return num1 + num2;
}

function mult(num1, num2) {
    return num1 * num2;
}

function calculator(num1, num2, operator) {
    return operator(num1, num2);
}

function output() {
    console.log(calculator(3, 5, add));
    console.log(calculator(3, 5, mult));
}

output();
```
 
- Click on line 1 or line 2, not the code to specify where the **breakpoint** should start or resume debugging. You can have as many breakpoints in a script.

---

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/728x90/728x90BW.png"> </a>

---

> A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution to examine current variables, scope, execute commands in the console, etc.

- Click the `Breakpoint` panel to the right and examine the list of breakpoints. In the example, only one breakpoint was applied. Maybe apply another breakpoint to line 5.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/epe5hwvh4c3tu70y0q61.jpg)

4.) If the console is not open, enter `ESC` and navigate to the Console nav tab.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qta9z1zoj6p2b5y2570k.jpg)

5.) Click the `Run` button at the bottom right or hit `Ctrl` + `Enter` to run the script. Also, enter `F10` till you are satisfied. If you want to stop the debugger mode at any time, enter function `F8`. 

6.) Keep entering `F10` till the debugger stops or returns `undefined` in the console.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sj5wi51m0ax3h1nfjoc2.jpg)

### Debugger Statement
An alternative approach is to use the `debugger` command start instead of clicking line numbers. 

In the example, only one debugger statement was applied. Maybe apply another debugger statement to line 6.

In the example below, the debugger starts at line 2. Here breakpoints are not applied.

```js
function add(num1, num2) {
    debugger;
    return num1 + num2;
}

function mult(num1, num2) {
    // debugger;
    return num1 * num2;
}

function calculator(num1, num2, operator) {
    return operator(num1, num2);
}

function output() {
    console.log(calculator(3, 5, add));
    console.log(calculator(3, 5, mult));
}

output();
```

Hint: If you quickly want to show current values for any expressions during debugging, click the watch panel to open it and click the `+` sign to edit with relevant code.

```js
calculator(4, 6, mult)
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/82czoc6dlpwij79dcf9z.PNG)

**Happy coding!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---

### TechStack Media | Western Union
- Receive a $20 *Amazon.com e-gift code* for free when you register
- Connect your bank account to western Union to receive or send money anywhere in the world.

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q5ttzp05ub9u9kyfvj5i.png)](http://ssqt.co/mQh8ane)