Webclipse

Using Breakpoints in the Debugger

With the Webclipse debugger, you can add breakpoints to your JavaScript and TypeScript code from within Eclipse.  Use breakpoints to interrupt the execution of your code at a particular location that is not functioning as expected, and then use the debugger tools to locate the problem. 

Back to Debugger

Download Webclipse

When a breakpoint is encountered, execution is suspended and Eclipse switches to the Debug perspective. 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.

debugbreakpoints2

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. 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.

 

 

3. Disable a Breakpoint

When you need to ignore a breakpoint but want to use it in the future, you can choose to 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.

 

 

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.

 

 

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. 

5.1 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.

5.2 From the Breakpoints View

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

 

 

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

 

6.1 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.

6.2 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.