Debugging with VSCode

To debug JavaScript or ECMAScript code directly from VSCode, first, we need to install the Debugger for Chrome extension (https://goo.gl/QpXWGM).

Next, open the Web Server for Chrome extension and open the link to see the book examples in the browser (the default URL is http://127.0.0.1:8887/examples).

The following screenshot demonstrates how to debug directly from the editor:

1. In the editor, open the JavaScript file you want to debug, pass the mouse pointer near the line numbers, and click on the line to add a breakpoint (as demonstrated by 1 in the preceding screenshot). This is where the debugger will stop so we can analyze the code.
2. Once the Web Server is up and running, click on the Debug view (2), select Chrome (3), and click on the Play icon to initiate the debugging process.
3. Chrome will be opened automatically. Navigate to the desired example to evoke the code we want to debug. Once the line we added the breakpoint to is reached by the debugger, the process will stop and the editor will receive the focus.
4. We can control how the code is debugged using the top toolbar (4). We can resume the process, go to a method call, go to the next line, and restart and stop the process. It is the same behavior we have in the debugger in Chrome and other browsers.
5. The advantage of using this built-in debug functionality is that we can do everything from the editor (coding, debugging, and testing). And we also have the variables declared and call stack, we can watch variables and expressions (5), hover the mouse over a variable to see its current value (6), and see the console output as well (7).

The source code of this book was developed using Visual Studio Code and the code bundle also contains configured launch tasks so you can debug the code and the tests directly from the VSCode (all details are in the .vscode/launch.json file). All extensions recommended to run the source code from this book are also listed in the .vscode/extensions.json file.