Debugging JavaScript in MyEclipse

This tutorial introduces the basics of debugging your web applications in MyEclipse.  You can debug JavaScript, (X)HTML, JSP and Node.js files. In this tutorial, you will learn how to:

  • Start the JavaScript debugger
  • Use breakpoints in the debugger
  • Use Variables and Expressions in the debugger
  • Control the debugger execution
  • Use the Loaded JavaScript view

Duration Time: 30 Minutes

Start Tutorial Now

Don't have MyEclipse? Download Now

Note:  This tutorial covers the JavaScript Debugger introduced in MyEclipse 2015 CI 14. For a tutorial on earlier versions, click here.

1. Start the JavaScript Debugger

You can debug both generic web applications and Node.js files.  You also have the ability to modify the debug configurations to meet your specific requirements. The first time the debugger encounters a breakpoint, you are asked to switch to the Debug perspective. Select Remember my decision to avoid this message in the future, and then click Yes. 

Debugperspecitvecalloutsme
The Debug Perspective includes the views you need to effectively debug your code

1.1 Debug a Generic Web Application

To debug a generic web application, you must have Google Chrome installed. When you start the debugger, Google Chrome opens automatically. There are multiple ways to start the debugger.

From the MyEclipse Explorer—Right-click on the web project or enterprise application project (EAR) and select Debug As>JavaScript in JavaEE Web Application; or, select the project and click  debugicon2 (select JavaScript in JavaEE Web Application and click OK if the project is not deployed).

From the Server View—After the project has been deployed to the server, right-click on the project in the Servers view and select Launch JavaScript Debug Session or select the project and click  debugicon2.

From Debug Configurations—Select Debug Configurations from the Run menu. Select your project from the JavaScript in Web Application folder and click Debug.  

1.2 Debug a Node.js Application

To debug Node.js applications, you must have Node.js installed. There are multiple ways to start the debugger.

From the MyEclipse Explorer—Right-click on the JavaScript file and select Debug as>Standalone Node.js Application; or, select the JavaScript file and click  debugicon2.

From the Server View—After the project has been deployed to the server, right-click on the project in the Servers view and select Launch JavaScript Debug Session or select the project and click  debugicon2

From Debug Configurations—Select Debug Configurations from the Run menu. Select your project from the Standalone JavaScript Application folder and click Debug.  

1.3 Edit Debug Configurations

The first time you debug your application, the debug configuration is automatically created with the default settings. To view the configuration, select Debug Configurations from the Run menu; or, right-click on the generic project in the MyEclipse Explorer or JavaScript file in Node.js applications and select Debug As>Debug Configurations . Your project displays in the appropriate folder: JavaScript in Web Application for generic web applications or Standalone JavaScript Application for Node.js applications.

You can edit an existing configuration or right-click on the folder and select New to create a new configuration.  

Tip:  If you do not select a Server, you can debug a web application that is deployed on a remote server.

 

2. Use Breakpoints in the Debugger

When a breakpoint is encountered, execution is suspended and the Debug perspective is displayed. From the Debug perspective, you can view the code in the editor, the suspended thread in the stack frame, the console output, variables and breakpoints associated with the frame, and the loaded JavaScript files.

debugbreakpointswcoME
Use breakpoints to interrupt the execution of your code and locate bugs

2.1 Add a Breakpoint

From the line of code in the source editor, right-click on the marker bar in the left margin and select Toggle Breakpoint.  Or, double-click from the left margin to toggle the breakpoint on. The breakpoint is represented by a blue circle breakpointcircle in the marker bar and the breakpoint is added to the Breakpoints view.

2.2 Remove a Breakpoint

When you no longer need a breakpoint, you can remove it. Remove breakpoints from the source editor or the Breakpoints view. When your remove a breakpoint, the icon is removed from the marker bar and the breakpoint no longer appears in the Breakpoints view.

From the Source Editor—Access the line of code with a breakpoint in the source editor, right-click on the marker bar in the left margin and select Toggle Breakpoint. Or, double-click from the left margin to toggle an active breakpoint off. 

From the Breakpoints View—You can also delete a breakpoint from the Breakpoints view.  Select the breakpoint, right-click and select Remove; or, click the Remove button Removeicon.  
Tip: Select Remove All to delete all breakpoints in the Breakpoints view or click the Remove All button RemoveAllIcon.

2.3 Disable a Breakpoint

When you need to ignore a breakpoint but want to use it in the future, disable the breakpoint instead of removing it. You can disable a breakpoint from the source editor or the Breakpoints view. A disabled breakpoint is represented by a hollow circle DisabledBreakpoint.

From the Source Editor—Access the line of code with a breakpoint in the source editor, right-click on the marker bar in the left margin and select Disable Breakpoints.

From the Breakpoints View—Clear the check box to the left of the breakpoint or right-click on the breakpoint and select Disable.

2.4 Enable a Breakpoint

When you want to reinstate a previously disabled breakpoint, you can do it from the source editor or the Breakpoints view. When you enable a breakpoint, a blue circle breakpointcircle replaces the hollow circle in the marker bar.

From the Source Editor—Access the line of code with a disabled breakpoint in the source editor, right-click on the marker bar in the left margin and select Enable Breakpoints. 

From the Breakpoints View—Select the check box to the left of the breakpoint or right-click on the breakpoint and select Enable.

2.5 Apply a Hit Count to a Breakpoint

You can edit the properties of a breakpoint to include a hit count that suspends the execution of a thread after it is hit a specified number of times.  At that point the breakpoint is disabled until it is enabled again or the hit count is modified. 

From the Source Editor

  1. From the line of code, right-click on the marker bar in the left margin and select Breakpoint Properties.
  2. Select the Hit count check box.
  3. Enter a number.
  4. Click OK.


From the Breakpoints View

  1. Select the breakpoint.
  2. Select Hit Count in the bottom of the view.
  3. Enter a number.

2.6 Create a Conditional Breakpoint

Use conditional breakpoints to suspend execution of a thread when an expression is true or the result changes. When you create a conditional breakpoint, a question mark is added to the icon in the marker bar Conditionalbreakpoint

From the Source Editor

  1. From the line of code, right-click on the marker bar in the left margin and select Breakpoint Properties.
  2. Select the Conditional check box.
  3.  Select to suspend the execution when true or when the value changes.
  4. Type the expression in JavaScript in the box.
  5. Click OK.
  6. Click on the breakpoint or press Ctrl+S to save your changes.


From the Breakpoints View

  1. Select the breakpoint.
  2. Select Conditional in the bottom of the view.
  3. Select to suspend the execution when true or when the value changes.
  4.  Type the expression in JavaScript in the box at the bottom of the view.
  5. Click on the breakpoint or press Ctrl+S to save your changes.


3. Use Variables and Expressions

Use the Variables and Expressions views in the JavaScript Debugger when you hit a breakpoint.  Examine the values in your variables and expressions to locate problems with your code. You can also add expressions for experimenting. 

3.1 Variables View

The Variables view of the Debug perspective allows you to view a list of variables and their values.  The local variables associated with the current stack frame display, in addition to global variables.

Tip: Hover over a variable in the source code editor to display the value of the variable.

VariablesView
Use the Variables view to see local and global variables

3.2 Expressions View

The expressions associated with the current stack frame display in the Expressions View of the Debug perspective. The value of the expression displays in the Value column. Click Add new expression to add a new expression.

Tip:  If this view is not included in your Debug perspective, select Windows>Show View>Expressions.

ExpressionsView
Use the Expressions view to add expressions when debugging your code

 

4. Control JavaScript Debugger Execution

After a breakpoint is hit, use the following commands to step through the execution of the code and locate any errors.  

Command

Button

Details

Step over (F6)stepovericonThe current line is executed and execution suspends on the next executable line.
Step into (F5)stepintoiconThe next executable expression on the current line is invoked and execution suspends at the next executable line in the method that is invoked.
Step Return (F7)stepreturniconExecution resumes until the next return statement in the current method is executed and execution suspends on the next executable line.
Suspendsuspend iconSuspends the selected thread.
ResumeresumeiconResumes a suspended thread.
Drop to FramedroptoframeiconEnters the selected stack frame.
Skip All BreakpointsskipalliconMarks all breakpoints in the current view as skipped.  

 

5. Use the Loaded JavaScript View

The Loaded JavaScript view shows all scripts currently loaded in the browser. You can view the information as the Plain Look or Tree Look.  If a line in the script exceeds 4000 characters, the line is truncated when viewing in the source editor. When viewing HTML files, only the JavaScript displays.  HTML code is replaced with  /*non JS */. 

If you do not see the Loaded JavaScript view, select Window>Show View>Other>MyEclipse Common>Loaded JavaScript.

LoadedJS
Use the Loaded JavaScript view to see a list of all JavaScript in your browser