菜单
Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| description | Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance. |
| license | MIT |
| metadata | {"github-path":"skills/chrome-devtools","github-ref":"refs/heads/main","github-repo":"https://github.com/github/awesome-copilot","github-tree-sha":"1425ccd89c83988f6bdbc9e801f81e9f1faf86ea"} |
| name | chrome-devtools |
A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the chrome-devtools MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.
Use this skill when:
new_page: Open a new tab/page.navigate_page: Go to a specific URL, reload, or navigate history.select_page: Switch context between open pages.list_pages: See all open pages and their IDs.close_page: Close a specific page.wait_for: Wait for specific text to appear on the page.click: Click on an element (use uid from snapshot).fill / fill_form: Type text into inputs or fill multiple fields at once.hover: Move the mouse over an element.press_key: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").drag: Drag and drop elements.handle_dialog: Accept or dismiss browser alerts/prompts.upload_file: Upload a file through a file input.take_snapshot: Get a text-based accessibility tree (best for identifying elements).take_screenshot: Capture a visual representation of the page or a specific element.list_console_messages / get_console_message: Inspect the page's console output.evaluate_script: Run custom JavaScript in the page context.list_network_requests / get_network_request: Analyze network traffic and request details.resize_page: Change the viewport dimensions.emulate: Throttling CPU/Network or emulating geolocation.performance_start_trace: Start recording a performance profile.performance_stop_trace: Stop recording and save the trace.performance_analyze_insight: Get detailed analysis from recorded performance data.Always prefer take_snapshot over take_screenshot for finding elements. The snapshot provides uid values which are required by interaction tools.
1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.
When a page is failing, check both console logs and network requests.
1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.
Identify why a page is slow.
1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.
list_pages and select_page if you are unsure which tab is currently active.uid values may change.wait_for to avoid hanging on slow-loading elements.take_screenshot sparingly for visual verification, but rely on take_snapshot for logic.General onboarding rules for AI agents in this workspace. Covers security rules, project preferences, code style standards, proven tool choices, and the startup checklist every agent should follow before doing any work.
Make any repo AI-ready — analyzes your codebase and generates AGENTS.md, copilot-instructions.md, CI workflows, issue templates, and more. Mines your PR review patterns and creates files customized to your stack. USE THIS SKILL when the user asks to "make this repo ai-ready", "set up AI config", or "prepare this repo for AI contributions".
Visual regression testing with BackstopJS for Salesforce page migrations (e.g. Visualforce to LWC). Covers setup, backstop.json config template, authentication via engine scripts, scratch org test data guidance, and the full reference-test-approve workflow.
CumulusCI patterns for Salesforce scratch org development. Covers deploy strategy (incremental vs full rebuild), Apex test execution with CCI and SF CLI, code coverage queries, field/object metadata gotchas, Flow and metadata cleanup, and the Salesforce Code Analyzer workflow. Activate for any cci or sf deployment, testing, or metadata task.
Apex code quality guardrails for Salesforce development. Enforces bulk-safety rules (no SOQL/DML in loops), sharing model requirements, CRUD/FLS security, SOQL injection prevention, PNB test coverage (Positive / Negative / Bulk), and modern Apex idioms. Use this skill when reviewing or generating Apex classes, trigger handlers, batch jobs, or test classes to catch governor limit risks, security gaps, and quality issues before deployment.
Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Covers SLDS 2 compliance, accessibility (WCAG 2.1 AA), data access pattern selection, component communication rules, XSS prevention, CSRF enforcement, FLS/CRUD in AuraEnabled methods, view state management, and Jest test requirements. Use this skill when building or reviewing any Salesforce UI component to enforce platform-specific security and quality standards.