# Variable Inspection Testing Guide
## Overview
This document provides comprehensive testing instructions for the variable inspection system in the debugger MCP server. The system has been tested with real React/Next.js applications to ensure it works correctly in production scenarios.
## Test Components
### 1. VariableTestComponent (`test-app/components/VariableTestComponent.tsx`)
A comprehensive React component that includes:
- **State Variables**: `count`, `message`, `isLoading`, `selectedUser`, `formData`
- **Local Variables**: `localString`, `localNumber`, `localBoolean`, `localArray`, `localObject`
- **Computed Values**: `expensiveCalculation`, `filteredUsers` (using `useMemo`)
- **Callback Functions**: `handleIncrement`, `handleDecrement`, `handleUserSelect` (using `useCallback`)
- **Effect Hooks**: Component lifecycle and state change effects
- **Async Functions**: `handleAsyncOperation` with complex error handling
- **Nested Functions**: `processComplexData` with deep variable nesting
### 2. VariableTestPage (`test-app/pages/variable-test.tsx`)
A Next.js page that demonstrates:
- **Server-Side Variables**: Variables from `getServerSideProps`
- **Page-Level State**: Global state management across components
- **Complex Data Flows**: User management, analytics generation
- **Real-Time Updates**: State synchronization between parent and child components
### 3. Test Script (`test-app/test-variable-inspection.js`)
An automated test suite that validates:
- Variable inspection across different scopes
- Watch expression management
- Expression evaluation
- Variable modification
- Scope chain inspection
## Testing Scenarios
### Scenario 1: Basic Variable Inspection
**Objective**: Verify that the debugger can inspect variables in different scopes.
**Test Steps**:
1. Set breakpoint in `VariableTestComponent` render method
2. Trigger component re-render
3. Use `inspect-variables` tool to examine local scope
4. Verify all expected variables are present with correct types
**Expected Variables**:
```typescript
{
localString: "This is a local string variable",
localNumber: 42,
localBoolean: true,
localArray: [1, 2, 3, "four", { five: 5 }],
localObject: { nested: { deeply: { value: "deep value" } } }
}
```
### Scenario 2: React State Inspection
**Objective**: Verify inspection of React state variables and hooks.
**Test Steps**:
1. Set breakpoint inside `useState` setter function
2. Trigger state update (e.g., click increment button)
3. Inspect variables in the callback scope
4. Verify state variables and their current values
**Expected State Variables**:
```typescript
{
count: number,
message: string,
isLoading: boolean,
selectedUser: User | null,
formData: { name: string, email: string, preferences: object }
}
```
### Scenario 3: Async Function Variable Inspection
**Objective**: Test variable inspection in async functions and Promise contexts.
**Test Steps**:
1. Set breakpoint inside `handleAsyncOperation`
2. Click "Start Async Operation" button
3. Inspect variables at different points in the async flow
4. Verify local variables, try-catch variables, and Promise resolution data
**Expected Async Variables**:
```typescript
{
operationId: string,
startTime: number,
endTime: number,
duration: number,
result: { operationId: string, duration: number, success: boolean }
}
```
### Scenario 4: Watch Expression Testing
**Objective**: Verify watch expression functionality with complex expressions.
**Test Expressions**:
```javascript
// Simple expressions
count * 2
users.length
formData.name + " " + formData.email
// Complex expressions
localArray.filter(x => typeof x === "number")
pageMetadata.interactions > 5
Object.keys(localObject.nested)
// Function calls
new Date().toISOString()
Math.max(...localArray.filter(x => typeof x === "number"))
JSON.stringify(formData, null, 2)
```
### Scenario 5: Variable Modification Testing
**Objective**: Test the ability to modify variables during debugging.
**Test Steps**:
1. Set breakpoint in component
2. Use `modify-variable` tool to change state variables
3. Continue execution and verify UI reflects changes
4. Test modification of different variable types
**Modification Tests**:
```typescript
// Modify primitive values
count: 42 → 100
message: "Hello" → "Modified message"
isLoading: false → true
// Modify object properties
formData.name: "" → "Test User"
localObject.nested.deeply.value: "deep value" → "modified deep value"
```
### Scenario 6: Scope Chain Inspection
**Objective**: Verify complete scope chain access and navigation.
**Test Steps**:
1. Set breakpoint in nested function (e.g., inside `processComplexData`)
2. Use `get-scope-chain` tool to retrieve all scopes
3. Inspect variables in each scope level
4. Verify scope hierarchy and variable accessibility
**Expected Scope Chain**:
```typescript
[
{ type: "local", variableCount: 15, objectId: "scope_local_123" },
{ type: "closure", variableCount: 8, objectId: "scope_closure_456" },
{ type: "global", variableCount: 50, objectId: "scope_global_789" }
]
```
## Performance Testing
### Memory Usage
Test variable inspection with large datasets:
```typescript
// Generate large arrays and objects
const largeArray = Array.from({ length: 10000 }, (_, i) => ({ id: i, data: `item_${i}` }));
const deepObject = { level1: { level2: { level3: { level4: { level5: "deep" } } } } };
```
### Cache Performance
Verify variable caching works correctly:
1. Inspect same scope multiple times
2. Verify subsequent calls use cache
3. Test cache invalidation on variable modification
4. Monitor cache memory usage
### Real-Time Updates
Test watch expression evaluation performance:
1. Add multiple watch expressions
2. Trigger rapid state changes
3. Verify watch expressions update correctly
4. Monitor evaluation performance
## Error Handling Testing
### Invalid Expressions
Test error handling for invalid watch expressions:
```javascript
// Syntax errors
"invalid.syntax.."
"unclosed.function("
// Runtime errors
"undefinedVariable.property"
"null.someMethod()"
// Type errors
"string.map(x => x)"
"number.filter(x => x > 5)"
```
### Debugger State Errors
Test error handling when debugger is not in expected state:
1. Try variable inspection when not paused
2. Try to modify read-only variables
3. Try to access invalid call frames
4. Try to inspect non-existent scopes
## Integration Testing
### Chrome DevTools Protocol
Verify CDP integration works correctly:
1. Test with different Chrome versions
2. Verify CDP message format compliance
3. Test connection recovery after disconnection
4. Verify proper cleanup on session end
### MCP Server Integration
Test MCP tool integration:
1. Verify all tools are properly registered
2. Test tool parameter validation
3. Test tool response format compliance
4. Verify error propagation through MCP layer
## Automated Testing
### Unit Tests
Run the comprehensive unit test suite:
```bash
npm test tests/VariableManager.test.ts
npm test tests/ChromeDebugger.variables.test.ts
npm test tests/variable-inspection-e2e.test.ts
```
### Integration Tests
Run the automated test script:
```bash
node test-app/test-variable-inspection.js
```
### Manual Testing Checklist
- [ ] Basic variable inspection works
- [ ] React state variables are accessible
- [ ] Hook variables (useMemo, useCallback) are inspectable
- [ ] Async function variables are accessible
- [ ] Watch expressions can be added/removed/evaluated
- [ ] Variable modification works and reflects in UI
- [ ] Scope chain navigation works correctly
- [ ] Error handling works for invalid operations
- [ ] Performance is acceptable with large datasets
- [ ] Cache behavior is correct
- [ ] Real-time updates work properly
## Troubleshooting
### Common Issues
1. **Variables not showing**: Ensure debugger is paused and call frame is valid
2. **Watch expressions not evaluating**: Check expression syntax and variable scope
3. **Modification not working**: Verify variable is writable and scope is accessible
4. **Performance issues**: Check cache configuration and dataset size
### Debug Commands
```bash
# Enable debug logging
DEBUG=debugger-mcp:* npm start
# Check MCP server status
curl http://localhost:3000/health
# Verify Chrome DevTools connection
chrome://inspect/#devices
```
## Conclusion
The variable inspection system has been thoroughly tested with real React/Next.js applications and demonstrates robust functionality across all major use cases. The test suite provides comprehensive coverage of variable inspection, watch expressions, expression evaluation, and variable modification scenarios.
