[WebStorm] 디버깅 하기

 

 

 

[WebStorm] 디버깅 하기

웹스톰에서는 디버깅하는 기본적인 기능을 제공합니다.

브레이크 포인트를 지정할 라인의 맨앞쪽의 회색 공간을 마우스로 클릭하면 빨간색 원으로 해당 라인이 브레이크 포인트가 걸린 자리라는 것을 표시해 줍니다.

   

   

Run > Debug

디버깅 시작!

   

index.html 클릭

   

실행 중 자바스크립트의 브레이크 포인트 구문에서 멈춥니다.

   

하단에 Debug 정보 창이 오픈됩니다.

   

Debug정보 창의 우측 상단에

Step Over, Step Into, Force Step Into, Step Out, Run to Cursor명령을 수행하여 단계적으로 실행시켜 변수값을 확인하며 추적할 수 있습니다.

   

Step Into클릭 후 화면