Debugging JavaScript with IntelliJ IDEA
From IntelliJ-Wiki
The possibility to debug JavaScript is vital for the web developers. With IDEA-based products, such debugging becomes quite easy. To illustrate the JavaScript debugging capabilities, we’ll create a very basic script that just shows some numbers in a browser page, and then debug it both locally and remotely.
Contents |
Prerequisites
- You are working with IntelliJ IDEA Ultimate Edition version 9.0 or higher. Note that JavaScript debugging is also available in the following IDEA-based products:
The procedure of JavaScript debugging in these products is slightly different. For the purposes of this tutorial, let’s use IntelliJ IDEA.
- JavaScript debugging is available for Firefox and Google Chrome only.
- No specific JS libraries are required. You are welcome to use any JS libraries you need.
- For remote debugging, you will need an application server (in this tutorial Tomcat 6 is used), integrated with IntelliJ IDEA. For details, refer to the tutorial Creating a simple Web application and deploying it to Tomcat.
Local debugging
Preparing contents for local debugging
Launch IntelliJ IDEA and create or open a project. (File | New Project or File | Open Project). First, let’s create a HTML page. To do that, with the Project tool window having the focus, press Alt+Insert, choose HTML/XHTML file on the pop-up menu, and enter the file name:
IntelliJ IDEA generates the stub file with some initial contents. We are going to embed a reference to a JavaScript file:
<script type="text/javascript" src="numbers.js" language="JavaScript"></script>
Note that code completion Ctrl+Space is available while typing the code:
When ready, pay attention to the highlighted file name numbers.js. This is a reference to a non-existent JavaScript file. Place the caret at this name and press Alt+Enter; a quick fix is suggested – create the missing file.
Choose this quick fix, and have the stub JavaScript file ready. Next, enter 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:
Starting the debugging session
All the preliminary steps are done, and it’s time to proceed to the debugging session. To start it, just right-click the background of the file numbers.html, and choose Debug on the context menu. If you launch the debugger for the very first time, IntelliJ IDEA will warn you about installing an extension:
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 IDEA command to the context menu of the pages in Firefox.
Thus the debugging session starts with the default JavaScript Debug - Local run/debug configuration, which is named after the current file – Numbers.html:
Examining the debugging information
When the debugging session is launched, your HTML page appears in the browser, and the Debug tool window opens:
Your program execution suspends when the first breakpoint is hit. Such a breakpoint is marked with a blue stripe:
Let’s now step through the script. Actually, you can use the stepping buttons on the toolbar of the Debug tool window, 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 breakpoint.
As you step through your application, the corresponding information appears in the Debug tool window, and in the Numbers page of your web browser:
That’s it with the local debugging. Next, we’ll debug the same script remotely.
Remote debugging
The main difference from the local debugging lays with the fact that the HTML files and JavaScript files are downloaded from the server, which is launched either by IntelliJ IDEA itself, or by the user. When you debug such scripts, you actually place breakpoints in the JavaScript files that are mapped to the corresponding pages on the server.
Preparing contents for remote debugging
For our purposes, create a simple Web application in IntelliJ IDEA, as described in the tutorial Creating a simple Web application and deploying it to Tomcat.
Then, add the same “show numbers” contents. To do that, follow these steps:
1.In the index.jsp file generated by IntelliJ IDEA automatically, add a reference to a JavaScript file (bold font below):
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>Simple page</title></head> <body> <script type="text/javascript" src="numbers.js"> </script> </body> </html>
2.Use the suggested quick fix to create the JavaScript file numbers.js, and add the same code, as described in the first part of this document.
Creating run/debug configuration for remote debugging
Unlike local debugging, for which the default run/debug configuration is provided, we’ll have to create the one for remote debugging ourselves. This is how it’s done:
Press Alt+Shift+F9, and then press 0 to choose Edit configuration on the pop-up menu:
In the Run/Debug Configurations dialog box, press INSERT, and select Tomcat - Local . In the run/debug configuration page for Tomcat, you can see that Tomcat is already recognized as the application server. Since we want to debug our script, let’s enable the debugger. To do that, in the Open browser section, just select the check box With JavaScript debugger:
Besides this run/debug configuration that launches the server with the JavaScript debugger, IntelliJ IDEA automatically creates a JavaScript Debug remote run configuration.
Starting the debugging session
Now we are ready to deploy our page on the server, and debug it. First, run your application on the server :
The Run tool window shows Tomcat information. You are connected to the server, and your Simple page opens in the browser, predictably displaying numbers.
But! Besides the Run tool window, there is the Debug tool window – remember, we have enabled JavaScript debugging? Let’s switch to this tool window - to do that, just click the Debug toolbar button.
Debugging the script
First, look at the title bar. The Debug tool window tab for the current debugging session is named after the corresponding run/debug configuration – this one is called index.jsp JavaScript.
But look, we did not create this configuration for the remote JavaScript debugging – IntelliJ IDEA did it for us: specified the URL of the page to be opened in browser, and mapped the remote URL to the local directory. Open the Run/Debug Configurations dialog to explore this configuration:
Now, let’s come back to the Debug tool window. It consists of three tabs: Debug, Console, and Script. At the moment, the most interesting for us is the Scripts tab. It shows all scripts currently running in the browser:
Select numbers.js, and press F4. The script page opens in the IntelliJ IDEA’s editor. Let’s place breakpoints to it, as described in the section Setting breakpoints . Switch to the browser, and refresh the page. The first breakpoint is hit:
As you step through the script, using the stepping buttons or keyboard shortcuts, and refresh the page in the browser, the output gets further, until the complete list is displayed:
See also
- For more complicated examples of JavaScript debugging, refer to the Local debugging and Server-side debugging demos.
- Refer to online documentation for IntelliJ IDEA project basics, and related procedures.
- Refer to online documentation for the run/debug configurations basics, and related procedures.
