Debugging Angular Components in MyEclipse
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.
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.
Click Log-in (no need to enter any credentials).
Select the Component page.
Scroll to the bottom and observe the Asynchronous results section.
Type in “Co” to see several states being proposed.
Open the src/app/dashboard/bs-component/bsComponent.component.ts file and place a breakpoint on line #150:
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.
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.
Alternatively, you can also hover over those variables in the source to see their current values.
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.