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>Server for Angular CLI Project.

Or, you can also start the project in Development Mode from the Servers view.

• This action starts ng serve. Use the Terminal+ view to track this process, ultimately showing you a list of deployed assets.

• Chrome is started and your app is opened (unless you started in Development Mode from the Servers view).

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.
   
   
   
   

5. Open the src/app/dashboard/bs-component/bsComponent.component.ts file and place a breakpoint on line #154: 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 Eclipse now, you can see the breakpoint on line #154 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.
   
   
   
   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 #147, 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. LivePreview automatically reloads the page and if you type “Co” now, you see the new behavior with only Colorado and Connecticut being proposed.