구글 크롬 개발자 모드와 디버깅

구글 크롬 개발자 모드와 디버깅

JS 개발을 할 때 크롬을 많이 사용하는데요 크롬을 통해서 디버깅이 가능합니다.

네트워크를 항목을 통해서 값이 정상적으로 전달되는지 볼 수도 있으며, 네트워크를 통해서 시간 측정도 가능합니다.

 

실행방법

• Chrome에서 F12 개발자 모드를 실행한다.

정말 편리한 기능이 많습니다.

제가 가장 사용 많이 하는 탭은 Console, Sources, Network, Elements를 가장 많이 사용합니다.

그리고 요소를 찾을 때 Ctrl + Shift + C를 사용해서 많이 확인하며..

간단한 화면 디자인 수정에서도 유용하게 사용 가능합니다.

 

 

Console, Source탭

• 소스를 찾기 힘들 때는 console.log()를 찍어서 그 위치를 마우스로 클릭하면 디버깅이 걸립니다.
• Ctrl + P로 소스 파일을 찾아서 직접 걸 수 있습니다.

프런트엔드(front-end) 쪽 프로그래밍을 할 때 가장 편리하게 쓸 수 있는 디버깅 방법입니다.

소스에서 파란색으로 표시되는 부분이 브레이크 포인트가 걸려서 실행하게 되면 그 부분이 디버깅이 걸리게 됩니다. 

크롬 개발자모드 소스탭

 

Network 탭

• 값 전달 확인 (Network - Headers)

 

Network - Headers

Network - Headers

 

• 속도 측정

Network Speed Test

 

Elements 탭

• Ctrl + Shift + C를 사용하여 특정 요소를 클릭합니다

Style탭에 해당하는 요소를 수정하면 화면상에서 어떻게 수정되는지 볼 수 있습니다.

설정하면 바로 코드에 반영되기도 합니다. 

Element - Style

 

화면 창 분할

저는 보통 가장 왼쪽에 있는 크롬과 개발자 모드를 분리하는 방법을 많이 사용합니다.

화면창분할

Dock Side에서 가장 왼쪽에 있는 항목이 분리하는 기능인데  콘솔 창을 보통 분리해서 더블 모니터로 사용하는 편입니다.

 

마무리

크롬을 통해서 디버깅이 하는 방법을 알아봤는데요. 알면 정말 편리하게 디버깅이 가능한 방법이니

개발자분들은 자주 사용해보세요 ~ 

 

그럼 이만~