1. 개발자 콘솔
브라우저는 스크립트에 문제가 있어서 에러가 발생해도 이를 사용자에게 직접 보여주지 않습니다.
브라우저에는 " 개발자 도구 " 라는 것이 내장되어 있습니다. 이 도구를 이용하면 에러를 확인할 수 있으며 , 스크립트에 대한 쓸만한 정보도 얻을 수 있습니다.
대부분의 개발자는 Chrome 이나 Firefox 를 이용해 개발하는 걸 선호합니다. 두 브라우저에서 제공하는 개발자 도구가 굉장히 훌륭하기 때문입니다.
선호하는 브라우저를 하나 택해 개발하다가 사용하고 있는 브라우저에 종속된 문제가 발생하면 다른 브라우저로 전환해 개발을 이어나가곤 합니다.
이 챕터에서 해야할 것 .
- 개발자 도구를 열어 에러 확인하기.
- 명령어를 입력해 보기.
2. Chrome
bug.html 페이지를 열어보니
페이지 내 스크립트에 에러가 있지만, 일반적인 사용자 눈에는 이 에러가 보이지 않는다.
개발자 도구를 열어 에러를 확인해야 한다.
F12 를 눌러 개발자 도구를 열어보았다.
종종 잘못 눌러서 떳었는데 ,,,,, 이번엔 사용하려고 열었다.
개발자 도구를 처음 열었다면 Console 패널이 기본으로 보인다고 한다.
종종 F12를 잘못 누르는 일이 있어서 그런지 Console 패널이 보이지 않아 직접 선택했다 ㅎㅎ
화면 구성은 사용하고 있는 Chrome 버전에 따라 다르며 , 버전이 바뀔 때 마다 구성이 조금씩 바뀌긴 하지만 큰 틀은 바뀌지 않는다.
- 빨간색 에러 메시지가 보인다.
" lalala " 가 정의되지 않았다 (not defined) 라는 메시지 이다. - 에러 메시지 우측에 링크 bug.html:12 가 있다.
bug.html 은 해당 에러가 발생한 파일, 12 는 에러가 발생한 줄을 나타낸다.
에러 메시지 아래에 파란색 기호 > 가 있는데 ,
이 기호가 있는 곳엔 자바스크립트 명령어 ( command ) 를 입력할 수 있다.
이를 " 커맨드 라인 ( command line ) " 이라 부른다.
커맨드 라인에 명령어 ( command ) 를 입력한 후 Enter 를 누르면 해당 명령어가 실행된다.
Multi-line input
보통은 한줄 짜리 명령어를 입력하고
Enter 를 눌러 해당 명령어를 실행하는 작업을 많이합니다.
명령어를 여러 줄게 걸쳐 작성하고 싶다면 Shift + Enter 를 누르면
명령어를 실행시키지 않고 줄 바꿈만 할 수 있기 때문에
자바스크립트 코드 조각을 입력하는 것도 가능해집니다.
3. Firefox , Edge 및 기타 브라우저
F12 를 누르면 대부분의 브라우저에서 개발자 도구를 열 수 있습니다.
브라우저는 다르지만 개발자 도구 인터페이스는 거의 유사하기 때문에 , 한 브라우저에 익숙해지면 다른 브라우저에 적응하는 건 어렵지 않습니다.
4. Safari
Mac 전용 브라우저인 Safari 에서 개발자 도구를 사용하려면
" 개발자 메뉴 ( Develop Menu )" 를 명시적으로 활성화해주어야 합니다.
나는 Window 환경에서 Chorme 으로 할 것이기 때문에
FIreFow , Edge , Safari 는 생략 했다.
