WebStorm Chrome 디버깅

Dev Tool

밀하우스 마나스톰 2024. 1. 30. 12:24

html 파일 실행 후 크롬 브라우저가 제공하는 크롬 개발자도구에서 디버깅 작업을 할 수 있지만

코딩 작업은 WebStorm에서 하고, 디버깅은 크롬 브라우저에서 하는 작업 방식이 익숙하지도 않고 불편하다 생각해서

WebStorm 툴에서 코딩과 디버깅을 같이 할 수 있는 방법을 찾아보았다.

원래는 WebStorm과 Chrome Dev Tools이 다중 클라이언트 디버깅을 지원하지 않는 동일한 디버그 프로토콜을 사용하는 문제점으로 인해서

한 쪽 디버거의 연결이 끊어지는 문제가 있었다.

이를 해결하기 위해 크롬에서 JetBrains의 IDE 확장 프로그램을 설치해서 사용했지만

WebStorm 2017.3 버전 이후에는 확장 프로그램을 설치하지 않고 추가적인 세팅만 하면 되도록 개선되었다.

먼저 디버깅 실행 환경인 Configuration 하나를 만들어준다.

툴 상단에서 화살표 버튼을 클릭해 [Edit Configurations...] 창을 띄운다.

그 뒤 [+ 버튼 : Add New Configuration]을 눌러 JavaScript Debug Template을 선택한 뒤

실행할 URL(html 파일)과 Browser(크롬)를 세팅해준다.

생성한 Configuration을 선택하고 Run과 Debug 아이콘을 실행하면 된다.

추가 문제 해결 1. Run은 잘 되는데 Debug 실행시 about:blank 페이지가 뜨는 문제

교차 도메인(No Access-Control-Allow-Origin)으로 인해 발생하는 문제다.

생성했던 Configuration의 크롬 세팅에서 --remote-allow-origins=* 옵션을 추가해준다.

위의 문제를 해결할 수 있지만 보안과 안정성이 떨어질 수 있다.

하지만 개발 목적으로 웹 페이지를 실행하는 것이기 때문에 큰 문제가 될 것으로 보이지는 않는다.

추가 문제 해결 2. CORS problem when debugging because of "x-ijt" header being sent 에러

Webstorm이 디버깅된 사이트의 모든 요청에 "x-ijt" 헤더를 자동으로 추가하면서 Facebook API 등을 불러오지 못 하는 현상이다.

상단 [File] - [Settings...] - [Build, Execution, Deployment] - [Debugger] 설정에서

[Allow unsigned requests] 옵션을 활성화하여 해결할 수 있다.

추가 문제 해결 3. WebStorm을 킬 때마다 생성한 Configuration 세팅이 초기화되는 문제

우측 상단의 [Store as project file] 옵션에 체크하면

Configuration 세팅 정보를 프로젝트 폴더 내에 저장하고, WebStorm을 새로 킬 때마다 이 정보를 불러온다.

또한 해당 파일을 공유하면 다른 사람들도 동일한 세팅에서 프로젝트를 실행/디버깅할 수 있다.