Redux DevTools needs a bit of setup to be used in Dev environments but once setup, it is well worth the effort. Check out this blog to find out about how to use it in Production. It is recommended that the full-featured version be used for development and the restricted one for production.

json and async pipes

If you have a JSON object that you would like to print the value on the page for debugging purposes, you can use the json pipe with the JSON object.

If you have the JSON object as an observable, you can chain the json pipe along with the async pipe — | async | json.

More information on pipes is available here.

Call Stack

Chrome dev tools shows the current Call Stack, which gives us information about the stack of function calls indicating what triggered the execution of the function that is being executed. Quite a few of these would be from Angular libraries but you can identify the ones that relate to your code. This will also show the HTML part of the application that triggered the function call. You can also right-click a particular frame and restart it and it will restart the execution from that frame.

Network throttling

There are issues which could be caused due to slow networks, especially if there are async operations happening in the application. Sometimes our end users are on slow networks, and if development and testing is done on faster networks some bugs are hard to find. This could be annoying especially when you do not know that slow network is the cause of it. In these cases, we could add a custom speed for the network with low kb/s and try to reproduce them. The same technique can be used to throttle your CPU, simulating the experience your members will have when using slow / older phones.

Conditional breakpoints

You can also use breakpoints on Chrome Dev Tools instead of debugger statement and avoid waiting for the application to compile and refresh for the debugger statement to apply. It is also easy to enable and disable the breakpoints individually.

You can add a conditional breakpoint by right clicking on the line number in the source file. This will only get triggered when the specified condition is satisfied.

You could add a conditional breakpoint with a consoe.log() statement. Since the console.log() statement returns undefined, it will never actually stop the debugger at that point, but will still give you console output for debugging.

If you want to find a source file in the Sources tab in Chrome dev tools, you can hit Cmd (Ctrl) + P and type in the file name.

Local storage

If you are using local storage to store the state of your application, you could use the Application tab to inspect the state of local storage.

You can clear the data in local storage for your application by right-clicking on the app under Local storage and choosing to clear.

You can set, get or remove an item from local storage by doing localStorage.setItem(‘<key>’), localStorage.getItem(‘<key>’) & localStorage.removeItem(‘<key>’) respectively on the console window.

You can also edit or delete the values in local storage by double-clicking a key or value.

console objects

Like debugging any other application, console objects can be used in Angular applications too. There are different ways of using console with different levels of information.

This come in handy when you are debugging a bug that only happens in test environments.

Pro tip: console.warn() and console.error() will also print the call stack long with the warning/error.

debugger;

debugger; statement, like console objects, can be used in Angular applications as well. Having a debugger statement when the chrome dev tools is enabled, causes the application to break at a point where you placed the debugger statement.