[모던JS] 004. [소개] 개발자 콘솔

원문

개발자 콘솔이란?

웹 브라우저들에는 자체적인 개발자 도구가 있다. 특히 Chrome이나 Firefox가 그 성능이 우수하다.
윈도우 기준 F12를 누르면 개발자 콘솔이 뜬다. 여기에서 코드의 어느 라인에서, 어떤 에러가 발생했는지 메시지를 보여준다.
다른 브라우저들도 개발자 도구가 있지만 성능이 Chrome이나 Firefox만 못하다.

웹 페이지가 로드되었을 때 이 페이지에서는 에러 내용이 보이지 않는다. F12를 눌러 개발자 콘솔을 열어 콘솔창을 확인해야 비로소 에러 메시지가 출력된다.

Chorome

F12를 누르면 개발자 도구가 열린다. 콘솔에서 에러 메시지와 에러가 발생한 코드의 라인을 알 수 있고, 직접 코드를 타이핑 해볼 수 있다. 당연히 여기서 타이핑한 코드는 HTML이나 JS파일에 저장되는 것이 아니라 내 로컬에서만 보이는 것이다.

멀티 라인으로 여러 줄 코드를 입력할 때는 Enter가 아니라 shift + enter를 누르면 된다.

Firefox, Edge 및 기타 브라우저

마찬가지로 F12를 누르면 개발자 도구가 열린다.
크롬이나 다른 브라우저나 기본적인 사용 방법은 동일하다.

Safari

Mac 전용인 사파리에서는 '개발자 메뉴(Develop menu)'를 명시적으로 활성화 해주어야 한다.

환경설정(preferenes) - 고급(advanced) - 메뉴 막대에서 개발자용 메뉴 보기에서 체크박스를 체크하여 개발자 도구를 활성화

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