WebStorm에서 Chrome attach debug

영어

vscode-chrome-debug - Attach 과 같은 일을 WebStorm에서하는 방법입니다. 공식 문서 포함 아무도 쓰지 않은 것 같기 때문에 메모.

vscode-chrome-debug - Attach 의 방법으로 Chrome을 시작하여 Port 9229에서 Chrome Debugging protocol을 청취합니다. Linux의 경우는 google-chrome --remote-debugging-port=9229 실행 후, 이하의 커멘드로 제대로 listen하고 있는지 확인.

$ netstat -an | grep 9229
tcp        0      0 127.0.0.1:9229          0.0.0.0:*               LISTEN

$ lsof -i :9229
COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
chrome  18347  wsh  132u  IPv4 729759      0t0  TCP localhost:9229 (LISTEN)

WebStorm에서 Configuration "Attach to Node.js/Chrome"만들기 :


생성한 Configuration에서 Debug를 시작하면 Chrome에서 열려 있는 탭 목록이 표시되므로 디버깅할 탭을 선택합니다. 이번에는 Firebase 튜토리얼의 Friendly Chat .


무사히 브레이크 포인트를 치고 인권을 얻었습니다.