Here's what I found on the page.
Console errors
missing-logo.pngfailed to load (ERR_FILE_NOT_FOUND). The "Brew & Co logo" image is broken.fetchofapi/plans.jsonwas blocked by CORS, because the page is opened fromfile://and the origin isnull. The page logged "Failed to load plans: Failed to fetch". That failure is most likely a side effect of opening the page fromfile://, so serving it overhttp://should clear it.- One DevTools issue: an input has no
autocompleteattribute. - There was also a plain
page loadedlog.
Network requests (3 total)
index.htmlreturned 200.missing-logo.pngfailed withERR_FILE_NOT_FOUND.api/plans.jsonfailed withERR_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를 위한 성능 트레이스 기록과 분석)입니다.
동작 방식
- 스냅샷 먼저: 텍스트 스냅샷으로 요소 uid를 얻고 uid로 클릭하거나 입력하며, 페이지가 바뀌면 다시 스냅샷을 찍습니다.
- 문제 추적: 콘솔 오류와 실패한 네트워크 요청을 보고, 스크립트로 특정 값을 확인합니다.
- 성능 분석: 새로고침과 함께 트레이스를 시작해 LCP, 레이아웃 이동 같은 인사이트를 분석합니다.
이런 때 좋습니다
페이지 디버깅, 성능 점검, 본인의 개발 사이트에서 브라우저 작업 자동화.
높은 위험:모델이 실제로 실행 중인 Chrome을 조작합니다. 그 브라우저는 여러 계정에 로그인되어 있을 수 있고, 모델은 클릭, 폼 입력·제출, 파일 업로드, 페이지 안에서 임의의 JavaScript 실행, 네트워크 요청(토큰과 개인정보 포함 가능) 읽기를 할 수 있어 당신 대신 행동하거나 데이터를 유출할 수 있습니다. Skill 자체에는 안전 안내가 없습니다. 로그인이 없는 별도의 깨끗한 프로필을 쓰고, 실서비스·금융 사이트를 피하며, 동작을 지켜보세요. Google의 chrome-devtools-mcp를 `--isolated --headless` 깨끗한 브라우저로 로컬 페이지 하나에 시험했고 콘솔·네트워크·트레이스·폼 제출이 심어 둔 문제대로 동작했습니다. 기본값으로 Google에 사용 통계, CrUX API에 트레이스의 URL을 보내고 업데이트를 확인하며 영구 프로필을 씁니다. `--usageStatistics=false`, `--performanceCrux=false`, `--isolated`로 줄일 수 있습니다.