Angular DevTools

Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.

What is Angular DevTools?

Angular DevTools is a Chrome extension developed by Angular, and its main feature is "Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.".

Extension Screenshots

screenshot
screenshot
screenshot
screenshot
screenshot

Download Angular DevTools Extension CRX File

Download Angular DevTools extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.

Extension Usage Instructions

                        You can use Angular DevTools to understand the structure of your application and preview the state of the directive and the component instances. To get insights into the execution of the application, you can use the profiler tab, which shows you the individual change detection cycles, what triggered them, and how much time Angular spent in them. You can also inspect and visualize your application's dependency injection tree to better how understand how and why any token was resolved to a specific service.

Extension Basic Information

Name Angular DevTools Angular DevTools
ID ienfalfjdbdpebioblfackkekamfmbnh
Official URL https://chromewebstore.google.com/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh
Description Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.
File Size 3.2 MB
Installation Count 356,469
Current Version 1.0.11
Last Updated 2024-02-27
Publish Date 2021-05-13
Rating 4.01/5 Total 142 Ratings
Developer Angular
Email [email protected]
Payment Type free
Extension Website https://angular.dev/tools/devtools/
Help Page URL https://github.com/angular/angular/issues/
Privacy Policy Page URL http://go/protoshop-chrome-extension
Supported Languages en-US
manifest.json 
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "manifest_version": 3,
    "short_name": "Angular DevTools",
    "name": "Angular DevTools",
    "description": "Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.",
    "version": "1.0.11",
    "version_name": "1.0.11",
    "minimum_chrome_version": "102",
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'"
    },
    "icons": {
        "16": "assets\/icon16.png",
        "48": "assets\/icon48.png",
        "128": "assets\/icon128.png"
    },
    "action": {
        "default_popup": "popups\/not-angular.html",
        "default_icon": {
            "16": "assets\/icon-bw16.png",
            "48": "assets\/icon-bw48.png",
            "128": "assets\/icon-bw128.png"
        }
    },
    "devtools_page": "devtools.html",
    "web_accessible_resources": [
        {
            "resources": [
                "app\/backend_bundle.js",
                "app\/detect_angular_for_extension_icon_bundle.js",
                "devtools.html"
            ],
            "matches": [
                ""
            ],
            "extension_ids": []
        }
    ],
    "background": {
        "service_worker": "app\/background_bundle.js"
    },
    "permissions": [
        "scripting",
        "activeTab"
    ],
    "host_permissions": [
        ""
    ],
    "content_scripts": [
        {
            "matches": [
                ""
            ],
            "js": [
                "app\/ng_validate_bundle.js"
            ],
            "run_at": "document_idle"
        }
    ]
}

Related Extensions

Solid Devtools
Solid Devtools
ng-inspect for AngularJS
ng-inspect for AngularJS
Livewire devtools
Livewire devtools
Laravel TestTools
Laravel TestTools
React Developer Tools
React Developer Tools