Debugging JavaScript locally in Firefox with WebStorm and PhpStorm

From IntelliJ-Wiki

Jump to: navigation, search

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):

Image 1. Welcome Screen.

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.

Image 2. Create New Project: specifying project name and location.

When you click OK, WebStorm opens the new project. As you can see (Image 3), it is just an empty folder:

Image 3. New empty project.

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:

Image 4. Creating the starting HTML page of the application.

WebStorm generates a stub file with some initial contents and opens it in the editor (Image 5).

Image 5. New file numbers.html created and opened in the editor.

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):

Image 6. Code completion, step 1.
Image 7. Code completion, step 2.
Image 8. Code completion, step 3.

When ready, pay attention to the highlighted file name numbers.js and an error message in the tool-tip (Image 9):

Image 9. Unresolved reference.

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.

Image 10. Create missing file.

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/>");
 }
Image 11. File numbers.js.

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):

Image 12. Breakpoints in JavaScript set.

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):

Image 13. Launching a debugging session.

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):

Image 14. Installing an extension to Firefox.

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):

Image 15. Default Local JavaScript Debug configuration created.

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):

Image 16. Debug tool window.

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:

Image 17. The first breakpoint in numbers.js reached.

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):

Image 18. Intermediate result of script execution.

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):

Image 19. Final script execution output.

That’s it with the local debugging.

See also

Personal tools