facebook
  1. Genuitec Learning Center
    2.  > 
  2. Debugger

Debugging Angular Components in MyEclipse

Instead of using multiple console.log statements to locate a problem in your Angular app, use our debugger. Debug across different types of files including HTML, JavaScript and even TypeScript.

This page details the debugger in MyEclipse.

Note: You can also use the CodeMix plugin for creating and debugging Angular apps. CodeMix is compatible with MyEclipse 2017 and higher and works with existing Professional or higher licenses. Refer to Debugging in CodeMix for more information. 

Getting Started

As an example, we’ll use the template available in the New Angular Project wizard. If you don’t already have this project, create a new project and select the Use template checkbox from the New Angular Project wizard. For more details on the template project, refer to Working with the Angular Example Application.

Starting the Debug Session

To start the debug session, right-click the project and select Debug As>Angular Web Application.

Or, you can also start the debug session from the Servers view. After you start the Angular CLI server, right-click on the project and select Debug application in Chrome. 

Debugging the Example App

Now that you have your app running in debug mode, let’s debug an Angular component.

  1. Click Log-in (no need to enter any credentials).

  2. Select the Component page.

  3. Scroll to the bottom and observe the Asynchronous results section.

  4. Type in “Co” to see several states being proposed.

    asynchronousresults

  5. Open the src/app/dashboard/bs-component/bsComponent.component.ts file and place a breakpoint on line #150: return query.test(state.name);

  6. Go back to your browser and start typing in the asynch filed. You’ll find that you can only type a single character because execution in the browser has been stopped at the breakpoint you set.

  7. If you get back into the IDE now, you can see the breakpoint on line #150 hit, and code execution paused. If you look at the Variables view, you can see that token is set to what you’ve typed into the text field, and state.name is probably the first state in the statesComplex array, Alabama.

    debugviewvalue

    Alternatively, you can also hover over those variables in the source to see their current values.

  8. You can proceed with debugging by using the Step Over, Step Into, or Step Return capabilities or even Drop-to-frame and Resume.

Changing Code During a Debug Session

If you noticed, typing “Co” into the text field proposed several states with the string “co” within them. Say we want to change this behavior to propose only states that start with “Co”. To achieve this, on line #146, let’s change

let query = new RegExp(token, 'i');

to the following code:

let query = new RegExp("^" + token, 'i');

Save the file. Notice that in the Terminal+ view, the bundle is found to be INVALID and is rebuilt—the output you see is similar to what you noticed when the app was first deployed. Live Preview automatically reloads the page and if you type “Co” now, you see the new behavior with only Colorado and Connecticut being proposed.