00:00 Being able to print the state of the DOM in tests is really powerful, but you know what else is powerful? Stopping JavaScript execution altogether, taking a look around, and stepping through the code. In JavaScript, you can do that using a debugger statement. So here I have a compute function that consists of two steps, and then a debugger statement in between. So when this

00:18 function runs, it will do the first step, and then meet the debugger statement, and the execution will stop. The debugger itself inserts a breakpoint, basically an instruction for JavaScript Engine to stop running, and allowing you to inspect the state of the code. You're able to see the values in the current moment of time, and also step through the execution, basically resume the

00:37 execution or jump to the next breakpoint, if any. And it works the same whether you're debugging Node.js tests in Vitas or browser tests, but there is just one catch when it comes to the browser tests. Because your tests run in the browser, the debugger statement will also run there. So the browser execution will stop, and you'll be able to debug it, but your test and your source files

00:56 still live in your IDE. It would be really nice if you could make the two talk to each other, basically connect them. You can do that by configuring your IDE, and in this exercise, we will go through the configuration for Visual Studio Code. So let's do it together. First, make sure that at the root of your application, you have a folder called .vscode, and inside this folder, a special

01:16 file called launch.json. You can copy the content of this file from the description of this exercise. If this file looks intimidating to you, don't worry, we're going to go through what it does step by step. The purpose of this file is to configure VS Code so it can run and debug certain things, in our case, browser tests. And we do that by listing two configurations, the first one to

01:36 run Vitas browser mode, and the second to attach a debugger instance to the running browser process. Let's go through them in more detail. So the first configuration spawns a terminal that launches a command, and in this case, it's our npm test script. It's the same script we use to run tests, but for this debug process, we need to add a few special options to it. Let's go through them. So the first

01:55 one is inspect break, or BRK. This flag tells Vitas to automatically insert the debugger statement whenever you render a component in your test. This is just a good quality of life improvement, and it's nice to have it here. The dash dash browser option tells Vitas to run only browser tests. This is

02:11 handy if you have multi-test setups. And finally, the no file parallelism option disables parallel test runs, so we have predictable and reliable debugging experience in the browser. And finally, this configuration sets an environment variable called debug to the value of true. And I use this

02:27 variable in the Vitas configuration to conditionally trigger headless mode in the browser. Basically, whenever I'm debugging my browser tests, I want for this automation window, the browser to appear, so I'm able to see what's going on. And now the last thing I haven't covered is the special input

02:42 token. Without it, we will run all browser tests, and this may not be what we want. So instead, I'm using a special extension for VS Code called common variable that allows me to create a custom picker for files that I want to debug. I describe it here in the inputs, give it an ID, and this way

03:00 I'm able to pick a test suite that matches the pattern. And I can pick multiple test suits if I want to debug multiple things at the same time, which is really handy. Now the second and last configuration here attaches debugger instance to the running browser, and it does that at this specified port, which is the port that Vitas uses to spawn that browser automation. And once we have

03:19 this configuration, we create a compound task called debug Vitas browser that will run both of those configs together. It will run Vitas and attach the debugger. And now to use this launch JSON, you will head to the run and debug panel over here, click on it, and select the correct task

03:35 from this drop down, debug Vitas browser, and click on this play or run icon. Now having this all configured, your task is to debug the same issue from the previous exercise, but now using a debugger statement. And don't forget to run your tests using that run and debug panel using our

03:51 task that we just configured. And once you're done, let's discuss using debuggers and breakpoints in more detail together.