크롬에서 javascript 디버깅하는 방법

F12 도구를 사용하면 웹 개발자가 브라우저를 종료하지 않고 JavaScript 코드를 빠르게 디버그 할 수 있습니다.

F12 도구는 중단점, 조사식 및 지역 변수 보기와 같은 디버깅 도구 그리고 메시지 및 즉시 코드 실행을 위한 콘솔을 제공합니다.

 

 

중단점을 설정하고, 조사식 및 지역 변수를 보고 일련의 함수로 이루어진 호출 스택을 표시하려면 디버깅 시작 단추를 클릭하면 됩니다.

디버깅 시작 단추를 눌러 웹 페이지를 새로 고치고 디버거에서 코드를 다시 시작합니다.

구글 크롬 디버깅 OverView

---

(1)Console :: 자바스크립트 명령을 실시간으로 출력해 볼 수 있는 공간을 제공해준다.

(2) Elements  :: 웹페이지를 구성하는 구성요소 (태그 및 버튼 등)

(3) Network :: 웹페이지를 로드하기 시작했을때부터 네트워크를 통해 리소스를 가져오는 상태값 및 결과를 보여준다. 리소스 로딩 시간 및 로딩 순서 , 로딩 요청 값과 응답 값 등에 대한 정보를 보여준다.

(4) Souces  :: 해당 웹페이지를 보여주는데 동원되는 리소스 자원들 모음을 보여준다

html에 포함되어져 있는 img나, 쿠키정보나, 참조하는 페이지 등등의 모든 리소스를 보여준다.

보통 화면에 포함된 js소스를 디버깅하기 위한 용도로 사용되어진다.

(5) Timeline :: 작동하는 웹 페이지의 성능을 나타내주는 정보 제공

(6) Profiles :: 메모리 누수 및 병목현상에 대한 정보를 객체 별로 알 수 있음

(7) Audit :: 웹페이지에 악영향을 끼칠 수 있는 부분에 대한 조언을 해준다.

Application과 Security는 잘 모르겠네요.

감은 대충 오지만..

<< 크롬 브라우저 사용 TIP >>

1. Undock 으로 개발자도구를 별도의 창으로 분리하여 볼 수 도 있다.

2. 설정 > Devices 브라우저를 속이는 기능(크롬부라우저가 아닌 다른부라우저로 인식하라고 강제적으로 속이는 기능)

3. 설정 > Shortcut 에서는 자주 사용되어지는 단축키 정보를 볼 수 있다.