chrome-devtools mcp server 기존 브라우저 재사용하기

Updated on

chrome-devtools mcp 를 설치해서 사용하면 새로운 브라우저가 뜨고, 그러다보면 가끔 봇으로 인식해 차단되거나 또는 개발 단계에서 로그인이 필요한 서비스의 경우 쿠키 유지가 되지 않아서, 로그인 하는 처리까지 복잡해서 제대로 테스트 및 개발을 못하는 경우가 많다.

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]
startup_timeout_sec = 30.0

다른 사이트에서 작성한 글을 보니, 기존 브라우저에서 debug port를 열어서 접속되게 하더라, 그래서 그걸 나도 적용하기로 했다. 하지만 이렇게 하게되면, 보안 상 위험이 있을 수 있지만, 애초에 Chrome Dev.app 을 실행하기 때문에 그나마 괜찮은 것 같기도 하다.

방법에 대해 설명하자면 (Mac OS 기준임)

  1. Automator 앱을 실행한다.
  2. 응용프로그램을 선택한다.
  3. 유틸리티 - 쉘 스크립트 실행을 선택한다.
  4. 아래 내용을 붙여넣기 한다.
#!/bin/bash

open -a "Google Chrome Dev.app" --args \
--remote-debugging-port=9222 \
--user-data-dir="$HOME/.chrome-debug-profile" \
--no-first-run \
--no-default-browser-check
  1. Google Chrome Dev Debug.app 이름으로 앱을 저장하고, /Applications 경로에 넣는다.
  2. 아래 .icns 로 아이콘을 변경해준다. (정보 가져오기에서 복사 + 붙여넣기로 변경 가능)

KfCYxcn6wrmtPxiG5Hmy2mPCKpK05I1q4b5ugnoM.icns

  1. dock 에 드래그 앤 드랍으로 등록한다.
  2. dock 에서 해당 앱을 클릭해서 실행한다.

  1. http://localhost:9222/json/version 에 접속해본다.

이제 debug port 로 여는 브라우저 설정은 완료됬다. 근데, MacOS에서 웃긴게 있는데, --user-data-dir=/tmp/atlas-mcp 를 설정 안하고 default profile 로 실행할 경우에는 죽어도 debug mode 가 활성화 되지 않는다… (이걸 몰라서 몇시간동안 삽질했음, 윈도우에서는 안그랬던것 같은데 ㅡㅡ)

이제 마지막으로 codex config.toml 에서 인자 값을 수정해주면 된다.

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222", "--headless=false", "--acceptInsecureCerts=true"]
startup_timeout_sec = 30.0

browser-url 옵션 외에도 몇가지 옵션을 같이 설정해주면 된다.

그 이후에 codex cli 에서 브라우저에서 해당 페이지 접속해줘, 하게 되면 이미 열려있는 debug chrome dev profile 에서 접속하기 때문에, 해당 페이지에서 먼저 작업중인 페이지 로그인 해놓은 상태라면, 로그인 되어 있는 상태로 페이지가 열리기 때문에, 문제 없이 cli 를 통해 문제를 찾고 해결 할 수 있다.

이것은 보안적으로 문제가 있을 수 있지만, 애초에 debug port 는 외부에서 연결이 불가능한거로 알고 있다. 내부 네트워크(로컬)에서만 접속이 가능하다. (윈도우에서는 그랬음)

그래서 크게 문제되지 않을 것 같긴한데, 그래도 혹시 모르니 보안적으로 위험하고 이슈가 있을 수 있다는 사실만은 인지하면 좋을 듯하다. 또는 Chrome Dev 또는 Chrome Beta 를 따로 설치해서, 프로필을 분리해서 켜지게 하면 그나마 괜찮을 수 있을 것 같다.

다른 글