Developer console (JavaScript)

개발자 콘솔

코드는 에러가 발생하기 쉬움. 

에러를 만드는 일은 사람이라면 피할 수 없음.

 

하지만 브라우저에선 기본적으로 에러가 사용자에게 보이지 않음.

그래서 스크립트에 문제가 생겨도 우리는 눈에 보이는 단서를 얻지 못하면 원인을 파악하고 수정하기 어려움.

 

이 문제를 해결하기 위해 브라우저에는 "개발자 도구 (Developer Tools)"가 내장되어 있음.

대부분의 개발자는 Chrome 또는 Firefox를 이용함. 이 두 브라우저가 가장 강력한 개발자 도구를 사용하기 때문임.

다른 브라우저들도 개발자 도구를 제공하지만 chrome이나 Firefox보단 떨어짐. 그래서 대부분 개발자들은 즐겨 쓰는 브라우저를 하나 정하고 특정 브라우저에서만 발생하는 문제가 존재할 때 다른 브라우저를 사용함.

 

개발자 도구에는 매우 강력하고 다양한 기능이 있음. 

우선 에러를 확인하고 JavaScript 명령을 실행하는 법부터 알아봄.

 

Google Chrome

먼저 bug.html 페이지에는 JavaScript 코드가 들어 있는데 에러가 있음. 보통 방문자에게는 에러가 표시되지 않지만 개발자 도구를 열면 확인 가능함. 

 

F12키를 누르면 개발자 도구가 열림. 

기본적으로 Console 탭이 열리는데 , 여기에서 에러 메시지르 확인할 수 있음.

 

개발자 도구의 인터페이스는 Chrome 버전에 따라 조금씩 다를 수 있지만 대체로 비슷함.

콘솔에 빨간색 에러 메시지가 보일 것임. 예를 드러 lalala라는 알수 없는 명령어가 있어서 에러가 발생했다고 침. 

 

 

 

오른쪽에는 bug.html:12처럼 에러가 발생한 위치(파일 이름과 줄 번호)를 클릭할 수 있는 링크가 있음.

에러 메시지 아래의 파란색 > 기호는 명령줄(command line)로 여기에서 JavaScript 명령을 직접 입력하고 Enter를 누르면 실행됨. 

 

 

 

 

이렇게 에러를 확인할 수 있고 이것만으로도 시작하는데 충분함. 개발자 도구 사용법은 나중에 디버깅 장에서 더 자세히 배움.

 

여러 줄 입력 (Multi-line input)

보통 콘솔에서 한 줄 코드를 입력하고 Enter를 누르면 바로 실행됨.

여러 줄에 걸친 코드를 입력하고 싶다면 Shift + Enter를 사용하면 됨. ]

이렇게 하면 긴 JavaScript 코드를 여러 줄에 걸쳐 입력할 수 있음.

 

Firefox , Edge 등 다른 브라우저 

대부분의 다른 브라우저도 F12 키를 누르면 개발자 도구가 열림.

개발자 도구의 인터페이스는 브라우저마다 조금씩 다르지만 기본적인 구조나 사용법은 비슷함. 

Chrome에서 개발자 도구를 사용할 줄 안다면 다른 브라우저로 쉽게 옮겨 갈 수 있음.

 

Safari

Safari(맥 전용 브라우저 , windows/Linux는 지원하지 않음)은 조금 다름. 우선 개발 메뉴를 활성화해야 함.

 

preferences(환경설정)을 열고 Advanced 탭으로 이동함.

하단에 있는 show Develop menu in menu bar를 체크함. 

 

이제 Cmd + Opt  + C로 콘솔을 열 수 있음.

그리고 메뉴 막대에 Develop 항목이 생기는데 이 안에 여러 가지 명령과 옵션이 있음.