웹 개발자라면 누구나 좋아할 크롬 도구

크롬 개발자 도구 크롬 개발자 도구(Chrome Developer Tools 또는 DevTools)는 크롬에 기본 탑재된 유용한 웹 개발 및 디버깅 도구다. 이 도구는 요소(Elements), 네트워크(Network), 소스(Sources), 타임라인(Timeline), 프로필(Profiles), 리소스(Resources), 감사(Audits), 콘솔(Console) 패널로 구성되어 있다. 크롬 브라우저 우측 상단의 메뉴 아이콘, 도구 더 보기, 개발자 도구를 차례로 선택해 DevTools를 열 수 있다. 또는, Ctrl+Shift+I(맥의 경우 Cmd+Opt+I)를 이용할 수 있다. DevTools가 열린 상태에서 Ctrl+를 통해 패널과 패널 사이를 이동할 수 있다. DevTools의 가장 큰 용도는 크롬에 표시된 웹 페이지 요소의 CSS와 HTLM을 검사하는 것이다. DevTools 탐색(내비게이션) 막대의 요소(Element) 탭을 클릭하면 된다. 웹 페이지 뷰에서 페이지 요소를 오른쪽 클릭, Inspect Element(요소 검사)를 선택해 웹 페이지의 각 요소를 번갈아 검사할 수 있다. 또 오른쪽 Styles 창에서 CSS를 실시간 편집할 수 있다. 코드 편집기를 실행시키지도 않고도, 페이지가 바뀌는 모습을 확인하면서 개발할 수 있다.

팁: 캐시(Cache) 끄기 크롬으로 웹 페이지를 확인하면서 디버깅하고, 자바스크립트나 CSS 파일을 편집하고 싶다면 크롬의 캐시를 꺼야 한다. DevTools가 열린 상태에서만 이 설정을 사용할 수 있다. 캐시를 끄려면 DevTools 탐색 막대의 오른쪽 톱니 모양 아이콘을 클릭한 후, 'Disable cache (while DevTools is open)'의 체크박스를 표시한다.

감사(Audits) DevTools의 감사 탭은 크롬에서 웹 페이지의 성능을 개선하는 제안을 확인할 수 있는 5~6가지 방법 중 하나다. 그림의 긴 목록은 인포월드 뿐 아니라 영리 목적의 사이트에 통상 적용되는 제안들이다. 예를 들어, CSS와 자바스크립트 파일을 최소화(Minifying)해 여백을 줄이고, 최소화한 파일을 병합해 이를 로딩하는 데 필요한 GET 요청의 수를 줄이는 것은 상용 웹 사이트라면 일반적으로 적용해야 하는 방법이며, 이는 사이트 성능에 큰 변화를 가져올 수 있다. 가장 위의 두 항목을 보면 인포월드가 이 단계를 생략했음이 분명해진다. 어쩌면 디버깅 목적일지도 모르겠다.

네트워크(Network) DevTools의 네트워크 탭에서는 현 페이지의 HTTP 요청과 응답 리스트와 타임라인을 확인할 수 있다. 화면을 보고 있는 동안에도 계속 정보가 바뀔 것이다. 캐시를 켜면 요청의 수가 감소하는 것을 확인할 수 있다. 많은 시간이 소요되는 특정 항목을 좁혀 살펴보기 위해 확인하는 정보를 쉽게 필터링할 수 있다. 필터 상자에 스트링을 입력해 이름 등으로 소스를 필터링할 수 있다. 아니면 필터 상자 오른쪽의 소스 형식 레이블을 클릭해 형식을 기준으로 필터링할 수도 있다. 요청을 개시하는 스크립트나 페이지에 대한 정보는 꽤 유용한 역할을 한다. 페이지 개발자는 이를 알고 있을 것이다. 그러나 다른 사람은 소스나 리소스 탭에서 이를 확인해야 하는 경우가 많다.

네트워크(Network) DevTools의 네트워크 탭에서는 현 페이지의 HTTP 요청과 응답 리스트와 타임라인을 확인할 수 있다. 화면을 보고 있는 동안에도 계속 정보가 바뀔 것이다. 캐시를 켜면 요청의 수가 감소하는 것을 확인할 수 있다. 많은 시간이 소요되는 특정 항목을 좁혀 살펴보기 위해 확인하는 정보를 쉽게 필터링할 수 있다. 필터 상자에 스트링을 입력해 이름 등으로 소스를 필터링할 수 있다. 아니면 필터 상자 오른쪽의 소스 형식 레이블을 클릭해 형식을 기준으로 필터링할 수도 있다. 요청을 개시하는 스크립트나 페이지에 대한 정보는 꽤 유용한 역할을 한다. 페이지 개발자는 이를 알고 있을 것이다. 그러나 다른 사람은 소스나 리소스 탭에서 이를 확인해야 하는 경우가 많다.

페이지스피드 인사이트(PageSpeed Insights) 크롬용 페이지스피드 인사이트는 별개 도구였다가, 최근 크롬 DevTools로 통합됐다. 감사(Audit) 등 다른 도구와 중복되는 부분도 있지만, 개인적으로 이를 선호한다. 규칙(Rule) 이름을 클릭하면 추가 정보를 확인한 뒤 제안받은 변경을 도입할 수 있다. 통상적으로 H(High-impact)가 표시된 규칙을 출발점으로 삼는다. 영향 정도를 순위로 책정한 것이 특히 유용한 부분이다.

YSlow 성능과 관련해 유용한 크롬 확장 프로그램이 YSlow다. 특정 페이지가 느린 이유를 알 수 있기 때문이다. 야후 익셉셔널 퍼포먼스(Yahoo Exceptional Performance) 팀이 개발한 도구인 YSlow는 총 34개 규칙 가운데 테스트와 관련된 23개 규칙을 이용해 웹 페이지의 성능을 분석한다. YSlolw는 2012년 오픈 소스로 제공됐다. YSlow는 페이지스피드 인사이트(PageSpeed Insights)와 유사하다. 두 도구를 동시에 사용자는 웹 개발자가 많다. 각 테스트 결과에 A에서 F까지의 점수가 책정된다. 필자의 경우 F 점수를 출발점으로 삼는다. 테스트 결과를 클릭하면 YSlow가 제안하는 문제 해결 방법을 확인할 수 있다. 적용할 수 없는 방법도 있으니, 무조건 변경해서는 안 된다. YSlow는 크롬 외에도 7가지 환경을 지원하며, 기트허브(GitHub)에서 코드를 받을 수 있다.

프로필(Profiles) DevTools의 프로필 탭에서는 웹 페이지가 시간을 사용하는 장소를 확인할 수 있다. 광고가 많은 페이지의 경우 효과가 떨어지는 분석이 될 수 있다. 필자는 유휴 시간은 무시한다. 그리고 통상 가장 많은 시간이 소요되는 부분부터 시작해 개선할 수 있는 지점을 찾는다. 페이지스피드 인사이트나 YSlow의 제안대로 이행해 프로필을 개선할 수 있는 경우가 많다.

리소스(Resources) DevTools의 리소스 탭은 웹 페이지의 스크립트를 빠짐 없이 빠르게, 그리고 쉽게 확인할 수 있는 장소이다. 필자는 통상 페이지의 기능을 확인할 때 이 창을 이용한다. 그림의 $(document).ready 기능은 jQuery를 이용해 반응형 페이지를 만들었음을 보여준다.

타임라인(Timeline) DevTools의 타임라인 탭은 웹 페이지의 시간이 사용된 방식을 고수준으로 확인할 수 있는 장소이다. 예를 들어, 그림의 (왼쪽 막대에서) 첫 100ms는 로딩에, 두 번째 100ms는 렌더링에 주로 사용됐음을 알 수 있다. 페이지는 스크립팅에 3초를 사용했다. 상당히 시간이 오래 걸린다. 그러나 스크립트 시작 전에 렌더링 대부분이 처리되기 때문에 사용자가 스크립팅을 눈치채지 못할 것이다.

장치 에뮬레이션 크롬은 사파리(Safari)와 마찬가지로 모바일 장치를 에뮬레이션한 뒤, 반응형 디자인을 중심으로 웹 페이지 디자인을 테스트할 수 있다. 모바일 에뮬레이션에는 마우스를 터치 이벤트로 에뮬레이션하는 기능도 포함되어 있다. 모바일 웹이나 하이브리드 앱을 개발할 때 이 기능을 자주 사용한다. 모바일 장치에 로딩하지 않고도, 앱이 장치에서 보이는 모습, 작동되는 형태의 95%를 파악할 수 있다. 모바일 에뮬레이션을 실행시키려면 DevTools의 탐색 막대에서 스마트폰 모양의 아이콘을 클릭한다. 여러 다양한 인기 스마트폰과 태블릿을 선택할 수 있고, GPRS에서 여러 등급의 3G, 와이파이 등 다양한 네트워크에서 페이지 성능을 확인할 수 있다. 에뮬레이션할 장치와 네트워크를 선택한 후, DevTools의 여러 창을 이용해 페이지 성능을 검사한다.

크롬 장치 검사(Chorme Inspect Devices) 설정을 조금 조정하면 컴퓨터의 크롬에서 USB로 연결한 모바일 장치에서 실행되는 크롬 페이지를 검사하고 디버깅할 수 있다. 전부는 아니지만, 대부분의 DevTools를 장치 검사에 이용할 수 있다. 장치 에뮬레이션으로 수행할 수 있는 95% 이상을 넘어 검사할 때 유용하다. 설정을 조정하는 것이 다소 까다롭다. 장치와 컴퓨터 모두에서 설정을 조정해야 한다. 그러나 이와 관련된 자료가 풍부하다. 장치에서 설정을 조정하면 여러 개발자 기능이 활성화된다. 개발자가 아닌 사람은 사용해서는 안 될 가상 위치(Mock locations) 등 개발자 도구를 예로 들 수 있다.

웹 개발자 확장 프로그램 크롬 DevTools로 필요한 작업을 모두 처리할 수 없다면, 웹 개발자 확장 프로그램(Web Developer extension)이라는 플러그인 가운데 하나가 필요할 것이다. 약 100개의 작은 기능을 제공한다. 톱니 아이콘을 클릭한 후, 탭을 탐색해 필요한 기능을 클릭해 활성화할 수 있다.

파이어버그 라이트(Firebug Lite) 크롬 DevTools가 등장하기 전에는 파이어폭스에서 파이어버그(Firebug) 디버거 도구를 이용하는 개발자가 많았다. 이 파이어버그의 하위 버전인 파이어버그 라이트를 크롬에 설치할 수 있다. 설치하면 꽤 유용한 역할을 하는 도구다. 필자가 좋아하는 기능은 DOM 익스플로러다. 다른 기능의 경우, DevTools와 중복되는 기능이 많다.

웹스톰(WebStorm) HTML/CSS/자바스크립트용 IDE 겸 관련 기술인 웹스톰(WebStorm)에는 크롬에서 페이지를 디버깅할 수 있는 도구가 들어있다. 과거에는 파이어폭스에서 실행되는 페이지의 디버깅에도 사용할 수 있었다. 그러나 파이어폭스 개발자들이 API를 변경하면서 문제가 생긴 뒤로는 잘 이용되지 않는다. 디버깅을 위해서는 젯브레인스(JetBrains) 커넥터를 크롬에 설치한 후, 웹스톰(또는 다른 유사 프로그램)을 실행시켜야 한다. 페이지가 중단점에 도달하면, 웹스톰 디버거에 흥미로운 정보가 표시된다.

넷빈스 커넥터(NetBeans Connector) 웹스톰과 마찬가지로 크롬에 연결해 디버깅할 수 있는 도구가 넷빈스다. 넷빈스 커넥터를 설치하면 DevTools와 다소 중복되는 크기 조정 및 검사 기능 몇 개가 추가된다. 넷빈스는 또 탑재된 웹킷(WebKit) 브라우저 엔진 사본을 이용해 디버깅한다.