dev-test-chrome

Inspect console messages, network requests, and JavaScript in Chrome.

19|5|Updated Jan 4, 2026
One-click install
npx skills add https://github.com/edwinhu/workflows --skill dev-test-chrome
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dev-test-chrome
Source: https://github.com/edwinhu/workflows/tree/main/lib/skills/dev-test-chrome
Command: npx skills add https://github.com/edwinhu/workflows --skill dev-test-chrome

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of debugging web applications directly within the Chrome browser, offering powerful tools for inspecting console errors, monitoring network requests, and executing JavaScript.

Core Features & Use Cases

  • Console Debugging: Automatically capture and analyze console.log, console.error, and other messages.
  • Network Inspection: Monitor API calls, XHR, and Fetch requests to understand data flow.
  • JavaScript Execution: Run custom JavaScript in the browser's context to test logic or verify state.
  • GIF Recording: Create visual evidence of user interactions and test flows.
  • Use Case: When a web application is behaving unexpectedly, use this Skill to pinpoint the exact JavaScript error in the console or identify a failed API request that's causing the issue.

Quick Start

Use the dev-test-chrome skill to navigate to https://example.com and check for any console errors.

Frequently Asked Questions about dev-test-chrome

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

FAQPage Schema
How do I debug web applications by inspecting console logs and network requests in Chrome?

You can debug web applications in Chrome by using MCP tools to automatically capture console messages and monitor network requests. This allows you to pinpoint exact JavaScript errors or failed API calls within a visible browser instance.

Can I execute custom JavaScript in the browser context to test application state?

Yes, you can execute custom JavaScript in the browser context to test application logic or verify state. The Skill supports running scripts directly within Chrome to interact with your web application during debugging workflows.

What is the best way to capture visual evidence of user interactions during web testing?

The best way to capture visual evidence of user interactions during web testing is using GIF recording. The Skill supports creating GIF recordings of interactive debugging workflows and test flows to document behavior.

Does this Chrome debugging approach require any specific browser extensions or dependencies?

No specific browser extensions or dependencies are required. The Skill operates using Chrome's MCP tools to facilitate in-browser debugging, network inspection, and JavaScript execution without needing additional setup.

How do I monitor API calls and Fetch requests to understand data flow in a web app?

To monitor API calls and Fetch requests, use the network inspection feature to track XHR and Fetch activity. This helps you understand data flow and identify failed API requests causing unexpected web application behavior.

Why does my web application behave unexpectedly, and how can I pinpoint the exact issue?

Your web application may behave unexpectedly due to JavaScript errors or failed API requests. You can pinpoint the exact issue by using MCP tools to inspect console errors and monitor network requests in Chrome.