Chrome Devtools

🌐Community
by duc01226 · vlatest · Repository

This skill utilizes Chrome DevTools to inspect and debug web pages, offering developers a powerful way to analyze website code and performance.

Install on your platform

We auto-selected Claude Code based on this skill’s supported platforms.

1

Run in terminal (recommended)

terminal
claude mcp add duc01226-chrome-devtools npx -- -y @trustedskills/duc01226-chrome-devtools
2

Or manually add to ~/.claude/settings.json

~/.claude/settings.json
{
  "mcpServers": {
    "duc01226-chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@trustedskills/duc01226-chrome-devtools"
      ]
    }
  }
}

Requires Claude Code (claude CLI). Run claude --version to verify your install.

About This Skill

What it does

This skill provides access to Chrome DevTools functionality within an AI agent. It allows you to inspect and debug web pages, analyze network requests, and evaluate JavaScript code directly from your AI interactions. This enables advanced troubleshooting and development tasks typically performed manually through a browser's developer tools.

When to use it

  • Debugging website issues: If you need to identify why a webpage isn’t loading correctly or behaving as expected.
  • Analyzing network performance: To understand the speed and efficiency of resources being loaded by a web page.
  • Evaluating JavaScript code: For testing and understanding the behavior of custom scripts on a webpage.
  • Inspecting element styles: To examine the CSS applied to specific elements within a web page.

Key capabilities

  • Inspect elements
  • Analyze network requests
  • Evaluate JavaScript
  • Examine element styles

Example prompts

  • "Inspect the 'h1' element on this webpage."
  • "Show me the network requests made when loading this page."
  • "Run this Javascript code snippet: console.log('Hello World');"
  • “What CSS is applied to the button with id ‘submit’?”

Tips & gotchas

The AI agent needs access to a browser environment or Chrome DevTools instance to utilize this skill effectively. Results are dependent on the webpage being accessible and loaded correctly within that environment.

Tags

🛡️

TrustedSkills Verification

Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.

Security Audits

Gen Agent Trust HubPass
SocketPass
SnykPass

Details

Version
vlatest
License
Author
duc01226
Installs
15

🌐 Community

Passed automated security scans.