Debugging JavaScript locally in Firefox with WebStorm and PhpStorm
From IntelliJ-Wiki
The possibility to debug JavaScript is vital for Web developers. With WebStorm and PHPStorm, such debugging becomes quite easy. To illustrate the JavaScript debugging capabilities, we’ll create a Web application and debug it locally. The application will be quite simple and contain a starting HTML page and a very basic script that just makes some calculation, whereupon the resulting figures are displayed in the browser.
Contents |
Prerequisites
- You are working with WebStorm or PhpStorm, version 2.1 or higher. JavaScript support in WebStorm and PHPStorm is identical. Although this tutorial uses WebStorm, you can successfully repeat all the described steps in PHPStorm.
Note: JavaScript debugging is also available in IntelliJ IDEA and RubyMine, version 2.5 or higher.
- The JetBrains Firefox extension that supports JavaScript debugging from WebStorm and PhpStorm. The extension will be installed automatically when you initiate a JavaScript debugging session for the first time.
- No specific JS libraries are required. You are welcome to use any JS libraries you need.
Preparing contents for local debugging
Creating a project
First of all, let's create a WebStorm project to develop our application in.
Launch WebStorm and choose Create New Project on the Welcome screen (Image 1):
In the Create New Project dialog box that opens (Image 2), give a name to the new project (1) and specify the project folder (2). Type the path to the project location manually or click the Browse button (3) and choose the relevant folder in the dialog box, that opens. In our example, the project name is numbers and it is located in the C:\MY_PROJECTS\JAVA_SCRIPT_PROJECTS parent folder.
When you click OK, WebStorm opens the new project. As you can see (Image 3), it is just an empty folder:
Developing application sources
Our application will consist of a starting HTML page that will open every time the application is launched and a JavaScript that implements the application functionality.
First, let’s create a file that will implement the application starting HTML page. With the Project tool window having the focus (Image 4), press Alt+Insert, choose HTML/XHTML file (1) on the pop-up menu, and type a file name (2), say, numbers:
WebStorm generates a stub file with some initial contents and opens it in the editor (Image 5).
Now we need to expand the stub with reference to the JavaScript file that will implement the functionality of our application. Right, we do not have such JavaScript file yet but WebStorm will generate it for us. Let's embed the following reference inside the <body></body> tag:
<script type="text/javascript" src="numbers.js" language="JavaScript"></script>
Note that code completion Ctrl+Space is available while typing the code (Images 6 - 8):
When ready, pay attention to the highlighted file name numbers.js and an error message in the tool-tip (Image 9):
The reference cannot be resolved because such JavaScript file does not exist. WebStorm can fix this problem through a special functionality called quick fix (Image 10). To invoke it, place the caret at the numbers.js name and press Alt+Enter or click the yellow bulb (1).
Then choose Create file numbers.js (2) on the context menu.
WebStorm creates a stub JavaScript file numbers.js and opens it in the editor (Image 11). Next, expand the stub with the following code:
var i=0;
for (i=0;i<=10;i++)
{if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br/>");
}
Setting breakpoints
Now let’s set breakpoints to our JavaScript. This is most easy – just click the left gutter at the line you want the script to suspend (Image 12):
Starting the debugging session
Now that all the preliminary steps are done, it’s time to proceed with the debugging session itself.
To start it, just right-click the background of the file numbers.html, and choose Debug on the context menu (Image 13):
If you are launching the debugger for the very first time, WebStorm will install an extension that enables JavaScript debugging in Firefox and notify you about it (Image 14):
After launching the debugger, Firefox will inform you that the extension has been installed.
Note: adding the JetBrains extension results in adding the Debug in WebStorm command to the context menu of the pages in Firefox.
WebStorm starts the debugging session.
Note: If you now open the Run/Debug Configurations dialog box (Image 15) by pressing Run | Edit Configurations, you will see that WebStorm has created a default JavaScript Debug debug configuration (1), named after the current HTML file – Numbers.html (2):
Examining the debugging information
When the debugging session is launched, the starting HTML page appears in the browser although since it is in debug mode it will hit the first breakpoint before anything is drawn to screen, and the Debug tool window (Image 16) opens in WebStorm (if it does not, then select the "Debug" tab in the bottom tool window, or just press ALT-5):
As soon as the first breakpoint is hit, the program execution suspends. The focus in the WebStorm editor switches to the file numbers.js,
where the cursor positioned at the beginning of the line with the breakpoint hit (Image 17). The line is marked with a blue stripe in the background:
Let’s now step through the script. Actually, you can use the stepping buttons on the toolbar of the Debug tool window (Image 16), but since you are working in a keyboard-centric IDE, use the handy shortcuts, depending on your debugging algorithm. For example, you can press F7 to step to the next line or F9 to resume the program and have it work automatically till the next breakpoint is hit.
As you step through your application, the corresponding information appears in the Debug tool window,
and the numbers.html page displays the script output step by step (Image 18):
Finally, when the program execution is completed (Image 19), the debugging session data is cleared (1) and the numbers.html page displays the entire script output (2):
That’s it with the local debugging.
