Knowing how to program with JavaScript is important, but so is knowing how to debug your code. Debugging is very useful in helping you find bugs in your code, but it can also help you execute your code at a lower speed so that you can see everything that is happening (the stack of methods called, variable assignment, and so on). It is highly recommended that you spend some time debugging the source code of this book to see every step of the algorithm (it might help you understand it better as well).
Firefox, Safari, Edge, and Chrome support debugging. A great tutorial from Google that shows you how to use Google Developer Tools to debug JavaScript can be found at https://developer.chrome.com/devtools/docs/javascript-debugging.
You can use any text editor of your preference. However, there are other great tools that can help you be more productive when working with JavaScript as well, which are listed as follows:
- WebStorm: This is a very powerful JavaScript IDE with support for the latest web technologies and frameworks. It is a paid IDE, but you can download a 30- day trial version (http://www.jetbrains.com/webstorm).
- Sublime Text: This is a lightweight text editor and you can customize it by installing plugins. You can buy the license to support the development team, but you can also use it for free (the trial version does not expire) at http://www.sublimetext.com.
- Atom: This is also a free text editor created by GitHub. It has great support for JavaScript and it can also be customized by installing plugins (https://atom.io).
- Visual Studio Code: This is a free and open source code editor created by Microsoft, written with TypeScript. It has JavaScript autocomplete functionality with IntelliSense and provides built-in debug capability directly from the editor. It can also be customized by installing plugins (https://code.visualstudio.com).
All of the aforementioned editors are available for Windows, Linux, and Mac OS.
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:
- 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
1in the preceding screenshot). This is where the debugger will stop so we can analyze the code. - Once the Web Server is up and running, click on the Debug view (
2), selectChrome(3), and click on the Play icon to initiate the debugging process. - 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.
- 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. - 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.