skills.rest
ViperJuice
ViperJuiceCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-devtools-debugging

Inspect console logs, network traffic, and performance via Chrome DevTools Protocol.

8|1|Updated Jul 11, 2025
Search Tags:#debugging#mcp#web-development#chrome-devtools#network-inspection#browser-debugging#console-analysis
One-click install
npx skills add https://github.com/ViperJuice/treesitter-chunker --skill chrome-devtools-debugging-viperjuice
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools-debugging
Source: https://github.com/ViperJuice/treesitter-chunker/tree/main/.ai-dev-kit/skills/chrome-devtools-debugging
Command: npx skills add https://github.com/ViperJuice/treesitter-chunker --skill chrome-devtools-debugging-viperjuice

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging and analysis of web applications via the Chrome DevTools Protocol to inspect runtime behavior and performance.

Core Features & Use Cases

  • Console inspection: view errors, warnings, and logs from the browser context.
  • Network analysis: monitor HTTP requests and responses, headers, and payloads.
  • Performance tracing: record and analyze page load and runtime performance.
  • JavaScript evaluation: execute code in the page context and inspect results.
  • Authenticated session debugging: inspect state in browsers with active sessions.

Quick Start

Connect to a running Chrome instance with remote debugging enabled and start exploring console, network, and performance data.

Frequently Asked Questions about chrome-devtools-debugging

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

FAQPage Schema
How do I debug web applications using Chrome DevTools Protocol?▼

Monitor HTTP requests and responses by connecting to a running Chrome instance with remote debugging enabled, then capture headers and payloads via the DevTools Protocol.

Can I inspect console logs and network traffic for authenticated sessions?▼

Inspect console logs and network traffic for authenticated sessions by connecting the Chrome DevTools Protocol to a browser with active sessions and monitoring runtime behavior.

What do I need to start browser debugging with Chrome DevTools MCP?▼

To start browser debugging with Chrome DevTools MCP, you need a running Chrome instance with remote debugging enabled and the MCP wrappers for Python to drive the DevTools protocol.

How do I trace page load performance during web development?▼

Trace page load performance during web development by recording and analyzing runtime performance data captured directly from the Chrome DevTools Protocol interface.

Can I execute JavaScript code and inspect results in the browser context?▼

Execute JavaScript code in the browser context and inspect results by sending evaluation commands through the Chrome DevTools Protocol to the target page.

Related Skills

Explore More Software Engineering Skills→
ConsiliencyConsiliency
8

chrome-devtools-debugging

Debug web applications via Chrome DevTools Protocol with console and network inspection.

Official
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced