개발자 도구 사용법

우리가 HTML과 CSS, JavaScript를 사용해 제작한 웹페이지는 웹 브라우저를 사용해 볼 수 있다.

웹페이지의 구조를 파악하기 쉽도록 구조를 보여주는 도구는 웹 브라우저 초기부터 있었고, 이 내장 지원 도구를 개발자 도구라고 한다.

만약 웹페이지의 레이아웃이 깨졌을 경우, 문제의 원인을 찾기 위해 HTML 코드를 리뷰하며 문제가 어디서 발생한 것인지 개발자 도구를 사용해 보다 쉽게 찾을 수 있다.

 

개발자도구는 키보드 단축키 F12, 또는 우클릭 검사를 눌러 표시할 수 있다.

 

개발자 도구는 다음과 같은 기능들을 내장하고 있다.

1. 웹페이지 소스 보기

- HTML, CSS, Javascript 외에도 해당 웹페이지에 포함된 모든 리소스를 볼 수 있다. 소스는 우측에 표시된다.

 

2. 요소별 CSS 보기 (Element)

- styles

• ctrl+shift+c 상태에서 확인하고싶은 개체를 클릭하면 styles 탭에서 해당 개체의 상세 스타일을 볼 수 있다.
• 해당 개체의 상세 스타일이 어느 스타일시트의 몇번행인지 알 수 있다.
• 속성을 더블클릭하면 속성 값이 입력 필드로 변하며 수정가능한 상태로 변한다.

상속받은 모든 css는 밑에서부터 위로 표시된다

• 적용되어있는 스타일에 마우스오버시 체크박스가 노출되는데 옵션을 해제해 해당 옵션이 없는경우를 확인할 수 있다.
• 주의! 상속받은 스타일이 없는지 확인해야한다

 

개체에 animation 속성이 있는경우, 표시영역을 선택해 다른 속성의 애니메이션을 미리 적용해 볼 수 있다.

 

css 편집기 상단 오른쪽의 :hov 아이콘을 클릭해 선택한 요소의 특정상태를 볼 수 있다.

 

- Computed

• 해당 개체의 크기, 마진, 패딩, 보더 값을 직관적으로 볼 수 있다.
• 해당 개체의 상세 스타일이 어느 스타일시트의 몇번행인지 알 수 있다.

3. 모바일화면 미리보기

• 모바일 모드 토글 버튼을 눌러 다양한 모바일 화면을 미리 볼 수 있다.
• responsive를 선택하면 원하는 해상도의 화면을 미리 볼 수 있다.
• 배율을 설정할 수 있다.

주의! 일부 HTML 태그, CSS 적용 결과는 개발자 도구에서 보여주는 화면 결과와 실제 모바일 화면 결과가 다를 수 있기 때문에 반드시 별도로 확인 절차를 거쳐야 한다.

 

4. 콘솔 (Console)

자바스크립트의 콘솔 메시지 출력 정보 및 웹페이지의 경고, 에러메시지를 확인할 수 있다.

 

5. 포매팅 (Formatting)

개발시에 외부 리소스 파일을 링크해서 사용하게 되는 경우가 있다. 이때  ".min.js", ".min.css"와 같은 미니마이즈화 한 버전의 파일명을 자주 보게된다.

미니마이즈화란?

- 불필요한 공백과 줄 바꿈을 제거해 파일 크기를 작게 줄인 파일.

미니마이즈 파일을 개발자도구의 Pretty-print 버튼을 눌러 포맷팅을 할 수 있다. 포맷팅 할 경우 해당 소스는 파일명 오른쪽에 ":formatted"가 추가로 표시된다.

표시된 버튼을 누르면...

포맷팅 된 파일은 소스를 보기 좋게 바꿔준다!

 

6. 네트워크 (Network)

웹페이지와 웹페이지에 포함된 모든 리소스들이 로딩되는 시간, 리소스 파일크기, 상태 코드, 리소스 타입 등 리소스의 네트워크 전송 정보를 확인할 수 있다.

이미지 파일이 너무 커서 전체 웹페이지 로딩 완료가 지연되는 경우 최적화를 하는데 활용할 수 있다.

 

7. 애니메이션 디버깅

애니메이션 디버깅은 기본상태에서 할 수 없으므로 애니메이션 탭을 선택해야한다

See the Pen 애니메이션 예시 by baeseongeon (@seongeon) on CodePen.

 

 

이러한 애니메이션이 있다고 가정해보자 해당 애니메이션을 개발자도구로 본다면?

노란색영역을 통해 재생속도를 선택할 수 있고. 연두색 영역을 통해 애니메이션을 재생/정지한 상태를 볼 수도 있다. 보라색 영역을 클릭할 경우 애니메이션 시작점으로 이동한다.

이렇게 개발자도구를 활용해 애니메이션을 디테일하게 볼 수 있다!

 

개발자 도구 표시 위치 바꾸기

크롬 개발자 도구는 기본적으로 웹 브라우저 안에 영역을 차지하기 때문에 좁은 화면, 또는 모바일 화면을 개발자 도구에서 보는 확인하는 경우 불편할 수 있다.

사진의 파란색 영역을 눌러 Dock side를 본인에게 맞게 설정하고 편리한 환경을 만들자!

디자인 모드

콘솔 창 커맨드 입력란에 다음 커맨드를 입력해 디자인 모드를 활성화 시킬 수 있다.

document.designMode = "on"

• 디자인 모드에서 하이퍼링크는 동작하지 않는다.
• 디자인 모드를 벗어나려면 위의 커맨드의 값을 off로 바꿔주면 된다.
• 내용을 추가로 입력했을 경우 레이아웃이 어떻게 변경되는지 쉽게 확인할 수 있다.
• 웹페이지를 다시 로드했을 경우 디자인 모드가 풀린다.

이러한 레이아웃이 있다고 가정해보자.

See the Pen 고정 너비 아이템이 있는 레이아웃 by baeseongeon (@seongeon) on CodePen.

• 만약 텍스트가 이 이상 입력된다면?을 가정해 디자인모드로 텍스트를 추가입력해서 레이아웃을 확인할 수 있다.

• 응용해서 약관내용에 스크롤이 생기는지 확인해야하는데.. 약관내용이 미정이라 스크롤이 생기는지 확인이 불가능하다면 ? 디자인모드를 활용해보자!

 

해당글은 어포스트 [HTML&CSS 마스터북] 일부를 참고해 작성했습니다