웹페이지 디버깅

크롬브라우저에서 F12키를 누르면 아래와 같이 디버깅 창이 활성화 된다.

 

붉은색이 메뉴이며 이 메뉴에서

Element는 위 화면처럼 선택한 엘리먼트의 스타일이 어떻게 적용되었는지, 어떤 셀렉터(selector)로 접근해야 하는지등의 정보를 알 수 있고

Console은 자바스크립트를 변수나 객체정보를 확인하거나 오류메시지를 확인할 때 사용한다.

console.log(변수나 객체)등으로 확인이 가능하며 debugger;를 자바스크립트 코드상에 넣었을 경우 그 라인에서 디버그모드로 들어간다.

Source는 이 페이지의 소스가 어떤건지, 어느 시점에서 디버그를 위해 브레이크포인트를 걸 지등에 사용한다.

내가 작업한 js파일을 찾아 오류난 부분이나 확인할 곳에 breakpoint를 걸고(라인넘버를 클릭하면 걸림) 변수값을 확인해보거나  console창에서 console.log(변수명)등으로 찍어서 볼 수 있다. 다음 라인 실행은 f10, 연속실행은 f8이다. 수 없이 디버깅을 하면서 서비스가 구현된다.

Network는 ajax요청과 같이 api를 호출할 때 데이터값을 확인해보거나 걸리는 요청시간정보를 확인할 수 있다. api를 많이 사용하므로 어떤 api가 어떻게 사용되는 지 확인해보고 파라미터나 리턴값을 ui없이도 확인이 가능하다.