MCP ACS Debugger Server - Images & Screenshots

December 12, 2025 ยท View on GitHub

This directory contains images, screenshots, and animated GIFs for the MCP ACS Debugger Server documentation.

Required Images

To complete the documentation, please add the following images:

1. Debugging Session Demo

Filename: debugging-session.gif or debugging-session.png Description: Shows a complete debugging session including:

  • Starting a debug session
  • Setting a breakpoint
  • Pausing at the breakpoint
  • Inspecting variables
  • Stepping through code

Recommended Size: 800x400px or larger Format: Animated GIF (preferred) or PNG

2. Hang Detection Demo

Filename: hang-detection.gif or hang-detection.png Description: Demonstrates hang detection in action:

  • Running a script with an infinite loop
  • Hang detection triggering
  • Displaying the hang location and stack trace

Recommended Size: 800x400px or larger Format: Animated GIF (preferred) or PNG

3. TypeScript Debugging Demo

Filename: typescript-debugging.gif or typescript-debugging.png Description: Shows TypeScript debugging with source maps:

  • Setting breakpoints in .ts files
  • Inspecting variables with TypeScript names
  • Source map location mapping

Recommended Size: 800x400px or larger Format: Animated GIF (preferred) or PNG

4. AI Agent Integration

Filename: ai-agent-integration.gif or ai-agent-integration.png Description: Shows an AI agent using the debugger:

  • AI agent receiving debugging request
  • Agent using MCP tools
  • Debugging results displayed to user

Recommended Size: 800x400px or larger Format: Animated GIF (preferred) or PNG

5. Performance Profiling

Filename: performance-profiling.gif or performance-profiling.png Description: Demonstrates performance profiling:

  • Starting CPU profiling
  • Running code
  • Viewing profiling results
  • Identifying bottlenecks

Recommended Size: 800x400px or larger Format: Animated GIF (preferred) or PNG

Creating Screenshots

Tools for Creating Animated GIFs

  1. macOS:

    • Kap - Free, open-source screen recorder
    • LICEcap - Simple GIF recorder
    • Gifox - Professional GIF recorder

  2. Windows:

  3. Linux:

Best Practices

  1. Resolution: Use at least 800x400px, preferably 1200x600px
  2. Frame Rate: 10-15 FPS for GIFs (keeps file size reasonable)
  3. Duration: Keep GIFs under 30 seconds
  4. File Size: Optimize GIFs to be under 5MB
  5. Quality: Use high contrast and readable text
  6. Annotations: Add arrows or highlights to draw attention to key features

Recording Tips

  1. Clean Environment: Use a clean terminal/editor with minimal distractions
  2. Readable Text: Use a large font size (14-16pt minimum)
  3. Smooth Actions: Move slowly and deliberately
  4. Pause Between Actions: Give viewers time to see what's happening
  5. Show Results: Always show the outcome of actions

Optimization

After creating GIFs, optimize them:

# Using gifsicle (install via brew/apt/choco)
gifsicle -O3 --colors 256 input.gif -o output.gif

# Using ImageMagick
convert input.gif -fuzz 10% -layers Optimize output.gif

Updating the README

Once you've added images, update the main README.md:

  1. Replace placeholder image URLs with actual image paths:

    ![Debugging Session](./images/debugging-session.gif)

  2. Add alt text for accessibility:

    ![Debugging Session - Setting breakpoints and inspecting variables](./images/debugging-session.gif)

  3. Consider adding captions:

    ![Debugging Session](./images/debugging-session.gif)
*Setting breakpoints and inspecting variables in a Node.js application*

Image Checklist

  • Debugging session demo (GIF or PNG)
  • Hang detection demo (GIF or PNG)
  • TypeScript debugging demo (GIF or PNG)
  • AI agent integration demo (GIF or PNG)
  • Performance profiling demo (GIF or PNG)
  • All images optimized for web
  • All images have descriptive filenames
  • README.md updated with actual image paths
  • Alt text added for accessibility

Questions?

If you need help creating or optimizing images, please: