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.
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...