{"id":"aa0ef4c9-cb5e-418d-83bb-01254dd4b398","shortId":"4BCzkz","kind":"skill","title":"Chrome Devtools","tagline":"Awesome Copilot skill by Github","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"],"capabilities":["skill","source-github","category-awesome-copilot"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/chrome-devtools","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under github/awesome-copilot","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:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T19:40:25.594Z","embedding":null,"createdAt":"2026-04-18T20:24:57.297Z","updatedAt":"2026-04-22T19:40:25.594Z","lastSeenAt":"2026-04-22T19:40:25.594Z","tsv":"'1':116,370,412,455 '2':170,379,421,463 '3':235,387,430,472 '4':297 '4xx/5xx':428 'accept':221 'access':245 'activ':502 'agent':10 'alerts/prompts':225 'alway':348,487 'analysi':92,334 'analyz':88,95,291,330,474 'appear':166 'autom':57 'autostop':461 'avoid':528 'awar':486 'awesom':3 'b':396 'base':244 'best':247,483 'bottleneck':100 'browser':22,39,56,224 'browser-rel':38 'c':213,445 'captur':253 'categori':115 'category-awesome-copilot' 'chang':302,514,519 'check':404,417,434 'chrome':1,8,21,28 'chrome-devtool':27 'click':60,173,174,389 'close':153,155 'complex':46 'condit':113 'consol':79,265,268,274,406,414 'context':86,140,284,485 'control':16,212 'copilot':4 'core':102 'cpu/network':308 'current':376,501 'custom':279 'data':338 'debug':77,236 'detail':296,333 'devtool':2,9,29 'dialog':66,220 'dimens':305 'dismiss':223 'dom':439,513 'drag':214,215 'drop':217 'e.g':210 'element':61,177,201,218,250,263,344,357,386,440,534 'emul':106,111,298,306,310 'enter':211 'error':398,420 'evalu':81,276,431 'fail':403,427 'field':192 'file':227,230,233 'fill':62,182,183,190,392 'find':356,380,477 'finish':471 'first':347 'form':63,184 'geoloc':311 'get':240,267,288,332,374 'github':7 'global':442 'go':128 'handl':65,219 'hang':529 'histori':136 'hover':195 'id':152 'identifi':99,249,343,426,448 'input':171,188,234 'insight':331,475 'inspect':18,68,78,237,270 'interact':172,367 'issu':105,479 'javascript':82,280,419 'key':203,209 'keyboard':205 'layout':481 'lcp':478 'leverag':25 'list':144,264,285,413,422,489 'live':20 'load':533 'load/trace':469 'log':407 'logic':549 'major':510 'manag':119 'markdown':369,411,454 'may':518 'mcp':30 'messag':80,266,269,415 'mous':198 'move':196 'multipl':191 'navig':44,58,117,126,135,511 'network':89,286,289,292,409,423 'network/cpu':112 'new':120,124,506 'open':122,142,148 'output':275 'overview':11 'page':59,76,85,118,121,127,138,143,145,149,154,158,169,259,272,283,301,377,401,451,467,490,493 'pattern':340,341,395,444 'perform':33,47,91,96,299,312,318,320,329,337,446,456,473 'practic':484 'prefer':349 'press':202 'profil':48,319,447 'provid':360 'rang':36 'reason':522 'record':93,316,324,336 'relat':40 'reli':544 'reload':133,459 'represent':256 'request':90,287,290,295,410,424 'requir':365 'resiz':107,300 'resourc':429 'run':278,488 'save':326 'screenshot':70,252,354,535,538 'script':277,432 'see':146 'select':137,492 'send':204 'server':31 'shift':482 'shortcut':206 'simpl':43 'skill':5,14,24,54 'slow':453,532 'slow-load':531 'snapshot':73,181,239,346,351,359,372,503,507,547 'snapshot-first':345 'source-github' 'spare':539 'special':13,208 'specif':131,157,163,262,438 'start':313,315,457 'stop':321,323 'structur':378 'switch':139 'tab':499 'tab/page':125 'take':69,238,251,350,353,371,504,537,546 'target':385 'task':41 'text':72,164,186,243 'text-bas':242 'throttl':307 'timeout':520,523 'tool':114,368 'trace':97,314,322,328,458 'traffic':293 'tree':246 'troubleshoot':397 'true':460,462 'type':185 'uid':179,361,382,390,393,516 'unsur':497 'upload':226,228 'url':132 'use':51,52,178,388,521,536 'valu':362,394,436,517 'variabl':443 'verif':542 'viewport':109,304 'visual':67,255,541 'vital':104 'wait':159,161,464,525 'web':75,103 'wide':35 'workflow':339","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-04-22T18:52:47.178Z"},{"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-04-22T19:40:25.594Z"}],"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","source":"skills_sh","category":"awesome-copilot","skills_sh_url":"https://skills.sh/github/awesome-copilot/chrome-devtools"},"updatedAt":"2026-04-22T19:40:25.594Z"}}