skills.rest
Consiliency
ConsiliencyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

chrome-devtools-debugging

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers and QA engineers debug and analyze web applications by leveraging Chrome's DevTools Protocol via the MCP wrapper, enabling quick access to debugging data with minimal manual setup.

Core Features & Use Cases

  • Console inspection: View errors, warnings, and log messages in real time.
  • Network analysis: Monitor HTTP requests, headers, and responses, including authenticated sessions.
  • Performance tracing: Record and analyze browser performance data.
  • JavaScript evaluation: Execute code in the browser context to inspect state.
  • Authenticated session debugging: Inspect tokens and session state for logged-in users.

Quick Start

Start Chrome with remote debugging enabled and ensure the MCP server is installed and running. Use the Python wrappers to connect and perform actions like listing console messages, examining network requests, or evaluating JavaScript in the browser context.

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?▼

Chrome DevTools debugging inspects running web apps through the DevTools Protocol, letting you monitor console messages, network requests, performance data, and JavaScript state in real time without manual log parsing.

Can I monitor network requests and inspect authenticated sessions?▼

Yes, network analysis via Chrome DevTools captures HTTP requests, headers, responses, and session tokens for logged-in users, enabling inspection of authentication state and API interactions.

What do I need to set up before debugging with Chrome DevTools?▼

Enable remote debugging on Chrome, install and run the MCP server, and ensure Python wrappers can access it; these prerequisites let you connect and execute debugging actions programmatically.

How do I evaluate JavaScript and check app state during debugging?▼

JavaScript evaluation executes code in the browser context through DevTools, retrieving variable values, object properties, and runtime state without stopping execution or adding breakpoints.

What performance data can I capture and analyze?▼

Performance tracing records browser metrics like load times, rendering, and resource usage; export and analyze this data to identify bottlenecks and optimize web app responsiveness.

Does Chrome DevTools debugging work for console errors and warnings?▼

Console inspection displays real-time errors, warnings, and log messages from the running app, surfacing issues that would otherwise require manual browser inspection or external logging.

Related Skills

Explore More Software Engineering Skills→
ViperJuiceViperJuice
8

chrome-devtools-debugging

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

Community
Intermediate
harishgovardhandamodarharishgovardhandamodar

browser-testing-with-devtools

Inspect live web applications with Chrome DevTools MCP for debugging.

Community
Advanced
zhouxiuminzhouxiumin

chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP protocol.

Community
Advanced
sanand0sanand0
11

devtools

Control Chrome via DevTools Protocol for browser testing and debugging.

Community
Advanced