Optimizing Chrome Dev Tools

For the side-by-side development with live-reloading to work well, you need to optimize the default dev tools experience.

Optimized Chrome Developer Tools

Looking at the preceding figure, you will note that numerous settings and information radiators are highlighted:

1. Have the Network tab open by default so that you can see network traffic flowing.
2. Open the dev tools settings by clicking on the   button.
3. Click on the right-hand side icon so that dev tools dock on the right-hand side of Chrome. This layout gives more vertical space, so you can see more network traffic and console events at once. As a side benefit, the left-hand side takes the rough size and shape of a mobile device.
4. Toggle on large request rows and toggle off overview to see more of the URL and parameters for each request and gain more vertical space.
5. Check the option to Disable cache, which will force reload every resource when you refresh a page while the dev tools are open. This prevents bizarre caching errors from ruining your day.
6. You will mostly be interested in seeing XHR calls to various APIs, so click on XHR to filter results.
7. Note that you can glance the number of console errors in the upper-right corner as 12. The ideal number of console errors should be 0 at all times.
8. Note that the top item in the request row is indicating that there's an error with status code 404 Not Found.

1. Since we are debugging an Angular application, the Augury extension has been loaded. I will cover this tool in more detail in Chapter 7, Create a Router-First Line-of-Business App, when you will be building a far more complicated app.

With your optimized dev tools environment, you can now effectively troubleshoot and resolve the application error from earlier.