using-chrome-devtools

name	using-chrome-devtools
description	Guidelines for using Chrome DevTools for debugging and testing the Canzeltly application

Using Chrome DevTools for Debugging and Testing

Chrome DevTools is essential for debugging client-side code, inspecting UI, checking console errors, and testing functionality in the Canzeltly application. Use the chrome-devtools MCP server tools for automated assistance with browser-based debugging.

Assume the Development Server is Running

You should assume that I am already running the development server. If think the server is not running, stop and ask me to start it. The server is running on http://localhost:3000.

Opening URLs in the Browser

Use the browser to navigate to key application paths for testing:

• Home Page: http://localhost:3000/ - The main landing page.
• Create Game: http://localhost:3000/create-game - Page for creating new games.
• Play Game: http://localhost:3000/play/game/quickstart-testing/player/0c61f613-b5cd-4745-b0a3-a2595dace014 - Example game URL for testing gameplay.
• Saved Games: http://localhost:3000/saved-games - View and manage saved games.

Open these URLs in Chrome to access the application.

Using Chrome DevTools

Use the chrome-devtools MCP server tools to automate browser interactions, inspect the application, and debug issues. The server provides programmatic access to Chrome DevTools functionality.

Key Tools for Debugging

• take_snapshot: Capture the accessibility tree of the page to inspect UI elements. Use this to identify elements by their unique uid for further actions. Prefer this over screenshots for element selection.