Can Claude execute custom JavaScript on a page using this skill?

Yes, the skill includes a tool called evaluate_script that allows Claude to run arbitrary JavaScript in the page context to extract data or test functionality.

Does this skill require a local Chrome installation?

Yes, this skill requires Chrome or Chromium to be installed on your system and accessible via your environment's PATH to function correctly.

Can I use this to debug applications running on localhost?

Absolutely. This skill is specifically designed to navigate to and inspect local development servers like http://localhost:3000 during the coding process.

What is the difference between the 'inspect' and 'screenshot' commands?

The screenshot command only captures a visual image, while the inspect command performs a full audit including console logs, network requests, and DOM snapshots.

Chrome DevTools & Browser Automation

Name: Chrome DevTools & Browser Automation
Author: kriscard

bykriscard

•

브라우저 자동화

Inspects, debugs, and analyzes live web pages using the Chrome DevTools Protocol to resolve frontend issues directly within Claude.

The Chrome DevTools skill brings professional-grade browser inspection and automation to the Claude Code environment. It enables developers to navigate live URLs, monitor network traffic, capture console logs, and perform deep performance profiling using 26 specialized tools. Whether you are debugging a complex React application on localhost or optimizing Core Web Vitals for a production site, this skill provides the visual and technical context needed to diagnose issues, verify UI changes through screenshots, and execute JavaScript in the browser context.

주요 기능

012 GitHub stars

02Performance tracing to analyze LCP, FCP, and main-thread bottlenecks

03Comprehensive page navigation and multi-tab session management

04Real-time console monitoring for JavaScript errors and warnings

05Visual verification through full-page and viewport screenshot capture

06Detailed network request inspection including headers and payloads

사용 사례

01Investigating frontend API integration issues by monitoring network requests and response status codes

02Debugging 'Why is this page slow?' by analyzing performance traces and identifying long tasks

03Automating UI regression testing by capturing and comparing screenshots of local development servers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kriscard/kriscard-claude-plugins chrome-devtools

For use in Claude.ai and ChatGPT

Download Skill