Augury调试利器：解决Angular开发中的8大痛点问题

为什么选择这篇指南？

你是否曾在Angular开发中遇到组件状态不显示、路由图加载失败或AoT编译后调试工具失效的问题？作为Angular生态中最受欢迎的调试工具之一，Augury虽然已被官方Angular DevTools取代，但仍有大量开发者在维护 legacy 项目时依赖它。本文整理了8个高频问题的解决方案，包含12个代码示例、5个配置表格和3个调试流程图，帮你快速解决90%的Augury使用障碍。

基础环境检查清单

检查项	要求	验证方法	失败后果
Angular版本	2.x-8.x	ng version	工具完全无法加载
开发模式	必须启用	window.ng.probe存在性	组件树为空
Node版本	10.0.0-12.13.0	node -v	构建失败
TypeScript版本	3.5.3	tsc -v	类型错误

⚠️ 关键提示：Augury不支持Angular Ivy引擎（Angular 9+默认启用），若项目已升级到Ivy，请迁移至Angular DevTools。

核心问题解决方案

1. 路由图空白或不完整

症状：在"Router Tree"标签页仅显示根节点，无路由分支。

根本原因：Angular 2.3.0之前版本需要显式注入Router服务。

解决方案： 在根组件构造函数中注入Router并命名为router：

// app.component.ts
import { Router } from '@angular/router';

export class AppComponent {
  constructor(private router: Router) { 
    // 必须使用private修饰符且变量名为router
  }
}

原理说明： Augury通过检测根组件中的router实例来构建路由树。早期Angular版本不会自动暴露路由信息，需通过此注入方式提供访问入口。

2. 组件状态面板显示"无数据"

症状：选中组件后State面板为空，控制台提示No state available。

可能原因与对应方案：

原因A：日期polyfill冲突

# 解决方案：移除开发环境的date polyfill
npm uninstall core-js/es6/date

原因B：组件未触发变更检测

// 修复：手动触发变更检测
import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

someMethod() {
  this.data = newData;
  this.cdr.markForCheck(); // 强制更新视图
}

3. AoT编译后调试信息丢失

症状：使用--aot标志编译后，Augury显示"无法检测Angular应用"。

解决方案：修改tsconfig.json添加调试标志：

{
  "angularCompilerOptions": {
    "debug": true,  // 关键配置
    "skipMetadataEmit": false
  }
}

验证方法：编译后检查dist/out-tsc目录是否生成.metadata.json文件。

4. "EnableDebugTools"导致工具失效

症状：使用enableDebugTools()后，Augury组件树消失。

原因：Angular 2.2.0前的enableDebugTools()会覆盖ng.probe方法。

解决方案：

// main.ts - Angular 2.2.0之前版本适用
import { enableDebugTools } from '@angular/core';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    const appRef = moduleRef.injector.get(ApplicationRef);
    const cmpRef = appRef.components[0];
    // 保存原始ng.probe方法
    const originalProbe = window['ng'].probe;
    enableDebugTools(cmpRef);
    // 恢复probe方法
    window['ng'].probe = originalProbe;
  });

高级调试技巧

多应用检测问题

当页面存在多个Angular应用时，Augury默认只显示第一个。可通过以下方法切换：

// 在浏览器控制台执行
window['__AUGURY__'].selectApp(1); // 切换到第二个应用

开发模式强制检查

确保Angular运行在开发模式：

// 在应用入口文件添加
import { isDevMode } from '@angular/core';

if (!isDevMode()) {
  console.error('Augury requires Angular to run in development mode!');
  // 开发环境下强制启用
  // enableProdMode(); // 注释此行
}

构建与安装问题

Node版本不兼容

错误信息：Error: Unsupported engine

解决方案：

# 使用nvm管理Node版本
nvm install 12.13.0
nvm use 12.13.0
npm rebuild

扩展安装失败

Chrome安装步骤：

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/au/augury
2. 安装依赖：npm install
3. 构建：npm run build:dev
4. 加载扩展：chrome://extensions → 加载已解压的扩展程序 → 选择build目录

问题排查流程图

flowchart TD
    A[Augury无法加载] --> B{控制台有无错误?}
    B -->|有| C[检查Angular版本]
    B -->|无| D[确认开发模式]
    C --> E[版本>Ivy?→使用Angular DevTools]
    D --> F[window.ng是否存在?]
    F -->|否| G[检查应用是否正常运行]
    F -->|是| H[重新加载扩展]

总结与迁移建议

虽然Augury已停止维护，但对于Angular 8及以下项目仍是高效调试工具。遇到问题时：

1. 优先检查开发模式和版本兼容性
2. 按症状匹配本文解决方案（90%问题可覆盖）
3. 复杂场景可使用ng.probe($0)手动调试

迁移建议：逐步过渡到Angular DevTools，它提供：

• Ivy引擎原生支持
• 性能分析功能
• 更好的组件状态检查

收藏本文以备不时之需，关注获取更多Angular调试技巧！

附录：常用调试命令

命令	用途
npm run build:dev	开发模式构建扩展
npm test	运行单元测试
chrome://extensions	Chrome扩展管理页面
about:debugging	Firefox扩展调试页面