Understanding the Debugger for JavaScript & TypeScript

Understanding the Debugger for JavaScript & TypeScript

Many developers spend half of their time fixing bugs.  A powerful debugger is critical to produce a quality web application in a timely manner. That is why our debugger is so valuable, making it easy to debug your JavaScript, TypeScript, (X)HTML and JSP files.

Back to Debugger

Download Webclipse

Now you can debug web applications, including Node.js applications, directly from Eclipse using the familiar Eclipse debugger interface. You can debug JavaScript, TypeScript, (X)HTML and JSP files, including web fragments. 

Efficiently Debug Using Advanced Breakpoint Functionality

First-rate debugging begins with the effective use of breakpoints.  Use the debugger to add breakpoints that suspend the execution of your code and allow you to examine the state of your application at that time.  You can examine important clues in your troubleshooting such as the stack trace of each thread, console output, and the values of variables and expressions.

Applying hit counts and conditional breakpoints take this functionality to another level. A hit count allows you to suspend execution after a line of code has been hit a specified number of times. This can be useful when you want to break into a loop after a certain number of iterations.   A conditional breakpoint allows you to suspend execution of a thread only when an expression is true or the result changes.  

Use breakpoints to improve debugging

Easily Navigate the Application

The ability to easily navigate an application during the debug process can be especially important if you are debugging large projects. With the debugger you are in control. You can easily suspend and resume threads and drop to frame to re-enter a stack frame.  You can also use the various Step commands (e.g., Step over, Step into and Step return) to control the execution flow when walking through your code.

Control the debug flow with execution commands

Quickly Locate JavaScript

Use the Loaded JavaScript view to see a list of all scripts loaded in the browser. A list of all files that include a script appear in a single view.

View available scripts from the Loaded JavaScript view


Simplify with Source Maps

With source map support you can debug more complex JavaScript deployments where the JavaScript has been manipulated by processes such as transpilation (e.g., TypeScript or CoffeeScript), minification (e.g., minifyJS or UglifyJS) or bundling (e.g., Browserify). Learn more


Instantly View Changes with Hot-Swap

If you choose to hot-swap JavaScript code to the browser, you can automatically view JavaScript changes directly in the Browser without reloading the page. Use this feature in conjunction with Live Preview to speed up your web development.