WebStorm 2017.3 으로 JavaScript 디버깅하기
WebStorm을 사용하여 Chrome에서 클라이언트 측 JavaScript 애플리케이션을 디버깅 하시는 사용자들에게 아주 좋은 소식이 있습니다!
이제, Chrome 63 부터 Chrome DevTools 및 WebStorm 디버거를 동시에 사용할 수 있게 되었습니다.
또한, WebStorm 2017.3을 사용하면 더 이상 WebStorm에서 응용 프로그램 을 디버깅하기 위해 추가 Chrome 확장 이 필요하지 않습니다 .
WebStorm과 Chrome DevTools에서 동시에 디버깅하기
WebStorm에서 디버거를 열어 둔 상태로 브라우저에서 DevTools를 열려고 시도한 적이 있거나 그 반대의 경우라면 WebStorm 디버거가 즉시 연결이 끊어지는 현상이 있었을 텐데요.
이는 WebStorm과 DevTools가 다중 클라이언트 디버깅을 지원하지 않는 동일한 디버그 프로토콜을 사용하기 때문에 발생했습니다. 수년 동안 이 Chromium 문제 는 개발자들이 가장 해결했으면 하는 문제 였습니다. 하지만, 드디어 Chrome 63에서 최종 수정되었습니다!
즉, 이제는 DevTools 디버거와 WebStorm 디버거를 동시에 사용할 수 있기 때문에 편리하게 각각 디버거에서 제공하는 다른 기능을 사용할 수 있습니다.
예를 들어 WebStorm을 사용하여 응용 프로그램을 디버깅하며 중단 점(Break Point)을 소스 코드에 설정하고 DevTools Elements 패널을 사용하여 DOM 및 스타일을 검사하거나 강력한 Network 패널을 사용하여 네트워크 성능에 대한 정보를 얻을 수 있습니다.
DevTools와 WebStorm 간에 코드 스텝들은 모두 동기화됩니다. 중단 점(Break Point)에 도달하면 두 도구 모두에서 스텝을 사용하고 작업을 다시 시작할 수 있습니다. 두가지 도구 모두 코드에 실행 지점을 표시하고 호출 스택 및 변수보기 등을업데이트합니다.
자바 스크립트 디버거로 쉽게 시작할 수 있습니다.
WebStorm 2017.3부터 IDE의 클라이언트 측 응용 프로그램을 디버깅 할 때 더 이상 JetBrains의 Chrome 확장 프로그램을 설치하지 않아도됩니다.
앱을 디버깅하려면 새로운 JavaScript 디버그 구성을 만들고 앱이 실행되고있는 URL을 지정해야합니다. 그런 다음 중단 점을 코드에 넣고 디버그 구성을 시작합니다. WebStorm IDE 가 직접 원격 디버깅(별도 설정)을 사용하여 Chrome의 새로운 인스턴스를 열고 완벽하게 동기화 합니다.
The Drive to Develop
JetBrians 코리아
Subscribe to JetBrains Blog updates
