基于Angular 15的Excel插件中如何启用Redux DevTools？

1. 修正NgRx Store的DevTools配置（适配iframe隔离环境） #

Office插件运行在Edge的iframe沙箱中，默认DevTools配置无法跨iframe建立连接，需调整StoreModule.forRoot的参数：

StoreModule.forRoot(reducers, {
  metaReducers,
  runtimeChecks: {
    strictActionImmutability: true,
    strictStateImmutability: true,
  },
  devTools: {
    name: 'Excel Add-in (Angular 15)', // 给插件Store命名，方便DevTools识别
    maxAge: 25,
    allowOutsideStore: true, // 允许外部DevTools连接iframe内的Store实例
  },
}),

如果需要区分生产/开发环境，可结合环境变量：

devTools: !environment.production && {
  name: 'Excel Add-in (Angular 15)',
  allowOutsideStore: true,
}

2. 开启Edge DevTools的iframe调试权限 #

打开Edge DevTools（按F12），完成以下设置：

• 点击右上角齿轮图标进入设置，在Experiments标签下，勾选Allow debugging for embedded WebViews（部分版本可能显示为Enable debugging of iframes）；
• 在DevTools顶部的上下文选择器（默认显示top），切换到对应Excel插件的iframe（域名通常为officeapps.live.com或你的插件部署域名）；
• 切换后查看DevTools的Redux标签，即可识别插件的Store。

3. 确保插件处于调试模式 #

• 确认angular.json中serve命令的配置使用development环境；
• 检查environment.ts中production设为false——NgRx默认在生产模式下禁用DevTools。

4. 更新扩展并重启环境 #

• 将Edge的Redux DevTools扩展更新到最新版本；
• 完全关闭Excel和Edge，重新启动并加载插件，避免缓存导致的连接异常。

5. 手动触发DevTools连接（自动连接失败时） #

在AppComponent中添加手动初始化逻辑，强制建立连接：

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private store: Store) {}

  ngOnInit(): void {
    if (!environment.production) {
      // 手动连接DevTools
      (window as any).__REDUX_DEVTOOLS_EXTENSION__?.connect({
        name: 'Excel Add-in (Angular 15)',
        allowOutsideStore: true,
      });
      // 触发Store订阅，让DevTools检测到实例
      this.store.subscribe();
    }
  }
}

内容的提问来源于stack exchange，提问作者3xGuy