react-native-ai-debugger 1.0.25 → 1.0.27

package/README.md

@@ -6,6 +6,7 @@ An MCP (Model Context Protocol) server for AI-powered React Native debugging. En
 
 -   Captures `console.log`, `console.warn`, `console.error` from React Native apps
 -   **Network request tracking** - capture HTTP requests/responses with headers, timing, and status
+-   **React component inspection** - inspect component tree, props, state/hooks, and layout styles at runtime
 -   **Debug Web Dashboard** - browser-based UI to view logs and network requests in real-time
 -   Supports both **Expo SDK 54+** (React Native Bridgeless) and **RN 0.70+** (Hermes)
 -   **Auto-connect on startup** - automatically scans and connects to Metro when the server starts
@@ -136,6 +137,15 @@ Requires VS Code 1.102+ with Copilot ([docs](https://code.visualstudio.com/docs/
 | `reload_app`         | Reload the app (auto-connects if needed). Use sparingly - Fast Refresh handles most changes |
 | `get_debug_server`   | Get the debug HTTP server URL for browser-based viewing             |
 
+### React Component Inspection
+
+| Tool                 | Description                                                         |
+| -------------------- | ------------------------------------------------------------------- |
+| `get_component_tree` | Get React component hierarchy from the running app (TONL format by default) |
+| `get_screen_layout`  | Get all components with layout styles (padding, margin, flex, etc.) |
+| `inspect_component`  | Inspect a specific component's props, state/hooks, and children     |
+| `find_components`    | Find components matching a regex pattern with paths and layout info |
+
 ### Android (ADB)
 
 | Tool                        | Description                                                   |
@@ -540,6 +550,162 @@ execute_in_app with expression="AsyncStorage.getItem('userToken')"
 
 Set `awaitPromise=false` for synchronous execution only.
 
+## React Component Inspection
+
+Inspect React components at runtime via the React DevTools hook. These tools let you debug component state, verify layouts, and understand app structure without adding console.logs.
+
+### Get Component Tree
+
+View the React component hierarchy:
+
+```
+get_component_tree
+```
+
+Output (TONL format by default, ~50% smaller than JSON):
+
+```
+App
+  ErrorBoundary
+    SafeAreaProvider
+      Provider
+        HomeScreen
+          Header
+          FlatList
+          Footer
+```
+
+Options:
+- `hideInternals=false` - Show internal RN components (RCTView, RNS*, etc.)
+- `includeProps=true` - Include component props
+- `format="json"` - Get structured JSON instead of TONL
+
+### Find Components by Pattern
+
+Search for components matching a regex:
+
+```
+find_components with pattern="Screen$"
+```
+
+Output:
+
+```
+pattern: Screen$
+found: 5
+#found{component,path,depth,key,layout}
+HomeScreen|... > Navigator > HomeScreen|45||
+SettingsScreen|... > Navigator > SettingsScreen|45||
+ProfileScreen|... > Navigator > ProfileScreen|45||
+```
+
+Options:
+- `summary=true` - Get counts only (e.g., "HomeScreen: 1, SettingsScreen: 1")
+- `includeLayout=true` - Include flex, padding, margin values
+- `maxResults=10` - Limit number of results
+
+### Inspect Component State
+
+Debug a specific component's props and hooks:
+
+```
+inspect_component with componentName="HomeScreen"
+```
+
+Output:
+
+```json
+{
+  "component": "HomeScreen",
+  "path": "... > Navigator > HomeScreen",
+  "props": {
+    "navigation": "[Object]",
+    "route": { "name": "Home", "key": "home-xyz" }
+  },
+  "hooks": [
+    { "hookIndex": 0, "value": false },
+    { "hookIndex": 1, "value": { "current": null } },
+    { "hookIndex": 3, "value": 42 }
+  ]
+}
+```
+
+Options:
+- `includeChildren=true` - List direct children component names
+- `includeState=false` - Skip hooks/state (faster)
+- `index=1` - Inspect 2nd instance if multiple exist
+
+### Get Screen Layout
+
+View all components with their layout styles:
+
+```
+get_screen_layout with summary=true
+```
+
+Output:
+
+```
+#summary total=320
+View:83
+RCTView:65
+TouchableOpacity:12
+Text:8
+HomeScreen:1
+```
+
+Full layout mode (`summary=false`):
+
+```
+#elements{component,path,depth,layout,id}
+View|... > HomeScreen > View|46|flex:1|
+Header|... > View > Header|47|height:60;padding:16|header
+```
+
+### Use Cases
+
+**Debug Navigation Issues**
+```
+# Find which screen is currently mounted
+find_components with pattern="Screen$"
+
+# Check if a screen rendered multiple times (memory leak)
+find_components with pattern="HomeScreen" summary=true
+```
+
+**Debug State Without console.log**
+```
+# Check current hook values
+inspect_component with componentName="LoginForm"
+# → hookIndex 2: false (isLoading)
+# → hookIndex 3: "" (errorMessage)
+
+# After user action, check if state changed
+inspect_component with componentName="LoginForm"
+# → hookIndex 2: true (isLoading changed!)
+```
+
+**Verify Layout Styles**
+```
+# Check if padding was applied correctly
+get_screen_layout with componentsOnly=true
+
+# Find components with specific layout issues
+find_components with pattern="Card" includeLayout=true
+```
+
+**Understand Unfamiliar Codebase**
+```
+# Get app structure overview
+get_component_tree with maxDepth=10
+
+# Find all button variants
+find_components with pattern="Button"
+
+# Find all context providers
+find_components with pattern="Provider$"
+```
+
 ## Device Interaction
 
 ### Android (requires ADB)

package/build/core/executor.d.ts

@@ -3,4 +3,46 @@ export declare function executeInApp(expression: string, awaitPromise?: boolean,
 export declare function listDebugGlobals(): Promise<ExecutionResult>;
 export declare function inspectGlobal(objectName: string): Promise<ExecutionResult>;
 export declare function reloadApp(): Promise<ExecutionResult>;
+/**
+ * Get the React component tree from the running app.
+ * This traverses the fiber tree to extract component hierarchy with names.
+ */
+export declare function getComponentTree(options?: {
+    maxDepth?: number;
+    includeProps?: boolean;
+    includeStyles?: boolean;
+    hideInternals?: boolean;
+    format?: 'json' | 'tonl';
+}): Promise<ExecutionResult>;
+/**
+ * Get layout styles for all components on the current screen.
+ * Useful for verifying layout without screenshots.
+ */
+export declare function getScreenLayout(options?: {
+    maxDepth?: number;
+    componentsOnly?: boolean;
+    shortPath?: boolean;
+    summary?: boolean;
+    format?: 'json' | 'tonl';
+}): Promise<ExecutionResult>;
+/**
+ * Inspect a specific component by name, returning its props, state, and layout.
+ */
+export declare function inspectComponent(componentName: string, options?: {
+    index?: number;
+    includeState?: boolean;
+    includeChildren?: boolean;
+    shortPath?: boolean;
+    simplifyHooks?: boolean;
+}): Promise<ExecutionResult>;
+/**
+ * Find all components matching a name pattern and return summary info.
+ */
+export declare function findComponents(pattern: string, options?: {
+    maxResults?: number;
+    includeLayout?: boolean;
+    shortPath?: boolean;
+    summary?: boolean;
+    format?: 'json' | 'tonl';
+}): Promise<ExecutionResult>;
 //# sourceMappingURL=executor.d.ts.map

package/build/core/executor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"executor.d.ts","sourceRoot":"","sources":["../../src/core/executor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AA8N7D,wBAAsB,YAAY,CAC9B,UAAU,EAAE,MAAM,EAClB,YAAY,GAAE,OAAc,EAC5B,OAAO,GAAE,cAAmB,GAC7B,OAAO,CAAC,eAAe,CAAC,CAoF1B;AAGD,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,eAAe,CAAC,CAkBjE;AAGD,wBAAsB,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAsBhF;AAGD,wBAAsB,SAAS,IAAI,OAAO,CAAC,eAAe,CAAC,CA0H1D"}
+{"version":3,"file":"executor.d.ts","sourceRoot":"","sources":["../../src/core/executor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AA8N7D,wBAAsB,YAAY,CAC9B,UAAU,EAAE,MAAM,EAClB,YAAY,GAAE,OAAc,EAC5B,OAAO,GAAE,cAAmB,GAC7B,OAAO,CAAC,eAAe,CAAC,CAoF1B;AAGD,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,eAAe,CAAC,CAkBjE;AAGD,wBAAsB,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAsBhF;AAGD,wBAAsB,SAAS,IAAI,OAAO,CAAC,eAAe,CAAC,CA0H1D;AAkGD;;;GAGG;AACH,wBAAsB,gBAAgB,CAAC,OAAO,GAAE;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,GAAG,OAAO,CAAC,eAAe,CAAC,CAoJhC;AAED;;;GAGG;AACH,wBAAsB,eAAe,CAAC,OAAO,GAAE;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,GAAG,OAAO,CAAC,eAAe,CAAC,CAiLhC;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,GAAE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAAC,eAAe,CAAC,CAuMhC;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,GAAG,OAAO,CAAC,eAAe,CAAC,CA6IhC"}