익스플로러 개발자도구 사용법 안내(F12 이용)

HTML이나 CSS를 처음 접하시는분들이라면 개발자도구를 이용해서 DOM구조를 파악하는 방법을 알아두면 정말 편하실겁니다. DOM이란 홈페이지가 어떻게 구성이 되어 있는지, 그 요소를 나타내는 것을 말하는데요. 파이어폭스에는 파이어버그, 크롬에서는 플러그인등이 지원이되고 있습니다. 익스플로러에도 IE11 버전정도면 정말 괜찮은 개발자도구를 지원하고 있는데요. 사용법을 간단하게 알아보도록 하겠습니다.

 

 

 

2017/09/17 - [IT정보/베가스] - 베가스 이미지 비율 맞추기

2017/09/12 - [IT정보/환경설정] - iptime 공유기 설정 및 팁 안내

2017/09/09 - [IT정보/환경설정] - 아이피주소 확인, 내부아이피 확인방법

2017/09/07 - [IT정보/유틸리티] - 크롬 이미지 일괄 다운로드 플러그인 소개

 

익스플로러 개발자도구 사용법

이전에 관련 포스팅을 한적인 있습니다. 파이어버그라는 유용한 툴인데요. 이것처럼 사용법은 똑같습니다. DOM 요소선택을 하면 그에 해당되는 CSS 스타일 코드를 확인할 수 있고, 콘솔에서는 자바스크립트의 간단한 테스트가 가능하며, 메모리라던지, 응답성등을 볼수가 있습니다.

 

지금, 제가 소개해드릴건 DOM탐색영역인데요. 따로 크롬이나 파이어폭스를 설치를 안해도 되기 때문에 간단하게 이용하기는 편리한것 같네요.

2020.09.04 추가

혹시라도 맥에서 크롬을 사용하시는 분들이 계시면 아래 포스팅을 참고해주세요. 

2020/09/04 - [MAC/활용팁] - 맥에서 크롬 개발자모드 단축키

 

 

아래 포스팅은 파이어폭스에서 사용하는 파이어버그 입니다. 제가 가장 많이 사용하는 분석툴이며, 퍼블리셔들은 거의 이걸로 작업을 한다고 하더군요.

 

2017/05/03 - [IT정보/HTML/CSS] - CSS 스타일 분석 파이어버그 사용하기

 

 

익스플로러에서 F12키를 눌러주시면 개발자도구가 나타나는데요. 익스플로러 하단이나 별도의 창이 나타납니다. 이건 원하시는데로 바꿀 수 있으니 위치를 바꿔가며 설정해주시면 됩니다. 소스를 많이 볼 수 있는 개별 창을 추천드립니다.

 

 

 

익스플로러 개발자도구를 처음 실행하면 이러한 화면이 나타나는데요. 체크를 제일 처음 해주셔야 될 부분은 상단의 브라우저 호환성 설정이 Edge로 되어 있는지 확인을 해주세요. 만약 9버전 이하라면 웹표준을 지원하는 9버전 이상으로 바꿔 주셔야 됩니다.

 

 

 

 

다음은 DOM탐색기 밑의 화살표를 클릭해서 영역을 선택하였습니다. 이런식으로 자기가 원하는 영역의 스타일시트를 빨리 찾고 수정을 할수가 있어서 편하게 DOM을 고치면서 체크를 할 수 있습니다.

 

 

 

 

게다가 CSS스타일시트도 바로바로 확인이 가능해서 세세한 설정을 바꾸기가 정말 편해집니다.

 

 

 

 

제가 선택한 본문 영역은 CONTENT라는 ID를 사용하고있으며, style.css 310 라인에 관련 설정값이 있는걸 확인할 수 있습니다. padding을 15px로 준것도 확인이 가능합니다. 이걸 응용하시면 원하는 요소의 설정을 파악하고 수정을 하시면서 최적의 값을 설정하실 수가 있겠죠.

 

 

 

 

 

다음은 콘솔 영역인데요. 여기 영역은 자바스크립트를 직접 타이핑해서 체크를 할 수가 있습니다. document.readyState 라는 명령어로 자바의 시작을 알렸습니다. 주로 사용하는 자바스크립트를 여기에서 타이핑 후 우측 하래 화살표로 명령어를 실행할 수 있습니다. 제경우는 document.getElementById 등의 돔을 찾는 스크립트나 alert등으로 체크를 하고 있습니다.

 

 

디버거 영역은 javascript가 오류가 났을경우 오류를 디버깅을 할수가 있는 모드입니다. 친절하게도 오류가 발생하게 되면 여기 화면이 나타나면서 디버깅이 가능해지는 것이죠.

 

 

 

다음은 네트워크 메뉴입니다. 플레이버튼을 클릭후 블로그에 접속을 하였는데요. 블로그에서 왔다갔다하는 네트워크 프로토콜을 확인할 수가 있습니다. 개발자가 아니고서는 어려운 부분들일텐데. 블로그 안에서 이미지 경로를 이렇게 받고 왔다갔다 하고 있다 정도로만 참고하시면 될 것 같네요.

 

 

 

 

 

다음은 UI응답셩 메뉴입니다. 사실, 여기부분은 일반인들이 확인을 할 수가 없는 부분인데요. 블로그로딩에 글리는 시간을 체크해서 보여주는 화면이며, 저도 이정도까지는 고려를 안하고 있습니다. 사실 시간이 짧으면 짧을 수록 좋지만, 티스토리의 경우 기본적인 틀을 잘 제공해주고 있어서 크게 신경은 안쓰고 있습니다.

 

 

 

 

마지막으로 프로파일려 메뉴인데요. 네트워크 메뉴와는 다르게 여기서는 연결된 링크에 쓰이는 함수를 추적하고 사용수, 시간을 체크합니다. 조금 용도가 다르다고 할 수 있겠죠.

 

 

 

오늘은 간단하게 익스플로러 개발자도구 사용법에 대해서 알아보았습니다. F12키만 눌러보세요. 개발자도구가 나타날겁니다. 저처럼 팝업으로 안나오시는 분들은 보시고 있는 화면 아래쪽을 보시면 따로 영역이 생긴것을 .보실 수 있을겁니다. 이걸 따로 빼주시면 팝업으로 변하게 되겠죠. 조금씩 이것저것 건드려보시면서 공부를 많이 하시길 바랄께요. DOM선택만 제대로 하시고 수치만 바꾸실 수 있다면, 배우시는건 금방일꺼에요^^