자바스크립트를 학습하다보면 개발자 도구를 꽤 자주 들여다보게 됩니다. 그래서 자바스크립트에 들어가기 이전에 이 도구를 간단히 알아보고 넘어가겠습니다.
크롬을 기준으로 "F12"를 누르시면 됩니다.
그러면 이런창이 나오는데 이 창이 바로 개발자 도구 입니다. 상단에 보면 Console, Elements, Sources..등이 있습니다. 이 탭들에서 제가 공부하면서 사용하고 들여다보는 횟수가 빈번한 탭 세 가지를 간략히 설명하겠습니다.
1. Console
콘솔 탭은 코드의 실행 로그와 코드 실행의 기능을 가지고 있는 창입니다. 나중에 배울 console.log()의 내용을 확인하거나 특정 명령을 통해 요소 추출, 오류나 경고 메세지의 확인을 할 수 있습니다. 그렇기 때문에 결과 창의 이 부분을 확인하여 오류를 잡고 값을 확인하는 등 개발과 연습에 있어 가장 많이 보게될 개발자 도구 탭입니다.
2. Sources
소스 탭은 페이지에 사용된 코드, 이미지 등 파일을 엿볼 수 있는 탭입니다. 여기서 자바스크립트 소스 코드를 디버깅 할 수 있습니다. 즉, 비주얼 스튜디오나 인텔리제이 등의 IDE에서 지원하는 디버깅툴과 거의 같은 역할을 한다고 생각하시면 됩니다.
3. Elements
엘리먼츠 탭은 html 파일을 보여주는 탭입니다. html의 부분이 웹 페이지에 어느 부분을 나타내고 있는지를 알아 내거나, 웹 페이지의 변화에 따른 html파일의 변화를 보여주는 탭입니다.
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] <script>태그의 위치 (0) | 2021.01.26 |
|---|---|
| [Javascript] html 파일에 자바스크립트 삽입하기 (0) | 2021.01.25 |
| [JavaScript] Hello World! (0) | 2021.01.25 |
| [Javascript] 에디터 설치하기 (0) | 2021.01.22 |
| [JavaScript] 자바스크립트 개요 (0) | 2021.01.21 |
댓글