{"id":"aa0ef4c9-cb5e-418d-83bb-01254dd4b398","shortId":"4BCzkz","kind":"skill","title":"chrome-devtools","tagline":"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.","description":"# Chrome DevTools Agent\n\n## Overview\n\nA 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.\n\n## When to Use\n\nUse this skill when:\n\n- **Browser Automation**: Navigating pages, clicking elements, filling forms, and handling dialogs.\n- **Visual Inspection**: Taking screenshots or text snapshots of web pages.\n- **Debugging**: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.\n- **Performance Analysis**: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.\n- **Emulation**: Resizing the viewport or emulating network/CPU conditions.\n\n## Tool Categories\n\n### 1. Navigation & Page Management\n\n- `new_page`: Open a new tab/page.\n- `navigate_page`: Go to a specific URL, reload, or navigate history.\n- `select_page`: Switch context between open pages.\n- `list_pages`: See all open pages and their IDs.\n- `close_page`: Close a specific page.\n- `wait_for`: Wait for specific text to appear on the page.\n\n### 2. Input & Interaction\n\n- `click`: Click on an element (use `uid` from snapshot).\n- `fill` / `fill_form`: Type text into inputs or fill multiple fields at once.\n- `hover`: Move the mouse over an element.\n- `press_key`: Send keyboard shortcuts or special keys (e.g., \"Enter\", \"Control+C\").\n- `drag`: Drag and drop elements.\n- `handle_dialog`: Accept or dismiss browser alerts/prompts.\n- `upload_file`: Upload a file through a file input.\n\n### 3. Debugging & Inspection\n\n- `take_snapshot`: Get a text-based accessibility tree (best for identifying elements).\n- `take_screenshot`: Capture a visual representation of the page or a specific element.\n- `list_console_messages` / `get_console_message`: Inspect the page's console output.\n- `evaluate_script`: Run custom JavaScript in the page context.\n- `list_network_requests` / `get_network_request`: Analyze network traffic and request details.\n\n### 4. Emulation & Performance\n\n- `resize_page`: Change the viewport dimensions.\n- `emulate`: Throttling CPU/Network or emulating geolocation.\n- `performance_start_trace`: Start recording a performance profile.\n- `performance_stop_trace`: Stop recording and save the trace.\n- `performance_analyze_insight`: Get detailed analysis from recorded performance data.\n\n## Workflow Patterns\n\n### Pattern A: Identifying Elements (Snapshot-First)\n\nAlways prefer `take_snapshot` over `take_screenshot` for finding elements. The snapshot provides `uid` values which are required by interaction tools.\n\n```markdown\n1. `take_snapshot` to get the current page structure.\n2. Find the `uid` of the target element.\n3. Use `click(uid=...)` or `fill(uid=..., value=...)`.\n```\n\n### Pattern B: Troubleshooting Errors\n\nWhen a page is failing, check both console logs and network requests.\n\n```markdown\n1. `list_console_messages` to check for JavaScript errors.\n2. `list_network_requests` to identify failed (4xx/5xx) resources.\n3. `evaluate_script` to check the value of specific DOM elements or global variables.\n```\n\n### Pattern C: Performance Profiling\n\nIdentify why a page is slow.\n\n```markdown\n1. `performance_start_trace(reload=true, autoStop=true)`\n2. Wait for the page to load/trace to finish.\n3. `performance_analyze_insight` to find LCP issues or layout shifts.\n```\n\n## Best Practices\n\n- **Context Awareness**: Always run `list_pages` and `select_page` if you are unsure which tab is currently active.\n- **Snapshots**: Take a new snapshot after any major navigation or DOM change, as `uid` values may change.\n- **Timeouts**: Use reasonable timeouts for `wait_for` to avoid hanging on slow-loading elements.\n- **Screenshots**: Use `take_screenshot` sparingly for visual verification, but rely on `take_snapshot` for logic.","tags":["chrome","devtools","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-chrome-devtools","topic-agent-skills","topic-agents","topic-awesome","topic-custom-agents","topic-github-copilot","topic-hacktoberfest","topic-prompt-engineering"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/chrome-devtools","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add github/awesome-copilot","source_repo":"https://github.com/github/awesome-copilot","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 33270 github stars · SKILL.md body (3,876 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:52:06.750Z","embedding":null,"createdAt":"2026-04-18T20:24:57.297Z","updatedAt":"2026-05-18T18:52:06.750Z","lastSeenAt":"2026-05-18T18:52:06.750Z","tsv":"'1':139,393,435,478 '2':193,402,444,486 '3':258,410,453,495 '4':320 '4xx/5xx':451 'accept':244 'access':268 'activ':525 'agent':33 'alerts/prompts':248 'alway':371,510 'analysi':12,115,357 'analyz':25,111,118,314,353,497 'appear':189 'autom':8,80 'autostop':484 'avoid':551 'awar':509 'b':419 'base':267 'best':270,506 'bottleneck':123 'browser':7,45,62,79,247 'browser-rel':61 'c':236,468 'captur':23,276 'categori':138 'chang':325,537,542 'check':427,440,457 'chrome':2,14,31,44,51 'chrome-devtool':1,50 'click':83,196,197,412 'close':176,178 'complex':69 'condit':136 'consol':102,288,291,297,429,437 'context':109,163,307,508 'control':39,235 'core':125 'cpu/network':331 'current':399,524 'custom':302 'data':361 'debug':9,100,259 'detail':319,356 'devtool':3,15,32,52 'dialog':89,243 'dimens':328 'dismiss':246 'dom':462,536 'drag':237,238 'drop':240 'e.g':233 'element':84,200,224,241,273,286,367,380,409,463,557 'emul':129,134,321,329,333 'enter':234 'error':421,443 'evalu':104,299,454 'expert':5 'expert-level':4 'fail':426,450 'field':215 'file':250,253,256 'fill':85,205,206,213,415 'find':379,403,500 'finish':494 'first':370 'form':86,207 'geoloc':334 'get':263,290,311,355,397 'global':465 'go':151 'handl':88,242 'hang':552 'histori':159 'hover':218 'id':175 'identifi':122,272,366,449,471 'input':194,211,257 'insight':354,498 'inspect':41,91,101,260,293 'interact':19,195,390 'issu':128,502 'javascript':105,303,442 'key':226,232 'keyboard':228 'layout':504 'lcp':501 'level':6 'leverag':48 'list':167,287,308,436,445,512 'live':43 'load':556 'load/trace':492 'log':430 'logic':572 'major':533 'manag':142 'markdown':392,434,477 'may':541 'mcp':16,53 'messag':103,289,292,438 'mous':221 'move':219 'multipl':214 'navig':67,81,140,149,158,534 'network':26,112,309,312,315,432,446 'network/cpu':135 'new':143,147,529 'open':145,165,171 'output':298 'overview':34 'page':22,82,99,108,141,144,150,161,166,168,172,177,181,192,282,295,306,324,400,424,474,490,513,516 'pattern':363,364,418,467 'perform':11,30,56,70,114,119,322,335,341,343,352,360,469,479,496 'practic':507 'prefer':372 'press':225 'profil':29,71,342,470 'provid':383 'rang':59 'reason':545 'record':116,339,347,359 'relat':63 'reli':567 'reload':156,482 'represent':279 'request':113,310,313,318,433,447 'requir':388 'resiz':130,323 'resourc':452 'run':301,511 'save':349 'screenshot':24,93,275,377,558,561 'script':300,455 'see':169 'select':160,515 'send':227 'server':54 'shift':505 'shortcut':229 'simpl':66 'skill':37,47,77 'skill-chrome-devtools' 'slow':476,555 'slow-load':554 'snapshot':96,204,262,369,374,382,395,526,530,570 'snapshot-first':368 'source-github' 'spare':562 'special':36,231 'specif':154,180,186,285,461 'start':336,338,480 'stop':344,346 'structur':401 'switch':162 'tab':522 'tab/page':148 'take':92,261,274,373,376,394,527,560,569 'target':408 'task':64 'text':95,187,209,266 'text-bas':265 'throttl':330 'timeout':543,546 'tool':137,391 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'trace':120,337,345,351,481 'traffic':27,316 'tree':269 'troubleshoot':420 'true':483,485 'type':208 'uid':202,384,405,413,416,539 'unsur':520 'upload':249,251 'url':155 'use':13,17,74,75,201,411,544,559 'valu':385,417,459,540 'variabl':466 'verif':565 'viewport':132,327 'visual':90,278,564 'vital':127 'wait':182,184,487,548 'web':21,98,126 'wide':58 'workflow':362","prices":[{"id":"6022c426-1463-4b3b-82c2-2775a367d996","listingId":"aa0ef4c9-cb5e-418d-83bb-01254dd4b398","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T20:24:57.297Z"}],"sources":[{"listingId":"aa0ef4c9-cb5e-418d-83bb-01254dd4b398","source":"github","sourceId":"github/awesome-copilot/chrome-devtools","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/chrome-devtools","isPrimary":false,"firstSeenAt":"2026-04-18T21:48:34.280Z","lastSeenAt":"2026-05-18T18:52:06.750Z"},{"listingId":"aa0ef4c9-cb5e-418d-83bb-01254dd4b398","source":"skills_sh","sourceId":"github/awesome-copilot/chrome-devtools","sourceUrl":"https://skills.sh/github/awesome-copilot/chrome-devtools","isPrimary":true,"firstSeenAt":"2026-04-18T20:24:57.297Z","lastSeenAt":"2026-05-07T22:40:16.133Z"}],"details":{"listingId":"aa0ef4c9-cb5e-418d-83bb-01254dd4b398","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"chrome-devtools","github":{"repo":"github/awesome-copilot","stars":33270,"topics":["agent-skills","agents","ai","awesome","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"license":"mit","html_url":"https://github.com/github/awesome-copilot","pushed_at":"2026-05-18T01:26:59Z","description":"Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.","skill_md_sha":"3e7a53f41dee505d2a4cd1a277436b249057295f","skill_md_path":"skills/chrome-devtools/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/chrome-devtools"},"layout":"multi","source":"github","category":"awesome-copilot","frontmatter":{"name":"chrome-devtools","license":"MIT","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."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/chrome-devtools"},"updatedAt":"2026-05-18T18:52:06.750Z"}}