Debugging is perhaps one of the most important features of any IDE. As it turns out, debugging JavaScript code is quite similar to debugging Python code, especially for graphical interface and navigation.
As discussed in the Debugging section in Chapter 6, Seamless Testing, Debugging, and Profiling, there are specific steps to a debugging session in PyCharm. If you want a refresher on the specifics during such a debugging session, give the Debugging section in Chapter 6, Seamless Testing, Debugging, and Profiling, a quick read-through before continuing.
With that said, to debug JavaScript code, you can do the following:
- Place breakpoints at specific stages of the code you'd like to debug. The execution of the program will stop at each breakpoint so that you can examine its current state. Breakpoints are represented as big red dots in the left-hand gutter of the PyCharm editor.
- Find the HTML file that contains the JS script you'd like to debug in the Project panel (the project directory tree, typically on the left-hand side of the window).
- Right-click on the file, and choose Debug 'sample.html', as illustrated here:
- PyCharm will open that HTML file in a web browser, and the Debug panel will appear in your PyCharm window, much like a debugging session with traditional Python code.
With the web browser and various control features in the Debug panel, you can choose to step through your JavaScript code in multiple ways and examine the behavior of the code at each placed breakpoint.