rab-cdp-debug

window.RS_ROOT_CONTAINER 调试指南（Chrome DevTools MCP）

本 skill 告知 Agent 如何通过 Chrome DevTools MCP 的 evaluate_script 工具，利用 @rabjs/devtools 挂载的 window.__RS_ROOT_CONTAINER__ 能力，对 Service 层进行功能验证与状态检查。

---

前置条件：初始化挂载

window.__RS_ROOT_CONTAINER__ 不会自动挂载，必须由应用入口显式初始化。

1. 安装依赖：

pnpm add @rabjs/devtools

1. 在应用入口（如 main.tsx）调用一次：

import { setupWindowRootContainer } from '@rabjs/devtools';

setupWindowRootContainer();

如果目标页面尚未接入，先引导用户完成上述初始化步骤，再进行后续调试。SSR 安全：非浏览器环境下调用会自动跳过。

---

能力概述

window.__RS_ROOT_CONTAINER__ 是 setupWindowRootContainer() 在浏览器环境下挂载的全局访问句柄，暴露整棵容器树的查询接口。

挂载时机：应用入口调用 setupWindowRootContainer() 时。

容器树结构

global (getGlobalContainer())           ← 真正的根，与 React 无关
  └─ RSRootInner_1                      ← RSRoot 的 bindServices 容器
       └─ ProductPage_2                 ← 页面级 bindServices 容器
            └─ CartDomain_3             ← Domain 级 bindServices 容器

RSRootContainerHandle 接口

interface RSRootContainerHandle {
  container: Container; // global 容器实例
  getService(instanceId: string): Service | undefined;
  getContainer(containerName: string): Container | undefined;
  listServices(): Array<{
    instanceId: string; // 格式: ClassName_nanoid
    containerName: string; // 来自 bindServices options.name 或自动生成
    identifierLabel: string; // Service 类名
    instance: Service; // 内存对象引用，可直接操控
  }>;
}

---

evaluate_script 工具使用说明

Chrome DevTools MCP 提供 evaluate_script 工具，可在当前选中页面内执行 JavaScript 函数，返回值必须是 JSON 可序列化的。

function (string) (required): JavaScript 函数声明
  示例无参数: () => { return document.title }
  示例有参数: (el) => { return el.innerText; }
args (array) (optional): 传入函数的参数列表

关键约束：Service 实例本身不可序列化跨进程传递，必须在 evaluate_script 内部完成操作，只将基础类型（数字、字符串、布尔、普通对象）作为结果返回。

---

常用调试操作

1. 检查 handle 是否已挂载

() => {
  return typeof window.__RS_ROOT_CONTAINER__;
};
// 期望返回: "object"

2. 列出所有已实例化的 Service

() => {
  const handle = window.__RS_ROOT_CONTAINER__;
  if (!handle) return { error: '__RS_ROOT_CONTAINER__ 未挂载' };
  return handle.listServices().map(s => ({
    instanceId: s.instanceId,
    containerName: s.containerName,
    identifierLabel: s.identifierLabel,
  }));
};