browser-testing-with-devtools

Execute end-to-end browser tests using Chrome DevTools MCP server.

Updated Mar 1, 2026
One-click install
npx skills add https://github.com/cpfcoaching/glowing-palm-tree --skill browser-testing-with-devtools-cpfcoaching
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/cpfcoaching/glowing-palm-tree/tree/main/.agent/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/cpfcoaching/glowing-palm-tree --skill browser-testing-with-devtools-cpfcoaching

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @anthropic/chrome-devtools-mcp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows you to test and debug web applications in real browsers using Chrome DevTools, ensuring that your code behaves as expected in the live environment.

Core Features & Use Cases

  • Real Browser Testing: Execute tests in real browsers to verify UI, performance, and network behavior.
  • DevTools Integration: Leverage Chrome DevTools features like DOM inspection, console logs, network monitoring, and performance profiling.
  • Use Case: When you need to ensure that a web application's UI elements are rendering correctly, or to diagnose a performance issue like a slow load time.

Quick Start

Use the browser-testing-with-devtools skill to take a screenshot of the current page state.

Frequently Asked Questions about browser-testing-with-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test web application UI behavior in a real browser?

You can test web application UI behavior in a real browser by executing end-to-end tests with Chrome DevTools to verify DOM rendering, monitor network requests, and retrieve console logs.

How do I monitor network requests and console logs during browser testing?

Monitor network requests and retrieve console logs during browser testing by leveraging Chrome DevTools integration to inspect live application behavior and diagnose issues directly in the browser environment.

What is the best way to diagnose slow load times and web application performance issues?

Diagnose slow load times and web application performance issues by using Chrome DevTools to perform performance profiling and analyze network activity in a real browser environment.

Do I need a Chrome DevTools MCP server to run end-to-end browser tests?

Yes, you need a configured Chrome DevTools MCP server to run end-to-end browser tests, as it provides the underlying integration required to execute tests and inspect live browser behavior.

Can I take screenshots to verify UI rendering when testing with Chrome DevTools?

Yes, you can take screenshots to capture the current page state and verify that your web application's UI elements are rendering correctly during real browser testing.

How does DOM inspection work when debugging a web application in a live environment?

DOM inspection works by allowing you to execute tests in real browsers using Chrome DevTools to inspect live elements, ensuring your code behaves as expected in the live environment.