오늘은 개발자 콘솔에 대해 공부하겠습니다.
모던 자바스크립트 튜토리얼을 참고하였습니다.
개발자콘솔
코드엔 에러가 항상 도사리고 있다. 로봇이 아니라 사람이라면 분명 에러를 만들것이다.그런데 브라우저는 스크립트에 문제가 있어서 에러가 발생해도 이를 사용자에게 직접 보여주지 않는다. 에러가 발생했는지조차 모르면 에러를 고칠 수 없을 것이다.
브라우저엔 개발자 도구 라는 것이 내장되어 있다. 이 도구를 이용하면 에러를 확인할 수 있다.
스크립트에 대한 쓸만한 정보도 얻을 수 있다.
대부분의 개발자는 Chrome이나 Firefox를 이용해 개발하는 걸 선호한다. 두 브라우저에서 제공하는 개발자 도구가 굉장히 훌륭하기 때문이다. 기타 브라우저들도 개발자 도구를 제공하고 독특한 기능이 있지만, 거의 Chrome이나 Firefox 기능을 따라가는 수준이다. 그래서 개발자들은 Chrome이나 Firefox 중 선호하는 브라우저를 하나 택해 개발하다가 사용하고 있는 브라우저에 종속된 문제가 발생하면 다른 브라우저로 전환해 개발을 이어나가곤 한다.
개발자 도구에서 지원하는 기능을 잘 활용하면 개발 효율이 상당히 올라간다. 이 챕터에선 개발자 도구를 열어 에러를 확인하고, 다양한 명령어를 입력해 보는 방법에 대해 소개한다.
Chrome
bug.html을 열어보자. 페이지 내 스크립트에 에러가 있는지, 일반적인 사용자 눈에는 이 에러가 보이지 않는다. 개발자 도구를 열어 에러를 확인해보자. F12를 눌러보자F12를 눌러준다. Mac 사용자라면 Cmd+opt+3를 누릅니다. 개발자 도구가 보일 것이다. 개발자 도구를 처음 열어보면 console 패널이 기본으로 보인다.
화면 구성은 사용하고 있는 Chrome 버전에 따라 다르다. 버전이 바뀔 때 마다 구성이 조금씩 바뀌긴하지만 큰 틀은 바뀌지 않는다.
에러 메시지 아래에 파란색 기호 > 가 있는데, 이 기호가 있는 곳엔 자바스크립트 명령어를 입력할 수 있다. 이름 커맨드 라인(command line)이라 부른다. 커맨드 라인에 명령어 (command line)이라 부른다. 커맨드 라인에 명령어(command)를 입력하고 Enter를 누르면 해당 명령어가 실행된다.
TMI-Multi_line input
보통은 한 줄 짜리 입력하고 Enter를 눌러 해당 명령어를 실행하는 작업을 많이한다. 명령어를 여러 줄에 걸쳐 작성하고 싶다면 shift-Enter를 누르면 된다. shift-Enter를 누르면 명령어를 실행시키지 않고 줄 바꿈만 할 수 있기 때문에 자바스크립트 코드 조각을 입력하는 것도 가능해진다.Firefox, Edge 및 기타 브라우저
F12를 누르면 대부분의 브라우저에서 개발자 도구를 열 수 있다. 브라우저는 다르지만 개발자 도구 인터페이스는 거의 유사하기 개발자 도구에 입문해보시길 바란다.Safari
Mac 전용 브라우저인 Sapari에서 개발자 도구를 사용하려면 '개발자 후 메뉴(Develop menu)를 명시적으로 활성화해줘야 한다.환경설정(Preference)의 고급(Addvanced)패널을 클릭한 후 메뉴 막대기에서 개발자용 메뉴 보기 체크 박스를 체크해 개발자 도구를 활성화한다.
