[3-2] 개발자 도구 / 콘솔 / 브라우저에서 자바스크립트 실행/ 디버깅

3.2.1 개발자 도구

크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구이다.

→ 크롬 브라우저에 기본 내장되어 있음

• 개발자 도구의 다양한 기능

패널 설명

Elements	로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있음 (편집한 내용이 저장되지는 않음) → 의도된 대로 렌더링되지 않았다면 이 패널 확인할 것
Console	에러를 확인/자바스크립트 소스코드에 작성한 console.log 메서드의 실행결과 확인
Sources	로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있음
Network	로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다
Application	웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다

3.2.2 콘솔

콘솔이란?

→ 자바스크립트 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳

→ 구현 단계에서는 에러가 빈번하게 발생하므로 항상 콘솔을 열어둔 상태에서 개발할 것

→ 콘솔을 열어두지 않으면 에러가 발생했는지도 모르는 경우가 있기 때문

• 콘솔의 다른 사용법

→ 구현 단계에서 디버깅을 실행하는 것보다 간쳔하게 코드의 실행 결과를 확인하면서 개발을 진행하기 위해 console.log 메서드를 사용한다

→ console.log(…)는 괄호 안 코드를 평가해서 그 결과를 콘솔에 출력한다

→REPL(read eval print loop: 입력 수행 출력 반복) 환경으로 사용할 수도 있다.

프롬프트에 자바스크립트 코드를 입력하면 다음 줄에 실행 결과가 표시된다. 엔터 키를 입력하면 다음 프롬프트로 이동한다.

콘솔 꿀팁

• 여러 줄로 이루어진 자바스크립트 코드를 실행할 때 줄바꿈이 필요한 경우에는 shift키를 누른 상태에서 엔터키를 사용한다
• 자바스크립트 코드를 실행하는 중에 에러가 발생하면 에러의 내용이 콘솔에 출력된다

3.2.3 브라우저에서 자바스크립트 실행

브라우저에서 자바스크립트를 실행하는 법

HTML파일 로드

→ script 태그에 포함된 자바스크립트 코드 실행

→ 자바스크립트 코드 내에서 console.log 메서드가 호출되었다면 콘솔에 실행 결과가 출력될 것임

3.2.4 디버깅

에러 정보에 오른쪽에 에러 발생 위치를 나타내준다. 그걸 클릭하면 Source 파일로 넘아간다.

에러가 발생한 위치에 빨간 밑줄이 표시되고, 그 위에 마우스를 올리면 에러 정보가 표시된다

→ 디버깅 : 먼저 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것