# Breakpoint Management Examples
This document provides comprehensive examples of using the breakpoint management features in the Debugger MCP Server.
## Basic Breakpoint Operations
### Setting a Simple Breakpoint
```
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/components/UserProfile.tsx",
"lineNumber": 42
}
```
**Response:**
```json
{
"success": true,
"message": "Breakpoint set at src/components/UserProfile.tsx:42",
"breakpoint": {
"id": "bp-1703123456789-abc123",
"location": {
"filePath": "src/components/UserProfile.tsx",
"lineNumber": 42,
"columnNumber": 0
},
"options": {
"enabled": true
},
"hitCount": 0,
"enabled": true,
"timestamp": "2024-01-15T10:30:45.123Z"
}
}
```
### Setting a Breakpoint by URL
```
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"url": "http://localhost:3000/static/js/main.chunk.js",
"lineNumber": 150,
"columnNumber": 25
}
```
## Advanced Breakpoint Features
### Conditional Breakpoints
Set a breakpoint that only triggers when a specific condition is met:
```
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/utils/api.ts",
"lineNumber": 28
}
- options: {
"condition": "response.status >= 400",
"enabled": true
}
```
**Common conditional expressions:**
- `user.isAdmin === true` - Only break for admin users
- `items.length > 10` - Break when array has more than 10 items
- `error !== null` - Break when an error occurs
- `process.env.NODE_ENV === 'development'` - Only break in development
### Logpoints (Non-intrusive Debugging)
Set logpoints to output debug information without stopping execution:
```
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/hooks/useAuth.ts",
"lineNumber": 35
}
- options: {
"logMessage": "Authentication attempt: user=${user.email}, success=${isSuccess}",
"enabled": true
}
```
**Logpoint message examples:**
- `"API call: ${method} ${url} - Status: ${response.status}"`
- `"State update: ${JSON.stringify(newState)}"`
- `"User action: ${action.type} with payload ${JSON.stringify(action.payload)}"`
### Hit Count Conditions
Set breakpoints that trigger after a specific number of hits:
```
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/components/DataTable.tsx",
"lineNumber": 67
}
- options: {
"hitCountCondition": ">5",
"enabled": true
}
```
**Hit count operators:**
- `>10` - Break after more than 10 hits
- `==5` - Break only on the 5th hit
- `%3==0` - Break every 3rd hit
## Breakpoint Management
### Listing All Breakpoints
```
Use the manage-breakpoints tool with:
- action: "list"
```
**Response:**
```json
{
"success": true,
"message": "Found 3 breakpoint(s)",
"breakpoints": [
{
"id": "bp-1703123456789-abc123",
"location": {
"filePath": "src/components/UserProfile.tsx",
"lineNumber": 42
},
"options": {
"enabled": true
},
"hitCount": 7,
"enabled": true,
"timestamp": "2024-01-15T10:30:45.123Z"
}
]
}
```
### Removing a Specific Breakpoint
```
Use the manage-breakpoints tool with:
- action: "remove"
- breakpointId: "bp-1703123456789-abc123"
```
### Clearing All Breakpoints
```
Use the manage-breakpoints tool with:
- action: "clear"
```
### Toggling Breakpoints On/Off
```
# Disable all breakpoints
Use the manage-breakpoints tool with:
- action: "toggle"
- active: false
# Re-enable all breakpoints
Use the manage-breakpoints tool with:
- action: "toggle"
- active: true
```
## Breakpoint Analytics
### Getting Analytics Data
```
Use the manage-breakpoints tool with:
- action: "analytics"
```
**Response:**
```json
{
"success": true,
"message": "Analytics retrieved successfully",
"analytics": {
"totalBreakpoints": 5,
"activeBreakpoints": 4,
"totalHits": 127,
"averageHitsPerBreakpoint": 25.4,
"mostHitBreakpoint": {
"id": "bp-1703123456789-abc123",
"location": {
"filePath": "src/utils/api.ts",
"lineNumber": 28
},
"hitCount": 45
},
"recentHits": [
{
"breakpointId": "bp-1703123456789-abc123",
"timestamp": "2024-01-15T10:35:22.456Z",
"reason": "breakpoint"
}
],
"hitsByFile": {
"src/utils/api.ts": 67,
"src/components/UserProfile.tsx": 34,
"src/hooks/useAuth.ts": 26
},
"hitsByHour": {
"2024-01-15T10": 45,
"2024-01-15T11": 32,
"2024-01-15T12": 50
}
}
}
```
## Real-World Debugging Scenarios
### Debugging API Issues
```
# Set a conditional breakpoint for failed API calls
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/services/apiClient.ts",
"lineNumber": 45
}
- options: {
"condition": "response.status >= 400 || response.status < 200",
"logMessage": "API Error: ${response.status} ${response.statusText} for ${url}"
}
```
### Debugging React Component Renders
```
# Set a logpoint to track component re-renders
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/components/ExpensiveComponent.tsx",
"lineNumber": 15
}
- options: {
"logMessage": "Component render: props=${JSON.stringify(props)}, state=${JSON.stringify(state)}"
}
```
### Debugging Authentication Flow
```
# Set breakpoints at key authentication points
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/hooks/useAuth.ts",
"lineNumber": 25
}
- options: {
"condition": "!user && token",
"logMessage": "Auth state mismatch: token exists but no user"
}
```
### Performance Debugging
```
# Set a hit count breakpoint to catch performance issues
Use the manage-breakpoints tool with:
- action: "set"
- location: {
"filePath": "src/utils/heavyComputation.ts",
"lineNumber": 10
}
- options: {
"hitCountCondition": ">100",
"logMessage": "Heavy computation called ${hitCount} times - potential performance issue"
}
```
## Best Practices
1. **Use Conditional Breakpoints**: Instead of breaking on every execution, use conditions to focus on specific scenarios.
2. **Leverage Logpoints**: For production debugging or when you don't want to interrupt execution flow.
3. **Monitor Analytics**: Regularly check breakpoint analytics to understand code execution patterns.
4. **Clean Up**: Remove or disable breakpoints when debugging is complete to avoid performance impact.
5. **Use Descriptive Conditions**: Write clear, readable conditions that make debugging intent obvious.
6. **Combine Techniques**: Use multiple breakpoint types together for comprehensive debugging coverage.
## Troubleshooting
### Breakpoint Not Hitting
1. Verify the file path and line number are correct
2. Check if the breakpoint is enabled
3. Ensure the Chrome debugger is connected
4. Verify the condition (if any) is valid JavaScript
### Performance Impact
1. Use logpoints instead of regular breakpoints when possible
2. Remove unused breakpoints
3. Use conditional breakpoints to reduce hit frequency
4. Monitor breakpoint analytics for overused breakpoints
### Condition Errors
1. Test conditions in the browser console first
2. Use simple expressions when possible
3. Check variable names and scope
4. Escape special characters in strings properly
