크롬 개발자도구

안녕하세요 멋사3기 Kyunni입니다.

세 번째 강의는 크롬 개발자도구와 웹사이트 내에서 페이지간 이동을 하는 방법에 대해서 학습했습니다.  수업 내용을 반토막 내어서 크롬 개발자도구에 대한 내용부터 포스팅하겠습니다 :) (저는 Windows 8.1 OS를 사용합니다.)

강의 중에 이러한 것들이 있다고 언급만하고 넘어간 부분들도 자세히 설명해볼까 합니다.

크롬 개발자도구

구글에서 만든 웹브라우저인 크롬에는 개발자를 위한 다양한 도구가 기본적으로 제공됩니다. 이를 개발자도구라고 합니다. 개발자도구를 이용하면 HTML, CSS JavaScript의 생산성을 극대화할 수 있습니다. 이러한 기능은 크롬 뿐만 아니라 IE, 파이어폭스 등 대부분의 웹브라우저에서 제공하고 있습니다(이 중에서 크롬 개발자도구가 가장 빠르고 우수한 기능을 지닙니다. 이러한 이유로 많은 웹 개발자는 크롬 개발자도구를 사용합니다.). 

구글 크롬 다운로드

http://www.google.com/chrome/

크롬 개발자도구 실행

개발자도구를 실행하는 방법에는 몇 가지 방법이 있습니다. 저는 개인적으로 3번의 방법을 주로 활용합니다. 

1. 웹 화면에서 오른쪽 마우스 클릭 > 요소검사 (Ctrl+Shift+i)

2. 오른쪽 상단의 메뉴 > 도구 더보기 > 개발자도구 (Ctrl+Shift+i)

3. 단축키 F12

[결과화면]

# 참고로, 개발자도구를 새 창에서 띄우고 싶은 경우에는, 오른쪽 상단의 빨간색으로 표시한 부분을 꾸욱- 눌렀을 때 나오는 아이콘을 클릭하면 됩니다.

크롬 개발자도구, 각 탭의 이해

개발자도구는 흔히 웹 페이지를 디자인하거나 박스 모델의 속성을 시뮬레이션 시켜볼 때 활용됩니다. 그 시뮬레이션의 방법과 그 외에 어떠한 활용이 가능한 지에 대해 알아보겠습니다. 아래 내용은 개발자도구 하단에 있는 메뉴들의 기능입니다.

Elemetns	HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구
Resources	현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람할 수 있는 도구
Network	서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움
Sources	웹페이지에 삽입되어있는 JavaScript를 디버깅하기 위한 도구
Timeline	웹페이지의 성능을 측정하는 도구
Profiles	웹페이지의 JavaScript, CSS 등의 성능을 측정하여 어디에서 병목이 발생하는지 확인하는 도구  메모리 상태 스냅샷을 찍어서 메모리 누수가 일어나는 부분을 객체별로 찾기 가능
Audits	웹 애플리케이션의 성능을 향상시킬 수 있는 방법을 컨설팅해주는 도구
Console	JavaScript 명령을 실시간으로 내릴 수 있는 도구

크롬 개발자도구의 활용

1. Elements

HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구입니다. 아래에서 설명할 Sources와의 차이점은 실제 웹페이지에서 랜더링된, 즉 실제로 보여지는 부분의 HTML 코드를 띄워주고 수정할 수 있는 부분입니다. 

Elements 탭을 선택하면 개발자도구가 크게 두 화면으로 분할됩니다. 

오른쪽 화면의 탭도 한 번 간단하게 알아보도록 하겠습니다. 

· Styles : 선택한 요소가 어떠한 CSS 효과를 지니는 지에 대한 내용을 담고 있습니다.

· Computed : Box Model을 실시간으로 수정하기 좋습니다. 가로와 세로, 패딩과 마진을 체크할 수 있습니다.
· Event Listeners : 현재 Element에 어떠한 Event가 걸려져 있는지 확인해볼 수 있습니다.
· DOM Breakpoints : DOM이 어떤 Breakpoint가 적용되어있는지 확인해볼 수 있습니다.
· Properties : DOM에 대한 어떤 속성을 가지고 있는 지에 대한 유용한 정보가 됩니다.

# 웹페이지에서 원하는 박스 부분에 오른쪽 클릭을 하고 요소검사를 하였을 때 해당 코드가 개발자도구에서 표시되는 기능도 있습니다. 

# 좌측 하단의 내용은 Hierachy를 나타냅니다. 아래의 예시로 살펴보면, div.full-screen... 아래에 div.container.center 아래에 div.vertical-middle.ignore-header 아래에 h1 태그가 위치함을 알 수 있습니다.

# Styles 탭을 사용하다보면 가운데에 취소선이 그어져 있는 코드들을 확인해볼 수 있습니다. 이것은 CSS의 우선순위에서 밀려 다른  스타일이 채택되어 적용되지 않았음을 알려주는 코드입니다. 마우스를 올려 놓으면 체크 박스가 생기는데 그 체크박스를 체크해주면 취소선이 풀리면서 해당 코드의 스타일이 적용되게 됩니다.

# 이어서 위 그림의 오른쪽 상단을 보면 "style.css:2544"가 보이실 겁니다. 이것은 style.css 파일의 2544번 째 줄에 이 코드가 존재함을 의미합니다.

2. Network

네트워크 모니터링 툴이라고도 부르며, 웹브라우저와 서버 사이의 흐름을 파악하고 분석할 수 있도록 도와주는 도구입니다. 데이터를 주고 받은 내역들을 쉽게 확인해볼 수 있습니다. (style.css, img파일 등 웹페이지가 필요로 하는 데이터들을 끌어오는 흐름들이 보인다는 뜻입니다.)

추가적으로 설명하자면 두 번째 항목의 Status는 현재 서버와의 통신상태를 의미합니다. 200은 정상적으로 작동한다는 것을 의미하고, 304는 이미 사용자가 접속한적이 있기 때문에 정보를 모두 가져올 필요가 없음을 의미합니다.

Timeline은 파일을 로드하는 순서와 걸리는 시간을 시각적으로 보여주는 역할을 합니다. (병목, 지연 파악)

3. Sources

Sources는 버그를 좀 더 쉽게 찾는데 도움을 주는 도구입니다(디버거). 보통 JavaScript를 사용한 코드 내에서 Breakpoint를 잡고, 한 줄 한 줄 디버깅을 해보기 위해 사용됩니다.

4. Profiles

프로그램, 서비스의 성능을 측정해서 더 높은 수준의 성능으로 만들 수 있도록 도와주는 도구입니다. 보통 측정되는 부분은 두 가지인데, 첫 번째는 각 로직이 소요되는 부분을 측정해주는 부분이고, 두 번째는 얼마나 많은 메모리를 사용하느냐 하는 부분입니다. 위의 두 가지가 속도, 세 번째 항목이 메모리에 관련된 부분을 의미합니다.

프로그램, 서비스의 성능을 측정해서 더 높은 수준의 성능으로 만들 수 있도록 도와주는 도구입니다. 보통 측정되는 부분은 두 가지인데, 첫 번째는 각 로직이 소요되는 부분을 측정해주는 부분이고, 두 번째는 얼마나 많은 메모리를 사용하느냐 하는 부분입니다. 위의 두 가지가 속도, 세 번째 항목이 메모리에 관련된 부분을 의미합니다.

원하는 측정 항목을 클릭하고(예시로 첫 번째 항목인 JavaScript CPU Profile으로 설명하겠습니다.), Start를 누르면, 작동되는 내역들이 레코딩 됩니다. 

Stop을 누르면 기록된 내역들이 리스트로 화면에 보여지게 됩니다. 특정한 로직이 헤비하게 작동하는 경우에 원인을 분석하여 그 로직을 고쳐주면 됩니다.

5. Resources

열려져있는 웹 페이지가 어떠한 Resources로 구성되어져 있는 지 알 수 있는 탭입니다. (HTML, 이미지, data)

6. Audits

Audits는 한국어로 '감사'라는 뜻을 지닙니다. 웹페이지에서 성능을 느리게 할만한 부분이나 네트워크 상의 문제를 컨설팅해주기 위해 존재하는 도구입니다. 

Run을 실행하면, 체크된 내용들을 적용시켜서 그 결과화면을 보여주게 됩니다.

그 중 한 가지 내용만 소개해 드리자면, Web Page Performance에서 Remove unused CSS rules는 사용되지 않은 CSS 문법들은 지워줘라! 라고 컨설팅해주고 있는 내용입니다.

7. Console

브라우저에게 명령을 내리고, 브라우저의 상태를 통보받을 수 있는 창구입니다. 사용법은 console 탭을 여는 방법과, 다른 탭을 열어놓고 있는 상태에서 우측 상단의 >_ 아이콘을 클릭해서 화면을 분할하여 사용하는 방법이 있습니다.

실시간으로 JavaScript 코드를 테스트해볼 수 있는 유용한 도구입니다. 아래의 이미지는 JavaScript alert('likelion');라는 코드로 경고창을 테스트해보기 위해 콘솔창에 명령을 내려본 것입니다.