#3 브라우저에서 제공되는 개발자 도구
Modern JS & ES6
브라우저에서 제공되는 개발자 도구는 앞으로 독자가 JavaScript를 배우는 데 있어 자주 사용하게 될 도구들이기 때문에 미리 정리해본다.
개발자 도구를 시작하기 전에
우선 주요 브라우저별로 개발자 도구로 시작하는 방법부터 알아두자.
Google Chrome: [Google Chrome 설정] - [도구 더보기] - [개발자 도구]
Microsoft Edge: [고급] - [F12 개발자 도구]
Internet Explorer: [도구] - [F12 개발자 도구]
Firefox: 메뉴 [개발자 도구] - [개발도구 표시]
Safari: [개발] - [Web 속성 보기]
Google Chrome 개발자 도구 메뉴
*Elements: HTML/CSS 상태 확인
*Network: 브라우저에서 발생하는 통신 상태
*Sources: 스크립트 디버깅 (중단점 지정 및 변수 모니터링 등)
Timeline: 성능 측정
Profiles: JavaScript에서 사용하고 있는 CPU/메모리 등의 정보를 수집
*Application: 쿠키 및 스토리지 등의 내용 수집
Audits: 페이지를 분석하고 최적화를 위한 팁 나열
*Console: 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
다양한 기능이 내장되어 있지만 그중에서 JavaScript개발에서 자주 사용되는 것들은 *표시를 하였다.
Elements 탭 - HTML/CSS소스 확인
[Elements] 탭에서 HTML 소스 트리를 확인할 수 있다. 일반적인 소스보기와는 다르게 JavaScript에서 동적으로 조작된 결과가 반영되어 있어, 스크립트 실행결과를 확인하는데 유용하다.
"Select an element in the page to inspect it"버튼을 선택하면 페이지 영역을 선택하여 해당 소스가 선택한 상태로 오른쪽 Styles창에서 해당 요소에 적용된 스타일을 확인할 수 있다. 또한 소스코드와 스타일을 변경하면서 바로 결과를 볼 수 있어 스타일 조정에 편리하다.
Network 탭 - 통신 상태 추적
Network탭을 이용하여 브라우저에서 발생하는 통신상태를 확인할 수 있다. 특히 Ajax에 의해 발생하는 비동기 통신은 확인하기 어려운데, 이 Network 탭을 이용하면 제대로 통신이 되고 있는지, 의도한 데이터를 수신할 수 있는지를 확인할 수 있다.
Sources 탭 - 스크립트 디버깅
JavaScript로 개발 시 가장 중요한 것이 바로 Sources탭이다. 코드 왼쪽 행 번호를 클릭하여 중단점을 설정할 수 있다. 중단점은 실행 중인 스크립트를 일시 정지시키는 기능이다. 디버그는 중단점에서 스크립트를 중단하고 그 시점에서 스크립트 상태를 확인하는 것이 기본이다.
중단점에서 처리가 중단되면 위와 같이 해당 행이 반전된다. 이 상태에서 오른쪽 창의 [Watch]에서 변수 상태를 확인할 수 있다.
실행
스텝오버 (한 줄 단위로 실행하지만 함수가 있으면 이를 실행하고 다음 행으로 감)
한 단계씩 (힌즐 단위로 실행)
스텝 아웃 (현재 함수가 호출로 리턴될 때까지 실행)
Application 탭 - 스토리지 및 쿠키 내용 확인
Application 탭에서는 현재 페이지를 구성하는 파일 외에도 스토리지 및 쿠키를 확인할 수 있다. 목록에서 값 추가/수정/삭제할 수 있다.
Console 탭 - 로그 확인 및 객체 조작
Sources탭과 같이, JavaScript 디버깅에 필수적인 기능이 바로 Console탭이다.
첫 번째, 오류 메시지 및 로그 확인
페이지를 실행시킬 때, 무조건 개발자 도구를 열어두는 것이 좋다. 도구 오른쪽 위에 xxErrors 같은 표시가 되어 있으면 우선 Console탭을 열어두고 오류 메시지를 확인하는 것이 좋다.
두 번째, 상호작용으로 코드를 실행
콘솔에서 대화식으로 JavaScript코드를 실행할 수 있다. 예로 getElementById메서드에서 지정된 요소를 추출할 경우에도 이용이 가능하다.
