If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

브라우저 콘솔로 웹 페이지 디버깅하기

console.log()와 크롬 개발자 도구를 이용해 칸아카데미에 있는 여러분의 웹 페이지를 디버깅하는 방법에 대해 배워 봅시다.

동영상 대본

웹 개발자로서 가져야 하는 가장 유용한 기술은 브라우저 개발자 도구 등를 사용해서 웹 페이지를 디버깅하는 것입니다 요즘의 브라우저는 모두 개발자 도구를 가지고 있기 때문에 모든 브라우저의 사용 방법을 익힐 수도 있겠지만 어떤 브라우저가 좋은 도구를 가지고 있는지 알아보고 그 브라우저에서 디버깅을 시작하는 것도 좋은 방법입니다 지금 저는 크롬을 쓰지만 나중에 바뀔지도 모르죠 이제 크롬에서 개발자 도구를 열어 봅시다 여러가지 방법으로 열 수 있습니다 사용하는 브라우저와 OS에서 키보드 단축키를 찾아서 사용하는게 가장 빠른 방법입니다 맥에서는 Cmd - Opt - I키 입니다 짜잔! 이게 개발자 도구입니다 개발자 도구를 여는 다른 방법으로는 마우스 우클릭 후 검사를 누르면 개발자 툴을 열어주므로 HTML 콘솔을 열려면 원하는 곳에서 클릭을 하면 됩니다 이것도 꽤나 빠른 방법이네요 마지막으로 오래 걸리는 방법입니다 메뉴로 가셔서 도구 더 보기를 누르시고 개발자 도구를 클릭하시면 역시 개발자 도구가 열립니다 맞는 방법이지만 오래걸립니다 가장 추천하고 싶은 방법은 키보드 단축키를 찾아서 기억할 때까지 반복하고 또 반복하는 것입니다 좋아요 키보드 단축키로 열어주시고 많은 도구들이 있지만 지금부터 보여드릴 도구는 JavaScript Console 입니다 JavaScript Console 입니다 이 console은 http 요청과 CSS 파일 JavaScript에 관한 모든 경고와 오류를 보여주고 로그에 기록한 모든 것을 보여줍니다 시범을 보이기 위해 console.log를 사용해서 메세지를 보여보도록 하겠습니다 consol is not defined같은 문법 오류가 많이 보이네요 타이핑을 천천히 해서 그렇습니다 실시간 환경에서는 끊임없이 새로운 코드를 평가합니다 따라서 타이핑 하는 동안 계속해서 오류를 보여주게 됩니다 칸아카데미에서 웹 페이지의 console을 사용할 때는 꼭 기억해 두세요 타이핑을 끝내기 전까지 보이는 모든 오류 메세지들을 무시하고 나중에 에러가 있는지를 확인하세요 console이 인사를 해주네요 즐겁지 않나요? 좋아요 브라우저 개발자 도구에서 할수 있는 것들이 많이 있고 그것들을 경험해봐야 하지만 이 코스를 따라가면서 간단한 디버깅을 해보는 것도 충분히 도움이 될 겁니다