@twygmbh/component-inspector
Advanced tools
Angular 19+ component inspector with developer tools for visualizing and debugging components in real-time
A zero-config Angular 19+ component inspector that overlays visual borders on rendered components with clickable handles to open source files in your editor.
Ctrl+Shift+I (or Cmd+Shift+I on Mac) to enable/disablenpm install @twygmbh/component-inspector --save-dev
Requirements:
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideComponentInspector } from '@twygmbh/component-inspector';
export const appConfig: ApplicationConfig = {
providers: [
// ... other providers
provideComponentInspector(), // Zero config setup!
],
};
Add the plugin to your esbuild configuration:
// project.json or esbuild config
import { componentManifestPlugin } from '@twygmbh/component-inspector/plugin';
export default {
plugins: [
componentManifestPlugin({
rootDir: process.cwd(),
outputPath: 'apps/your-app/src/assets/component-manifest.json',
}),
],
};
Start your Angular dev server and the VS Code opener server:
# Terminal 1: Angular dev server
npm start
# Terminal 2: VS Code opener server
npx vscode-opener
Or combine them in your package.json:
{
"scripts": {
"dev": "concurrently \"npm start\" \"npx vscode-opener\""
}
}
Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac)| Shortcut | Action |
|---|---|
Ctrl+Shift+I (or Cmd+Shift+I) | Toggle inspector mode on/off |
When inspector mode is active:
app-project-list)By default, the inspector shows:
app-*, lib-*, saas-*, sen-*, sentinel-*)hlm-*, brn-*)You can customize filters in app.config.ts:
provideComponentInspector({
filter: {
include: ['app-*', 'my-custom-*'], // Only show these
exclude: ['app-excluded-*'], // Hide these
},
})
Full configuration options:
interface InspectorConfig {
enabled: boolean;
shortcut: {
key: string; // Default: 'I'
ctrl?: boolean; // Default: true
shift?: boolean; // Default: true
alt?: boolean;
meta?: boolean;
};
overlay: {
borderColor: string; // Default: 'rgb(104, 182, 255)'
backgroundColor: string; // Default: 'rgba(104, 182, 255, 0.15)'
borderWidth: number; // Default: 2
zIndex: number; // Default: 2147483647
};
filter: {
include?: string[]; // Glob patterns
exclude?: string[]; // Glob patterns
hideStandalone?: boolean; // Hide standalone components
};
performance: {
throttleMs: number; // Default: 200
debounceMs: number; // Default: 150
useLazyRendering: boolean; // Default: true
maxVisibleOverlays: number; // Default: 100
};
vscode: {
enabled: boolean; // Default: true
backendUrl: string; // Default: 'http://localhost:3001/api/dev/editor'
useFallbackProtocol: boolean; // Default: true
};
}
// app.config.ts
provideComponentInspector({
shortcut: {
key: 'D',
ctrl: true,
shift: true,
},
overlay: {
borderColor: 'rgb(255, 100, 100)',
backgroundColor: 'rgba(255, 100, 100, 0.1)',
},
filter: {
include: ['app-*'],
exclude: ['app-test-*'],
},
})
The esbuild plugin accepts these options:
interface PluginOptions {
enabled?: boolean; // Default: true
logToConsole?: boolean; // Default: true
rootDir?: string; // Default: process.cwd()
outputPath?: string; // Default: apps/sentinel/src/assets/component-manifest.json
componentPattern?: string; // Default: **/*.component.ts
ignorePatterns?: string[]; // Default: [**/node_modules/**, **/dist/**, **/tmp/**]
}
Example:
componentManifestPlugin({
rootDir: process.cwd(),
outputPath: 'src/assets/component-manifest.json',
componentPattern: '**/*.component.ts',
ignorePatterns: ['**/node_modules/**', '**/dist/**'],
logToConsole: true,
})
The manifest generation happens automatically via the included esbuild plugin:
*.component.ts files@Component decorator metadata (selector, class name, file paths)The plugin integrates seamlessly with your esbuild configuration and runs in the background.
The ComponentDetectorService:
__ngContext__ property (Angular Ivy)ng.getComponent() to extract component instancesThe OverlayManagerService:
getBoundingClientRect() for positioningPowered by launch-editor, the same library used in React DevTools.
Two methods supported:
Method 1: Backend API (Recommended)
$EDITOR environment variableMethod 2: vscode:// Protocol (Fallback)
vscode://file/ URL schemeThe package includes three main parts:
import { provideComponentInspector } from '@twygmbh/component-inspector';
Includes:
ComponentInspectorService, ComponentDetectorService, OverlayManagerService, VscodeIntegrationServiceComponentInfo, InspectorConfigimport { componentManifestPlugin } from '@twygmbh/component-inspector/plugin';
Generates component manifests during build by:
@Component decoratorsnpx vscode-opener
Runs a local HTTP server (port 3001) that:
The manifest is automatically regenerated by the esbuild plugin on every build and hot reload. You don't need to manually regenerate it!
The plugin runs during your build process and:
*.component.ts files@Component decorator metadataThe inspector only works in development mode (isDevMode() === true).
To test:
npx vscode-openerCtrl+Shift+I to toggle inspector mode[ComponentInspector] Initialized successfullyisDevMode() === truecomponent-manifest.json)provideComponentInspector() to your app configinclude patterns__ngContext__ property (development builds only)npm run vscode-opener is running (or use npm run dev)LAUNCH_EDITOR environment variable (e.g., LAUNCH_EDITOR=code or LAUNCH_EDITOR=webstorm)vscode:// protocol (VS Code only)filter.include patternsperformance.throttleMsperformance.useLazyRendering: false__ngContext__ which is removed in productionMIT
FAQs
Angular 19+ component inspector with developer tools for visualizing and debugging components in real-time
The npm package @twygmbh/component-inspector receives a total of 12 weekly downloads. As such, @twygmbh/component-inspector popularity was classified as not popular.
We found that @twygmbh/component-inspector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.