Aurelia DevTools

WIP

This project is a work in progress. The current version is not yet available on the Chrome Web Store. Please check back later for updates.

---

A browser extension for debugging Aurelia 1 and 2 applications. Features a top-level DevTools tab with modern, professional interface and dual-tab architecture for comprehensive debugging.

Features

• Dual Version Support: Works with both Aurelia v1 and v2 applications
• Component Discovery: Automatically finds and displays all Aurelia components on the page
• Interactive Property Inspector: View and edit component properties, bindables, and custom attributes
• Professional Interface: Clean, modern design matching Chrome DevTools aesthetics
• Real-time Updates: Refresh functionality to re-scan components
• Dark/Light Theme Support: Adapts to Chrome DevTools theme preferences

Installation

From Chrome Web Store

Coming soon...

Manual Installation (Development)

1. Clone this repository: git clone https://github.com/aurelia/devtools.git
2. Run npm install to install dependencies
3. Run npm run build to build the extension
4. Follow Chrome's extension loading guide:
   • Open chrome://extensions
   • Enable "Developer mode"
   • Click "Load unpacked" and select the dist folder

Development

Prerequisites

Install the latest Node.js and npm versions.

Build Commands

• npm run start - Development mode with file watching (Vite build --watch)
• npm run build - Production build
• npm run analyze - Production build with bundle analyzer (vite-bundle-analyzer)
• npm run lint - Run ESLint and HTMLHint
• npm run test - Run Jest tests with coverage
• npm run reload - Open Chrome extension reload URL

Development Workflow

1. Run npm run start to start development mode
2. Load the extension in Chrome (see Installation > Manual Installation)
3. Pin the Aurelia Extension in the toolbar to verify detection: "Aurelia 2 detected on this page."
4. Open Developer Tools and navigate to the "⚡ Aurelia" tab
5. For code changes:
   • Reload the extension in chrome://extensions
   • Close and reopen Developer Tools (or Ctrl+R in the DevTools inspect window)
   • Refresh the target page if needed

Troubleshooting Development Issues

• If you encounter "File not found" errors:
  1. Right-click in the panel/popup
  2. Select "Inspect"
  3. Check the console for error details
• If the "Aurelia" tab doesn't appear, try refreshing the target page
• Clear any extension errors in the chrome://extensions page

Architecture

Core Components

• Main Application (src/main.ts, src/app.ts) - Aurelia 2 app rendering the DevTools UI
• Extension Scripts:
  • detector.ts - Detects Aurelia versions on web pages
  • background.ts - Service worker managing extension state
  • contentscript.ts - Finds Aurelia instances in DOM
  • devtools.js - Creates the DevTools panel

Build System

• Vite - Modern build tool replacing Webpack
• TypeScript - Type safety and modern JavaScript features
• Aurelia 2 - Framework for the DevTools UI itself

File Structure

src/
├── main.ts                 # Entry point
├── app.ts, app.html        # Main Aurelia app
├── backend/                # Debug host and communication
├── background/             # Service worker
├── contentscript/          # Page content interaction
├── detector/               # Aurelia version detection
├── devtools/               # DevTools panel creation
├── resources/elements/     # UI components
├── shared/                 # Common types and utilities
└── popups/                 # Extension popup pages

Technology Stack

• Frontend: Aurelia 2, TypeScript, CSS
• Build: Vite, Rollup
• Linting: ESLint, HTMLHint
• Extension: Chrome Extension Manifest v3

Current Limitations

• Map and Set changes don't live update automatically
• V1 and V2 feature parity is still in development
• Some advanced Aurelia features may not be fully supported yet

Contributing

Submitting Changes

• Ensure all tests pass: npm test
• Run linting: npm run lint
• Build the project: npm run build
• Include built files in /dist when committing
• Follow the existing code style and patterns

Development Notes

• The extension uses Chrome's message passing for communication
• DevTools panel runs in an isolated context with limited APIs
• Both source and built files should be committed for distribution

Credits

This extension is based on the original work by Brandon Seydel from the aurelia-inspector repository.

License

MIT