The new release of Chrome for desktop and Android comes with a powerful and easy-to-use native developer toolkit. The Chrome Extension for Angular debugging is a unified interface for debugging, tracing and profiling Angular applications in real time. This tool makes it easier to find Angular performance issues at development time that could be causing slower page loads and user experience issues.

Debugging is a crucial part of web development. It’s the way we find out what’s happening inside our applications and fix bugs as they arise. Debugging AngularJS applications is even more challenging because of the two-way binding nature of AngularJS expressions. In this post, I’ll be going over how to use Chrome Developer Tools to debug AngularJS expressions.

Chrome Extension For Angular Debugging

We’ll be covering some of the tactics and DevTools Angular developers use for debugging their applications, not only in their very predictable development environment, but also in production when their code comes to life and things may go sideways. Besides, what better way of deeply understanding a language or framework if not by looking at its inner workings.

(Most of the learnings here are applicable to all frontend applications)

Angular Debugging Tools
One of the most popular extensions—for debugging and profiling Angular apps—is definitely Augury, available on both Firefox and Chrome.

Augury gives a visual representation of Angular components alongside their dependencies and router details. It makes it easy to:

Inspect the source code of a component and insert breakpoints.
Manipulate a component’s properties, visualize its hierarchy and see its dependencies.
Browse the routing system, track lazy-loaded components and see navigation flows.
List all modules that the application is using and check their providers and exports.
How to debug with Chrome DevTools
Angular Augury is definitely a big plus, but the best debugging tool comes already bundled with your browser. The good old “inspector” will boost your productivity when it comes to debugging JavaScript, tweaking DOM and CSS, inspecting network activity, analyzing performance, tracking down memory leaks and much more.

Console
The Console serves two objectives at least: display of your application’s logs plus runtime errors and ability to execute custom JS code.

text

Developers may be logging messages using console.log() to inspect the value of some variable or simply ensure their code is executing in the right order. Warnings and the majority of runtime errors get also printed here. See console JS object to learn what you can do with it.

text

On top of that, your Console is a REPL environment and has full access to window. In other words, you can use it to run custom JavaScript code that interacts with your Angular application. More about the Console Utilities API.

Network Panel
This where your entire application’s network activity will be logged. All resources, whether downloaded or uploaded, are available for inspection in the Network panel. These resources are listed chronologically with information such as HTTP response code, loading time, initiator, state and size. The footer contains a summary of the total number of requests and the size of all resources.

text

This list view helps easily spot requests that failed (the red ones) and those that are pending and may soon timeout. If you’re looking for CORS issues, it’s better to start from Console then eventually switch to Network (these requests appear in white, as successful).

text

Clicking on a specific resource opens a detailed panel where HTTP Headers are shown, alongside the Response and even an HTML Preview of it. It’s in fact easier to debug the received data or simply inspect images here than in your HTML source code.

text

And finally the Timing breakdown which can prove very useful when investigating requests that take a long time to download, either due to a poor connection between your Angular application and the server (consider using a CDN if Time To First Byte is high) or to a slow backend if that server is hosted locally.

Tips: Hit Preserve log to keep the logs when navigating from one page to another, and check Disable cache so resources won’t be served from cache when DevTools is open.

JS Debugger
This is by far the most powerful tool available in DevTools, and you can find it under the Sources tab.

Breakpoints
This a faster and cleaner alternative to using console.log() when looking for bugs. It allows for quick inspection of the piece of code being executed and the values of all variables at that moment in time.

text

The execution comes to a halt as soon as it reaches the breakpoint. And you can set many of them at the same time. From there you can deep dive into your code using the different options at hand:

Step through the code by resuming execution, one line at a time, or hop on to the next function call.
Check the callstack and see what functions are called and their order.
Scope pane is where all your local, global and closure (when applicable) variables get printed. You can change their values and see how it affects your application upon resuming execution.
Watch a specific variable by tracking its value over time. You can even use JS expressions here.
Console has access to the application state, use it to change values and to keep an eye on your console.log() messages.
Other types of breakpoints are available:

DOM — when a node or its children gets changed or removed.
XHR — triggered when the requested URL contains a specific string.
Event Listener — pauses on the code that runs right after an event is fired, say click or specific categories of events (all mouse related).
Run Snippets
From the same Sources panel, you can save your repetitive code into Snippets. They have access to your JavaScript context and can be run anywhere in your application.

Local Overrides
Who doesn’t hate losing changes whenever you hit that reload button? Local Overrides were made to overcome this. Specify a directory in Sources -> Overrides and let DevTools save your changes. It works in most situations (see limitations).

Store Specific Tools
DevTools might not be enough whenever you need to deep dive into some specific issues related to your store. Here are some of the tools you may use for Redux and NgRx:

Redux
redux-logger — for keeping track of your redux actions and state changes.
redux-devtools — this comes a browser extension or a library and provides power-ups for redux related issues, including the ability to export the store in JSON format.
NgRx
ngrx-store-devtools — for store instrumentation. Works with the redux-devtools browser extension.

HTML Structure & CSS
The Element tab is where you do all your DOM related activities. It allows you to edit the DOM and CSS on the fly.

Inspect DOM
text

You can inspect any particular DOM node, change its content, attribute or type and force its state (like :hover). You can remove nodes or reorder your tree by drag and dropping them and see how it renders.

DevTools lets you also use nodes in Console and even store them as global variables in case you need to refer back to them. But perhaps the most useful trick is to pause your JavaScript whenever it tries to update a DOM node. You can do that by adding a break on attribute change, node removal or subtree modification.

Edit Styles
text

On the right side of the panel you can see the CSS styles that are applied to the selected DOM element. DevTools lets you inspect styles in different ways by editing them, or by adding new styles and rules. The box at the bottom helps with the margins, paddings, dimensions and border.

Make sure to persist your changes to the development workspace if you don’t want them to disappear upon the next reload.

Performance Audit
Chrome DevTools offers several ways (across various panels) to audit and improve the performance of your Angular application.

Loading Speed
The Audits tab is where you can look for bottlenecks hurting your page’s loading speed. Open your application in incognito mode as some browser plugins may interfere with the auditing workflow.

Start with an audit as it creates a baseline to measure your changes against, but also gives you some actionable tips on how to improve. The available options let you run different categories of audits: SEO, accessibility or performance oriented. It also helps simulate how your application behaves on a mobile device (viewport and bandwidth/CPU throttling).

text

Results show the overall score (the higher the better) and a set of different sections:

Metrics — laying out the different aspects of the loading experience, such as when the content is displayed (First Contentful Paint) or when page is ready for user interactions (Time To Interactive).
Opportunities — with suggestions on how to speed up the page.
Diagnostics — full of details on how to improve performance.
Tip: Isolate your changes by making one improvement at a time, before rerunning an audit for measuring how it affected performance.

Memory Leaks
Memory issues are obvious and oftentimes noticed by your users as your application will tend to either pause (GarbageCollector kicks in more frequently than it should) or becomes slower throughout the session (think memory leak).

text

A dedicated Memory tab helps investigate these issues. Track down memory leaks by monitoring your JS heap (in Allocation timelines) and by finding detached DOM nodes — those removed from the tree but still being referenced by some JS — using Heap snapshots. You can even dissect memory allocation by function. Learn more about this topic here.

Learn more about memory problems.

CPU Profiler
text

You can record a JavaScript CPU profile and examine the functions that have impact on your application’s performance. Results can be shown in 3 ways: top-down (tree), by impact(heavy) or chronologically (flame chart).

Frames per second
FPS is captured alongside other metrics by DevTools at execution time. It is useful for spotting slow animations that hurt your user experience. Low framerates translate in red bars on the chart.

text

DevTools also offers an FPS meter, producing real-time estimations at runtime, and CPU throttling for simulation on mobile devices.

How to debug Production issues?
Issues reported by users do often lack the full context to have a complete understanding of what happened. “X doesn’t work” doesn’t obviously help you. Not to mention the time it takes to collect clues from your users with the hope of being able to reproduce the problem locally. Besides, how many of them would bother to submit a ticket or share a bad experience? An extremely tiny fraction I guess.

So don’t go easy on logs. Anything that helps you make sense of a bug is useful. Below are a few tips on what’s worth tracking.

Monitor your XHR
Make sure to log the XHR requests that failed (5xx/4xx) and their responses. Most HTTP libraries will allow you to easily handle such cases.

Catch your JS errors
Runtime errors are critical for diagnosing issues. They are worth a thousand log entries and provide an accurate picture of the problem. Store them on your server for later retrieval. If you had to log only one thing, start with JS errors.

Track your App’s State
Whether using Redux or NgRx, take the time to log your application’s state changes and actions. If you’re on Redux, you can even replay them in your browser with redux-slider-monitor. This would come in handy for thorough debugging of production issues.

Record your user actions
Logging user actions and journeys is a powerful, yet underused technique in debugging. Such strategy is widely used by marketers who track down each and every frustration that may affect the overall user experience, ranging from rage clicks to incorrect rendering of certain elements in the web app. Tools like Mixpanel, Amplitude or Heap haven’t been designed for developers and therefore rarely used by them. But this is not an excuse for not simply logging your user steps after sanitizing any residual private data.

In fact, being able to mentally visualize your user journey — while they experience an issue in production — and at the same time see how that affected your Angular stack is simply HUGE. It’s the ultimate root cause analysis technique and a serious productivity booster.

text

Monitor Angular apps in Production
Debugging an Angular application in production may be challenging and time consuming. Try using a unified monitoring platform that gathers all you need for troubleshooting in one single place. Try OpenReplay for free.

OpenReplay is a frontend monitoring tool that replays everything your users do and shows how your Angular app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder.

text

OpenReplay lets you reproduce issues, aggregate JS errors and monitor your app’s performance. OpenReplay offers plugins for capturing the state of your Redux or NgRx stores and for inspecting GraphQL queries.

Happy debugging, for modern frontend teams – Start monitoring your Angular app for free.

best angular chrome extension

Hi, Today, I am going to share some of the most useful Chrome extension tools, used for developing and debugging Angular apps. Here are the list of all Chrome extensions.

1) Augury
Augury is an application inspection tool for Angular that runs in the Web browser. It runs as a Chrome browser extension for the Developer Tools (DevTools) panel, aiding in analysis and debugging during development.

Overview of Augury

Augury provides insight into the application structure for an Angular application and the relationship between these building blocks:

Components
Services
Routes
Modules
Dependencies
Injectors
Data bindings
Events
Object properties
Augury compliments DevTools during a debugging session, making it easy to modify state and emit events.

Click the below link to install Augury.

Install Augury

2) Redux DevTools Extension
Redux DevTools for debugging application’s state changes.

If you are using Redux to manage your application state, there is a Chrome extension called Redux DevTools which lets us see all the actions dispatched, state of the application after each action and the difference in states.

It also gives us the ability to rewind the actions and see the corresponding changes on the page.

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.

Click the below link to install this extension.

Redux DevTools

3) Angular state inspector
Helps you debug Angular component state, inside the Elements tab of the DevTools.

A Chrome extension that lets you inspect the state of components. The extension works even with the hybrid application with UpgradeModule. So it can show state from angular 2+ and scope from AngularJs.

Click the below link to install this chrome extension.

Angular State Inspector

4) AngularJS Inspect Watchers
Inspect the scope watchers of an Angular app

A Chrome extension that lets the user inspect the number of Angular watchers that exist on any element of an Angular app. Once installed, navigate to your Angular app and click the Page Action in the address bar to activate the extension. Then, hover your mouse over different sections of your Angular application to see the scopes and watchers highlighted in red. Click the Page Action again to deactivate.

Click the below link to install this chrome extension.

AngularJS Inspect Watchers

5) Angular watchers
Angular watchers is the ultimate AngularJS tool which tells you how many active watchers you currently have. It automatically updates so you can see live how many watcher a page have. This is perfect to debug any performance issues.

Features
Total number of watcher on the current page
Difference from the last total number of watchers
Visual graph that plots the number of watchers in time (max 25 plots)
Choose Iframe where you want to count the watchers
Expose Angular Modules in a global variable window.$$am
Graph/Counter view toggle
Dark/Light theme toggle
Bootstrapped element input – in case your app is manually bootstrapped
Click the below link to install this chrome extension.

Angular watchers

6) Angular BatScanner
Yet another Angular 2 devtool, Angular BatScanner is focus on performance analysis. Like debugging the performance bottleneck is hard. I made a tool to visualize what is happening for Angular when your application is running. It’s similar to Timeline Tool but using the Angular Component vocabulary. By hooking into the components life cycle system we can quickly explore a record to answer :

• when, where and why a change happened –

how often it’s changed –

how much time a components took to react to it –

etc…

Click the below link to install this chrome extension.

Angular BatScanner

7) ng-inspect for AngularJS
Helps you in debugging AngularJS applications. Extends the elements panel in devtools to display scope properties.

ng-inspect helps you access properties of the element’s scope when an element is selected using the Element Inspector or the Elements tab in the Developer Toolbar in an Angular JS aplication.

This extension will provide access to scope, isolateScope[if the scope is isolated], rootScope, jQuery element and its events[if jQuery is included in the page].

These properties are made available to the Global/Window object via $s for scope, $is for isolateScope, $rs for rootScope, $el for jQuery element and $events for the events associated with the jQuery element.

Services/Factories/Constants can be tested/verified using $get function.

$count function prints number of Scopes, isolateScopes, listeners and watchers.

Click the below link to install this chrome extension.

ng-inspect for AngularJS

8) AngularJS Inspector
Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications. Based on AngularJS Batarang.

Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.

This extension is based on AngularJS Batarang which sadly had not been updated in approximately two years. For that reason, I’m trying to provide AngularJS programmers with a tool that will address the issues that currently exist and work towards making this even better!

Click the below link to install this chrome extension.

AngularJS Inspector

9) Angular Gauntlets
Angular Gauntlets helps you getting your hands dirty. This chrome extension makes the components and providers of your Angular application accessible on click on an element in the Chrome DevTools elements panel.

How to use
Gauntlets is light, based on ng.probe, loads instantly and does not need to switch to another tab of the Chrome DevTools.

Just click on a DOM element in the DevTools elements panel, type one of the following keywords in the console and here we go!

$component: click on a DOM element referring to an Angular component to access its instance and playing with it.
$context: display a DOM element context, can be its parent Angular component, a ngFor row, etc.
$scope: equals $component onto Angular components or $context onto child elements. The best alternative of AngularJS Batarang for Angular.
$providers: get the list of the all the providers instantiated in your Angular app and play with them.
$detectChanges(): triggers Angular change detection to get your changes apply.
Little extra: you can get a preview of all these info in the Angular tab of your DevTools elements panel. Switching between elements will refresh the data immediately.

Click the below link to install this chrome extension.

Angular Gauntlets

10) ng-detector
Detects AngularJS apps as you browse.

Adds a small AngularJS icon into the address bar when you come across a page that is built using AngularJS.

Mouse over the icon to see the Angular version info.

Click the below link to install this chrome extension.

Conclusion

Let us know your thoughts in the comment section below.

Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines