بنقرة واحدة
using-chrome-devtools
Guidelines for using Chrome DevTools for debugging and testing the Canzeltly application
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Guidelines for using Chrome DevTools for debugging and testing the Canzeltly application
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Create and update instructions, skills, and prompts for GitHub Copilot
Create a new feature
How to create a new type of game object
How to create a new type of affect
How to create a new type of affector
How to create a new event
استنادا إلى تصنيف SOC المهني
| name | using-chrome-devtools |
| description | Guidelines for using Chrome DevTools for debugging and testing the Canzeltly application |
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.
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.
Use the browser to navigate to key application paths for testing:
http://localhost:3000/ - The main landing page.http://localhost:3000/create-game - Page for creating new games.http://localhost:3000/play/game/quickstart-testing/player/0c61f613-b5cd-4745-b0a3-a2595dace014 - Example game URL for testing gameplay.http://localhost:3000/saved-games - View and manage saved games.Open these URLs in Chrome to access the application.
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.
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.
evaluate_script: Run JavaScript code in the page context to inspect or modify the application state. For example, execute () => { return document.title; } to get the page title, or interact with the game's internal state.
list_console_messages: Retrieve console logs, errors, and warnings from the browser. Filter by type (e.g., 'error', 'warn') to focus on issues. Use this to check for JavaScript errors during gameplay or page loads.
take_screenshot: Capture visual screenshots of the page or specific elements. Use fullPage=true for complete page views, or specify a uid for element-focused captures. Useful for verifying UI rendering or capturing bug states.
performance_start_trace and performance_stop_trace: Record performance traces to analyze load times, Core Web Vitals (CWV), and insights. Start a trace before navigating to a page, then stop and review for bottlenecks in game loading or rendering.
list_network_requests: Inspect network activity, such as API calls for game data or asset loading. Filter by resource type (e.g., 'script', 'image') to debug loading issues.
navigate_page: Programmatically navigate to application URLs. Use this to test routing, e.g., navigate to http://localhost:3000/play/game/quickstart-testing/player/0c61f613-b5cd-4745-b0a3-a2595dace014 and observe behavior.
click, fill, press_key: Interact with the UI to simulate user actions, such as creating a game, playing moves, or submitting forms. Combine with snapshots to select elements accurately.
Inspect Page Structure: Start by taking a snapshot of the page to understand the DOM and identify key elements (e.g., game canvas, buttons).
Check for Errors: List console messages to catch JavaScript errors or warnings that might affect gameplay.
Test Interactions: Use click, fill, or press_key to simulate user inputs, then verify with screenshots or script evaluations.
Analyze Performance: Run performance traces on key pages (e.g., game creation or playback) to identify slow-loading assets or inefficient code.
Monitor Network: List network requests during page loads or game actions to ensure assets and data are loading correctly.
Debug Specific Issues: For visual bugs, take screenshots; for logic issues, evaluate scripts to inspect variables or call functions.
"chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] }.--headless=false if you need to see the browser UI manually.DEBUG=* and --log-file.--browser-url=http://127.0.0.1:9222 after starting Chrome with remote debugging.uids.includeSnapshot=true in interaction tools to update the snapshot automatically.For tool-specific parameters and examples, refer to the Chrome DevTools MCP Tool Reference.