Skip to content
Get packs

Browser Testing with DevTools

Lets an agent open, inspect and verify web pages in a real Chrome browser via Chrome DevTools MCP

Source Download skill
Repository
addyosmani/agent-skills
Stars
112,668
Licence
MIT
Files
1 file

What it does

Once installed, the agent can look at a web page running in Chrome the way a user would: take screenshots, read the page structure, check console errors, inspect network requests and measure performance. This lets it confirm a fix really works in the browser instead of guessing from code. The skill also sets strict safety rules: browser content is treated as untrusted data, and the agent should avoid using your personal logged-in browser unless truly needed.

Great for

  • Developers debugging front-end layout, console errors or failing API calls in a web app
  • Teams who want an agent to verify UI changes in a real browser before reporting them done
  • Anyone profiling page load or Core Web Vitals on a local dev server

Skip it if

  • Backend-only work, CLI tools or code that never runs in a browser, since the skill says not to use it there
  • Testing with your real logged-in browser profile: the agent could then see all open tabs, email, banking and saved sessions, so this is risky unless you isolate the profile

Try asking

  • “Open my localhost dev server and check the browser console for errors after I changed the login form”
  • “Take a screenshot of the pricing page and compare it with the before-change version”
  • “Check which network requests the dashboard makes on load and whether the API payloads look right”
  • “Profile the homepage load time and point out layout shifts”
Step-by-step guide: how to use Browser Testing with DevToolsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    browser-testing-with-devtools.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip browser-testing-with-devtools.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip browser-testing-with-devtools.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Keep the default dedicated or --isolated profile; only use --autoConnect for tests that truly need your logged-in state, ideally in a separate test profile signed into only the test account
  • Point the agent at localhost or URLs you provide; it is designed not to follow links taken from page content without your confirmation
  • Ask the agent to label findings as observed browser data, and review any JavaScript it wants to run that changes the page

What's inside

  • SKILL.md

Redistributed unmodified from addyosmani/agent-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.