홈 / Skills / 개발 생산성 / Chrome DevTools 에이전트
개발 생산성

Chrome DevTools 에이전트

awesome-copilot communityMITSkill 언어: 영어
라이선스 확인됨스크립트 없음외부 서비스 필요높은 위험
데모실행 기록 · claude-sonnet-5-5 · 2026년 10월
I need browser debugging and performance analysis on a page using Chrome DevTools. Open file:///private/tmp/claude-501/-Users-huipeizhu-git-aibars-portal/1db8d52d-0133-4843-9915-dc2b4b4fafd0/scratchpad/t_cd/site/index.html . Check the console messages and network requests for errors, record a performance trace with a reload and report the key findings (LCP and anything notable), then fill in the form with the email "[email protected]", choose the "Monthly" plan, submit it and tell me exactly what the page shows afterwards. Only use this page; do not visit any other site.
Skill: chrome-devtools

Here's what I found on the page.

Console errors

  • missing-logo.png failed to load (ERR_FILE_NOT_FOUND). The "Brew & Co logo" image is broken.
  • fetch of api/plans.json was blocked by CORS, because the page is opened from file:// and the origin is null. The page logged "Failed to load plans: Failed to fetch". That failure is most likely a side effect of opening the page from file://, so serving it over http:// should clear it.
  • One DevTools issue: an input has no autocomplete attribute.
  • There was also a plain page loaded log.

Network requests (3 total)

  • index.html returned 200.
  • missing-logo.png failed with ERR_FILE_NOT_FOUND.
  • api/plans.json failed with ERR_FAILED, the CORS block above.

Performance trace (reload)

  • LCP was 194 ms. TTFB was 0.2 ms, and the other ~194 ms was render delay.
  • CLS was 0.00.
  • There is no CrUX field data for this page.
  • The trace surfaced only the LCPBreakdown insight, so I didn't dig into further insights. The long render delay is the one thing worth a closer look.

Form submission
I entered [email protected], selected "Monthly" and clicked Subscribe. The page then showed this text below the form:

Subscribed [email protected] to Monthly

The email appears in uppercase in that message, although I typed it in lowercase. The page may be transforming it with JavaScript or CSS, which is worth checking if that wasn't intended. The form fields kept their values ([email protected], Monthly).

I only used this local page and visited no other sites.

试用方式:我用 Google 的 chrome-devtools-mcp(关闭使用统计和 CrUX 上报,用 `--isolated --headless` 的临时干净浏览器,不碰你的日常 Chrome 和登录状态),让模型只操作我做的一个本地页面。页面里有故意放的问题:缺失的图片、一个会失败的请求、把邮箱转成大写的提交逻辑。模型找到了这些,并正确报告了表单提交后的页面文字。注意:这个 Skill 本身没有安全提示,它能操控真实浏览器。

하는 일

chrome-devtools MCP 서버를 쓰는 방법을 모델에게 안내합니다. 도구는 네 묶음입니다. 페이지 관리(열기, 이동, 전환, 닫기, 텍스트 나타날 때까지 대기), 입력(클릭, 폼 입력, 호버, 키 입력, 드래그, 파일 업로드, 대화상자 처리), 디버깅(접근성 트리 스냅샷, 스크린샷, 콘솔 메시지, 페이지에서 JavaScript 실행, 네트워크 요청 확인), 에뮬레이션과 성능(크기 조정, CPU·네트워크 제한, Core Web Vitals를 위한 성능 트레이스 기록과 분석)입니다.

동작 방식

  1. 스냅샷 먼저: 텍스트 스냅샷으로 요소 uid를 얻고 uid로 클릭하거나 입력하며, 페이지가 바뀌면 다시 스냅샷을 찍습니다.
  2. 문제 추적: 콘솔 오류와 실패한 네트워크 요청을 보고, 스크립트로 특정 값을 확인합니다.
  3. 성능 분석: 새로고침과 함께 트레이스를 시작해 LCP, 레이아웃 이동 같은 인사이트를 분석합니다.

이런 때 좋습니다

페이지 디버깅, 성능 점검, 본인의 개발 사이트에서 브라우저 작업 자동화.

참고 및 위험

높은 위험:모델이 실제로 실행 중인 Chrome을 조작합니다. 그 브라우저는 여러 계정에 로그인되어 있을 수 있고, 모델은 클릭, 폼 입력·제출, 파일 업로드, 페이지 안에서 임의의 JavaScript 실행, 네트워크 요청(토큰과 개인정보 포함 가능) 읽기를 할 수 있어 당신 대신 행동하거나 데이터를 유출할 수 있습니다. Skill 자체에는 안전 안내가 없습니다. 로그인이 없는 별도의 깨끗한 프로필을 쓰고, 실서비스·금융 사이트를 피하며, 동작을 지켜보세요. Google의 chrome-devtools-mcp를 `--isolated --headless` 깨끗한 브라우저로 로컬 페이지 하나에 시험했고 콘솔·네트워크·트레이스·폼 제출이 심어 둔 문제대로 동작했습니다. 기본값으로 Google에 사용 통계, CrUX API에 트레이스의 URL을 보내고 업데이트를 확인하며 영구 프로필을 씁니다. `--usageStatistics=false`, `--performanceCrux=false`, `--isolated`로 줄일 수 있습니다.