1.4 개발자 콘솔

브라우저엔 '개발자 도구’라는 것이 내장되어 있고 이 도구를 이용하면 에러를 확인할 수 있다.
대부분의 개발자는 개발자 도구때문에 Chrome이나 Firefox를 이용해 개발하는 걸 선호한다.
개발자 도구에서 지원하는 기능을 잘 활용하면 개발 효율이 상당히 올릴 수 있다.

Chrome

F12 또는 Mac 사용자라면 Cmd+Opt+J를 누르면 개발자 도구가 뜬다.

예로 위와 같이 빨간색 에러 메시지가 보이는 경우 'lalala’가 정의되지 않았다(not defined)라는 메시지이고, 에러 메시지 우측에 링크 bug.html:12 는 해당 에러가 발생한 파일에서 12줄에 에러가 발생함을 나타낸다.

에러 메시지 아래에 파란색 기호 >가 있는데, 이를 '커맨드 라인(command line)'이라 부르고 커맨드 라인에 명령어(command)를 입력한 후 Enter를 누르면 해당 명령어가 실행된다.

Multi-line input
보통은 한줄 짜리 명령어를 입력하고 Enter를 눌러 해당 명령어를 실행하는 작업을 많이 하는데,
명령어를 여러 줄에 걸쳐 작성하고 싶다면 Shift+Enter를 눌러 줄 바꿈만 할 수 있다.

Firefox, Edge 및 기타 브라우저

F12를 누르면 대부분의 브라우저에서 개발자 도구를 열 수 있다.

Safari

Mac 의 경우 환경설정(Preferences)의 ‘고급(Advanced)’ 패널을 클릭한 후 ‘메뉴 막대에서 개발자용 메뉴 보기’ 체크 박스를 체크해 개발자 도구를 활성화해야한다.

설정 후 Cmd+Opt+C를 눌러 개발자 콘솔을 여닫을 수 있다.

참고자료 : 개발자 콘솔