Project Goals

Project Goals

This page is a discussion on what high-level features a great browser extension-based developer tool for Angular should provide.

Features

ng-inspector, batarang, ng-stats and ng-detector are existing extensions in this space, and they collectively provide:

• Scope tree
  • Display the app/directive/controller that created the scope
• Models
• Hints regarding best practices
  • pluggable + configurable defaults
• Dependency graph
• Detection of AngularJS apps
• Performance profiling
  • Expressions
  • Watchers
  • Digests
• Highlight DOM node associated with the scope (on the page or in dev tools)
• Inspect the scope associated with a DOM node (context menu or interactive selector)

Additional possible features:

• Editing models in the extension
  • Strings and Numbers
  • Arrays
  • Objects
  • Functions?
• List defined modules and their components (services)
  • List module dependencies
• Display AngularJS version
• Place some injectables on window (Configurable, as stated in this issue)
• ESLint like plugin system

Features specific to popular Angular projects:

• New Router
  • List defined routes
  • Highlight router containers
  • Indicate currently matched route
    • Insight into redirects

Implementation

• What browsers do we want to support?
  • Chrome
  • Firefox (this should be pretty easy)
  • Safari (tricky!)
• Should the extension UI live inside the browser developer tools? (this excludes Safari and IE/Edge?)
• Use ng-hint (to be renamed) as the introspection backend, design document