Debugging Angular app
In this section, you will learn how to debug an Angular app using browsers such as Firefox and Chrome and tools such as Augury. Augury is a Google Chrome extension which can be used for debugging Angular apps.
Debugging Angular app using Firefox and Chrome
The following steps need to be taken to debug an app using Firefox:
- Use Ctrl + Shift + I to open the Firefox Developer Tools window. The following screenshot represents the same:
Figure 8. Debugging an Angular app using Firefox
- Click on
Debugger
to open the code section vis-a-vis the related file in which the code resides. - Open up the file where the code which needs to be debugged exists. In the preceding screenshot,
doctor.service.js
is used for debugging data retrieval from the server. - Add one or more breakpoints. The green-colored line in the preceding screenshot represents the breakpoint in the
doctor.service.tjs
file. - Refresh the page, the rendering of which will involve the component/service which needs to be debugged...