[웹개발] 개발자 도구 사용하는 법 : Programming Story

웹에서 개발자 도구 사용하는 법

웹개발을 하는 개발자들에게 특히나 유용한 "개발자 도구" 사용하는 방법을 소개하려고 한다. 개발자 도구는 코드를 변경하지 않고 무언가를 테스트하거나 css 속성을 파악하거나, 웹개발 디버깅을 하는데 특히나 유용하다.

일단 개발자 도구를 키기 위해서는 F12 혹은 Control + Shift + I를 누르면 된다. 혹은 웹 상에 우클릭을 한 뒤, "검사" 버튼을 눌러도 동일하게 개발자 도구가 실행된다.

사실 개발자 도구만 키면 어떻게 사용하는지 절반은 배우게 된 것인데, 키면 아래와 같이 확인할 수 있는 html과 css 부분이 나온다.

가장 쉽게 접할 수 있는 네이버 웹을 통해 예시를 살펴보자.

네이버 개발자 도구

위와 같이 키면 여러 html과 css를 확인할 수 있다.

개발자 도구에 보면 elements, console, sources, network 이런식으로 구분이 되어있는데 오늘은 이 중 가장 유용하게 활용할 수 있는 elements와 console 탭에 대해 알아보도록 하겠다.

1. Elements 탭

먼저 Elements 탭의 경우

위 1 번이라고 써있는 부분을 클릭 후 알고자 하는 부분을 클릭하게 되면 오른쪽과 같이 html 전체 코드 중 해당 클릭된 부분의 html 부분을 알 수 있다. 클릭하면 해당 부분의 색깔도 #03C75A (구글에 hex color code라고 검색하면 더 자세히 알 수 있을 것이다)

여기서 css 같은 경우에는 코드에서 직접 변경하지 않고 해당 html, css 부분에서 변경하면 변경한 내용으로 즉시 웹상에서 확인이 가능하다. css 의 경우에 이렇게 고치면 원하는 방식대로 될 것이라는 확신이 없는 경우에 위 웹상에서 변경하고 즉시 변경된 웹으로 확인이 가능하다는 장점이 있다.

2. Console

다음으로는 console tab에 들어가보자.

console 탭은 특히 디버깅 하기에 좋다.

화면 단 코드에

console.log("버튼 클릭");

이런식으로 적어두면 해당 버튼을 클릭했을 시 해당 메세지가 콘솔 창에 나타나면서 어떤 이벤트를 타고 호출하는지 일련의 과정을 확인할 수 있다.

console창 예시

위는 티스토리 작성 웹 화면이 개발자 도구 예시인데 위와 같이 console 창에 디버그 메세지가 남는 것을 확인할 수 있다.

또한 만약 화면단에서 스크립트 오류가 나서 더 이상 진행이 되지 않을 경우에는 콘솔창에 빨간 메세지로 원인을 알려주기 때문에 매우 유용하다.

화면개발이 완료되서 배포까지 된 정식 사이트의 경우에는 개발자도구를 사용할 일이 거의 없지만 로컬 환경에서 테스트를 해보고 있는 웹 개발자에게 특히나 유용한 기능이다.

또한 정식으로 어느 코드를 타면서 어떤 액션이 취해지는지 디버그를 하기 위한 방법으로

코드단에서

debugger;

를 삽입을 해 놓으면 해당 코드부터 하나하나 액션이 취해지는 코드를 타고 디버그가 가능하니 매우 유용한 기능이다.