Debugging JavaScript with IntelliJ IDEA

From IntelliJ-Wiki

Jump to: navigation, search

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

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:

File:Create_numbers_file.png

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:

File:Code_completion_in_numbers.png

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.

File:Create_missing_file.png

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:

File:Breakpoints_in_numbers.png

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:

File:extention_warning.png

After launching the debugger, Firefox will inform you that the extension has been installed:

File:Extention_installed.png

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:

File:Start_local_debugging.png

Examining the debugging information

When the debugging session is launched, your HTML page appears in the browser, and the Debug tool window opens:

File:Debug_tool_window.png

Your program execution suspends when the first breakpoint is hit. Such a breakpoint is marked with a blue stripe:

File:Blue_stripe_in_numbers.png

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:

File:Local_debugging_result.png

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:

File:Edit_configuration.png

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:

File:RunDebugConfigurationTomcat.png

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 :

File:RunApplicationOnServer.png

The Run tool window shows Tomcat information. You are connected to the server, and your Simple page opens in the browser, predictably displaying numbers.

File:RunToolWindow.png

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.

File:DebugToolWindowTitle.png

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:

File:JavaScriptDebugRunConfiguration.png

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:

File:DebugToolWindowScriptsTab.png

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:

File:RemoteDebuggingResults.png

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:

File:RemoteApplication.png

See also

Personal tools