00:00:00자, 크롬 팀에서 드디어 업데이트를 출시했습니다. 이제 Chrome DevTools MCP 서버가
00:00:06실행 중인 크롬 인스턴스와 통신하여 로그인 페이지 뒤의 문제를 디버깅하거나,
00:00:12라이브 세션 분석을 수행하고, 선택된 요소나 특정 오류,
00:00:17심지어 네트워크 활동에 접근하는 등 정말 멋진 디버깅 작업을 할 수 있게 되었습니다.
00:00:21하지만 Agent Browser나 Playwright 같은 다른 AI 브라우저 디버깅 도구들이 CLI와 스킬,
00:00:26그리고 MCP 서버를 추가하고 있는 상황에서, Chrome DevTools MCP도
00:00:31나중에 이런 기능을 추가해야 할까요?
00:00:33구독 버튼을 누르고 함께 알아봅시다.
00:00:35몇 달 전, Anjis가 Chrome DevTools MCP 서버에 대해
00:00:44훌륭하게 요약한 영상을 올렸었죠. 하지만 당시에는 새 크롬 세션을 실행하거나,
00:00:49원격 디버깅 포트에 연결할 수만 있었고, 수동 설정이 많이 필요했습니다.
00:00:53하지만 이제 크롬 버전 144 이상에서 원격 디버깅 플래그를 켜면,
00:00:58Chrome MCP 도구가 열려 있는 세션을 자동으로 감지하여 디버깅에 사용할 수 있게 됩니다.
00:01:04터미널에서 Claude Code를 사용하는 걸 선호하는 제 입장에서는 완전히 게임 체인저인데요,
00:01:09덕분에 Deer, Comet, Claude 크롬 확장 프로그램 같은 AI 브라우저나
00:01:15React Grab 같은 AI 디버깅 도구를 따로 쓸 필요가 없어졌기 때문입니다.
00:01:18그럼 이 새로운 Chrome DevTools MCP 기능들을 실제로 확인해 보죠.
00:01:22우선 자동 연결 옵션이 포함된 MCP 서버를 설치해야 합니다.
00:01:27저는 Open Code를 사용 중이지만 다양한 에이전트 하니스를 지원합니다. 크롬에서는
00:01:31특정 URL로 이동하여 해당 옵션이 켜져 있는지 확인해야 합니다.
00:01:36이전에는 이런 명령어로 세션을 시작해야 했고, 에이전트가
00:01:40HTTP를 통해 노출된 포트에 연결하는 방식이었습니다.
00:01:43하지만 새로운 방식으로는 이 UI 내에서 평소처럼 크롬을 시작해
00:01:48모든 쿠키와 기록 등에 접근할 수 있고, 작업이 끝나면 언제든 끌 수 있습니다.
00:01:53보안이 걱정되신다면, 영상 뒷부분에서 더 프라이빗한 버전의
00:01:57크롬에 연결하는 방법을 보여드리겠습니다.
00:01:59두 가지 작업, 즉 해당 옵션을 켜고 자동 연결 옵션으로
00:02:04MCP 서버에 연결했다면 모든 준비가 끝난 것입니다.
00:02:08에이전트에게 Betastack의 성능을 확인해달라고 요청하면, 크롬에
00:02:12원격 디버깅을 허용할지 묻는 팝업이 뜨고 상단에 배너가 나타납니다.
00:02:17이제 에이전트가 Betastack 웹사이트로 이동했고,
00:02:21Lighthouse 감사 도구를 사용하여 웹 바이탈, 점수 및 기타 세부 정보를 제공하고 있습니다.
00:02:27이제 좀 더 유용한 작업을 해보겠습니다.
00:02:29여기 제가 작업 중인 언어 학습 앱이 있습니다.
00:02:31관리자로 로그인해서 콘텐츠, 특정 유닛을 거쳐 이 연습 문제 페이지로 왔습니다.
00:02:37그런데 연습 문제 모달창 하단의 저장 버튼이
00:02:42사이트의 다른 버튼들과 다르다는 걸 발견했습니다.
00:02:44에이전트에게 로그인부터 페이지 이동까지 제 단계를 똑같이 복제하라고 설명하는 대신,
00:02:49검사 도구에서 이 저장 버튼을 선택한 다음,
00:02:55에이전트에게 제가 선택한 요소를 볼 수 있는지 물어보겠습니다.
00:02:58잠시 후, 에이전트가 제가 저장 버튼을 선택한 것을 알아냅니다.
00:03:02이제 저장 버튼의 스타일을 옆에 있는
00:03:06새 연습 문제 버튼과 똑같이 변경해달라고 요청하겠습니다.
00:03:09몇 초 만에 버튼 스타일이 제가 원하던 대로 정확하게 바뀌었습니다.
00:03:13만약 MCP 서버를 샌드박스 환경에서 실행 중이라면,
00:03:18브라우저 URL 옵션과 함께 원격 디버깅 포트를 WebSockets이 아닌 HTTP로 사용해야 합니다.
00:03:23보안이 중요하다면 사용자 데이터 디렉토리(user data directory)를 특정 위치로 지정하여
00:03:28MCP 서버 옵션에 추가해야 합니다. 이렇게 하면 에이전트가 여러분의
00:03:33기존 쿠키, 비밀번호, 브라우저 기록 등에 접근할 수 없게 됩니다.
00:03:36에이전트가 해당 사이트에 접근하게 하려면 다시 로그인해야 하죠.
00:03:41이 기능이 정말 멋지긴 하지만, 제 이전 영상을 보셨다면 아시겠지만
00:03:46저는 MCP 서버를 아주 좋아하지는 않습니다. 여러 개를 사용하면
00:03:51컨텍스트를 너무 많이 차지하기 때문이죠.
00:03:52다행히 Chrome DevTools MCP 서버는 CLI로 모든 작업을 수행할 수 있게 해줍니다.
00:03:59잘 알려지지 않은 사실인데, 이 실험적 기능을 찾으려면
00:04:04skills 디렉토리 안의 Chrome DevTools CLI를 확인해야 합니다.
00:04:10여기서 에이전트에게 사용법에 대한 정보를 줄 수 있습니다.
00:04:12아직 설치하지 않은 분들을 위한 설치 안내도 있습니다.
00:04:16이것은 기본적으로 MCP 서버를 감싸고 있는 얇은 래퍼(wrapper)입니다.
00:04:20이미 에이전트 하니스 내에서 실행 중이더라도, 이 CLI는
00:04:24자체 데몬을 사용하기 때문에 기존 것을 쓰지 않습니다.
00:04:26이 명령어는 실행 중인 기본 데몬에 대한 정보를 보여주는데,
00:04:30브라우저 URL 플래그와 headless, isolated 같은 플래그가 설정된 것을 볼 수 있습니다.
00:04:34하지만 CLI 옵션에는 자동 연결(auto connect) 기능이 없다는 걸 알 수 있습니다.
00:04:39따라서 터미널을 통해 크롬을 실행한 적이 없다면, 기존 인스턴스를 종료하고
00:04:43원격 디버깅 포트 플래그와 함께 사용자 데이터 플래그를
00:04:48반드시 포함하여 실행해야 합니다.
00:04:50이제 준비가 되었으니 데몬을 시작하고 페이지 목록을 가져오면,
00:04:54현재는 별다른 게 없어서 새 탭 하나만 표시됩니다.
00:04:57물론 진짜 강력함은 에이전트와 함께 사용할 때 나타납니다.
00:05:01Chrome MCP 도구를 끄고 DevTools에서 버튼을 선택한 뒤, 에이전트에게
00:05:06CLI를 사용해 어떤 요소가 선택되었는지 확인해달라고 하면 성공적으로 찾아냅니다.
00:05:10잘 작동하는 걸 확인할 수 있죠.
00:05:11사용자 데이터 디렉토리의 정보는 세션 간에도 유지된다는 점을 참고하세요.
00:05:15덕분에 제 모든 쿠키와 브라우저 정보 등이 보존됩니다.
00:05:19또한 Chrome DevTools CLI로 할 수 있는 일은 훨씬 더 많습니다.
00:05:22직접 스킬을 확인해 보시길 추천하며, 나중에
00:05:26자동 연결 기능도 도입될지도 모릅니다.
00:05:28자, 여기까지 Chrome DevTools MCP 서버와 CLI의 새로운 기능들을
00:05:32빠르게 살펴보았습니다. 코딩 어시스턴트를 활용한 디버깅 경험을
00:05:38확실히 개선해 줄 것입니다.
00:05:39Arc 사용자로서(네, 아직도 Arc를 씁니다), 이 기능이 나중에 Arc에도 꼭 추가되면 좋겠네요.
00:05:45그전까지는 저에게 아주 잘 맞았던 Vassal의 Agent Browser를
00:05:50기분 좋게 계속 사용할 것 같습니다.
00:05:51Agent Browser에 대해 전혀 모르신다면 이전에 만든 영상을 확인해 보세요.
00:05:55그때 이후로 훨씬 더 많이 개선되긴 했지만요.
00:05:58조만간 새로운 영상을 하나 더 만들어야 할 것 같네요.