소개
Chrome은 기능이 풍부하고 강력한 웹브라우저로, 웹 애플리케이션의 가능성에 선구적인 역할을 합니다. Google은 최종 사용자에게 매우 빠르고 안정적이며 기능이 풍부한 브라우징 환경을 제공하기 위해 열심히 노력해 왔습니다. 또한 Google은 귀하와 같은 개발자들이 Chrome에서 만족스러운 경험을 할 수 있도록 보장합니다. 웹 개발자와 프로그래머가 Chrome 및 Safari에서 번들로 제공하고 사용할 수 있는 개발자 도구를 사용하여 브라우저 및 웹 애플리케이션 내부에 깊이 있게 액세스할 수 있습니다.
개발자 도구는 오픈소스 Webkit 프로젝트의 일부입니다. 이 도움말에서 설명하는 내용은 대부분 Chrome과 Safari 모두에 적용됩니다. 하지만 스크린샷은 Chrome 6을 사용하여 찍은 것이므로 브라우저에 약간의 차이가 있을 수 있습니다.
이 도움말에서는 개발자 도구를 간략하게 살펴보고 가장 많이 사용되는 유용한 기능을 살펴보겠습니다. Google의 타겟층은 개발자 도구에 대해 몰랐거나 아직 조사하지 않은 웹 개발자입니다. 하지만 숙련된 웹 개발자라도 한두 가지 팁을 줄 것입니다.
개발자 도구의 인스턴스가 이 도움말의 스크린샷과 일치하지 않는 경우 5 버전으로 업그레이드하여 여기에 설명된 모든 기능에 액세스할 수 있도록 하는 것이 좋습니다.
개요
전반적으로 개발자 도구 보기에서 사용할 수 있는 주요 도구 그룹은 8가지이며, 버전이 출시될 때마다 기능이 확장됩니다. Chrome 5는 이제 요소, 리소스, 스크립트, 타임라인, 프로필, 저장소, 감사, 콘솔을 제공합니다.
요소
Elements 도구를 사용하면 브라우저에서 보는 대로 웹페이지를 볼 수 있습니다. 즉, 요소 도구를 사용하여 원시 HTML, 원시 CSS 스타일, 문서 객체 모델을 보고 실시간으로 조작할 수 있습니다.
리소스
리소스 도구를 사용하여 웹페이지 또는 애플리케이션이 웹 서버로부터 요청하는 구성 요소, 이러한 요청에 걸리는 시간 및 필요한 대역폭을 알아보세요. 또한 각 리소스의 HTTP 요청 및 응답 헤더를 볼 수도 있습니다. 리소스 도구는 페이지 로드 시간을 단축하는 데 매우 유용합니다.
스크립트
페이지의 JavaScript 내부에서 피어링하려면 스크립트 도구를 사용합니다. 여기에서 페이지에 필요한 스크립트 목록과 모든 기능을 갖춘 스크립트 디버거를 확인할 수 있습니다. 또한 JavaScript는 즉석에서 변경할 수도 있습니다.
타임라인
고급 타이밍 및 속도 분석을 위해 타임라인 도구는 Chrome의 다양한 비하인드 스토리 활동을 심층적으로 보여줍니다. 브라우저가 DOM 이벤트를 처리하고 페이지 레이아웃을 렌더링하며 창을 그리는 데 걸리는 시간을 알아볼 수 있습니다.
프로필
프로필 도구를 사용하면 JavaScript 스크립트의 성능을 캡처하고 분석할 수 있습니다. 예를 들어 실행에 가장 많은 시간이 걸리는 함수를 파악할 수 있고, 어떤 함수를 최적화해야 할지 정확히 파악할 수 있습니다.
스토리지
최신 웹 애플리케이션은 단순히 쿠키보다 지속성이 더 강하며, 저장소 도구를 사용하면 로컬 브라우저 저장소를 추적, 쿼리 및 디버그할 수 있습니다. 이 도구는 로컬 데이터베이스, 로컬 저장소, 세션 저장소, 쿠키에 저장된 데이터를 표시하고 쿼리할 수 있습니다.
감사
감사 도구는 웹 최적화 컨설턴트를 옆에 두는 것과 같습니다. 이 도구는 페이지가 로드될 때 페이지를 분석하고 페이지 로드 시간을 줄이고 인지된 (및 실제) 반응성을 높이기 위한 최적화 방안과 제안사항을 제공합니다.
Console
마지막으로, 개발자 도구는 모든 기능을 갖춘 콘솔을 제공합니다. 콘솔에서 임의의 JavaScript를 입력하고 프로그래밍 방식으로 페이지와 상호작용할 수 있습니다.
시작 중
Chrome 내에서 개발자 도구를 쉽게 시작할 수 있습니다.
운영체제의 경우 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 '요소 검사' 옵션을 선택하기만 하면 됩니다. 그러면 개발자 도구가 열리고 클릭한 요소로 바로 드릴다운할 수 있습니다.
작동 방식을 확인하려면 Chrome 브라우저에서 http://www.google.com을 방문하세요. Google 로고를 마우스 오른쪽 버튼으로 클릭하면 다음 옵션이 표시됩니다.
'요소 검사'를 선택하면 다음과 같은 개발자 도구가 표시됩니다.
개발자 도구가 요소 탭 내에서 열리고 Google 로고의 <img> 태그로 자동으로 드릴다운되어 강조 표시되는 방식을 확인하세요. 이는 어떤 HTML이 특정 페이지 요소를 생성했는지 궁금할 때 매우 유용합니다.
간단한 단축키를 사용하여 개발자 도구를 열 수도 있습니다. 운영체제에 따라 다음 단계를 따르세요.
- Windows 및 Linux의 경우
Control-Shift-J키를 선택합니다. - Mac에서는
Command-Option-J키를 선택합니다.
마지막으로 기본 브라우저 메뉴에서 도구를 열 수 있습니다.
Mac의 경우 기본 애플리케이션 메뉴 바에서 보기, 개발자, 개발자 도구를 선택합니다.
Windows PC에서는 오른쪽 상단의 페이지 메뉴를 사용하여 개발자, 개발자 도구를 선택해야 합니다.
개발자 도구가 열려 있고 준비되었으니 이제 Google 홈페이지의 요소를 탐색해 보겠습니다.
요소
개발자 도구의 첫 번째 탭은 '요소'입니다. 이것은 웹페이지의 구조를 들여다보는 창으로서 브라우저가 보는 대로 표시합니다.
DOM 탐색
페이지의 일부 요소에 대한 HTML 스니펫을 확인해야 하는 경우 '요소' 탭을 자주 방문합니다. 예를 들어 이미지에 HTML ID 속성이 있는지 여부와 이 속성의 값이 무엇인지 궁금할 수 있습니다.
페이지의 '소스를 확인'하려면 요소 탭을 사용하는 것이 더 좋습니다. Elements 탭 내에서 페이지의 DOM은 HTML 요소, 그 상위 항목 및 하위 요소를 쉽게 표시할 수 있도록 형식이 잘 지정되어 있습니다. 방문하는 페이지의 HTML이 축소되거나 너무 엉성하여 페이지의 구조를 파악하는 데 어려움을 겪는 경우가 너무 많습니다. 요소 탭은 페이지의 실제 기본 구조를 볼 수 있는 솔루션입니다.
예를 들어 다음은 Google 홈페이지의 '소스 보기'에서 출력된 것입니다.
위의 소스는 최적화 및 축소되었기 때문에 읽기 어렵습니다. 이 형식은 클라이언트와 서버에는 적합하지만 개발자에게는 어렵습니다.
대신 페이지 소스를 읽고 싶을 때 '요소' 탭을 사용하면 예쁘게 인쇄된 구문으로 강조 표시된 요소 계층 구조를 볼 수 있습니다.
또한 '요소' 탭에서는 페이지에 있는 모든 요소의 스타일, 메트릭, 속성 및 이벤트 리스너를 찾아보고 상호작용하며 변경할 수도 있습니다.
스타일 둘러보기
CSS의 계단식 특성 덕분에 '요소' 탭의 스타일 브라우저를 매우 유용하게 사용할 수 있습니다. 때때로 스타일이 저절로 접히고 의도하지 않은 시각적 요소가 나타날 수 있습니다. 브라우저가 요소에 적용하는 스타일 지정 규칙을 알면 이러한 문제를 디버그하는 데 도움이 됩니다.
요소 탭에서 요소를 클릭하면 해당 요소에 연결된 모든 스타일이 표시됩니다.
위의 스크린샷을 보면 적용 중인 모든 스타일 속성을 알 수 있습니다. 예를 들어 패딩은 <img> 요소의 스타일 속성에서 직접 가져옵니다. 하지만 너비와 높이는 각각의 네이티브 속성에서 가져옵니다. 흥미롭게도 <center> 태그, <body> 태그 등에서 상속된 스타일이 있음을 알 수 있습니다.
개별 스타일과 그 출처를 확인하는 것도 좋지만 스타일을 계산하여 요소에 적용한 후 최종 스타일 집합을 확인하는 것도 매우 유용합니다. 아래 스크린샷과 같이 계산된 스타일 메뉴를 선택하여 최종 결과물을 확인할 수 있습니다.
다음으로 '요소' 탭에서 제공하는 다른 기능에 대해서도 간단히 살펴보겠습니다. 다음 도움말에서 다음 내용을 더 자세히 다룰 예정입니다.
박스 모델
측정항목 메뉴를 선택하여 선택된 요소에 적용되는 박스 모델을 확인할 수 있습니다.
요소 속성
속성 메뉴를 선택하여 JavaScript 및 DOM에서 보는 것처럼 요소의 모든 속성을 볼 수 있습니다.
이벤트 리스너
마지막으로, 이벤트 리스너 메뉴를 통해 요소에 연결되거나 이벤트 리스너를 볼 수도 있습니다.
요약
요소 탭을 통해 많은 기능을 사용할 수 있으며, 이후 도움말에서는 개별 메뉴에 대해 더 자세히 살펴보겠습니다.
페이지가 브라우저에 어떻게 보이는지 확인하려면 Elements 탭을 사용해야 합니다. '이 스타일은 어떻게 계산되나요?' 또는 '이 구성요소를 생성한 HTML 태그'와 같은 일반적인 문제는 '요소' 탭을 통해 빠르고 쉽게 해결할 수 있습니다.
'요소' 탭을 '소스 보기'라고 생각하면 페이지를 매우 명확하게 볼 수 있습니다.
페이지를 조사한 후에는 HTML, CSS 및 이미지가 애초에 어떻게 이 페이지에 도착했는지 궁금할 수 있습니다. 다음에 설명할 리소스 탭은 클라이언트 브라우저와 웹 서버가 해당 리소스를 전송하기 위해 통신하는 방법을 보여줍니다.
리소스
애플리케이션이 작동하면 다음 단계는 네트워크 및 대역폭 성능을 최적화하는 것입니다. 서버에서 클라이언트로 애플리케이션을 가능한 한 빠르고 효율적으로 전송하는 것을 목표로 해야 합니다. 사용자는 빠른 페이지 로드에 감사를 표하고, 대역폭과 서버 리소스를 절약할 수 있으며, Google의 검색결과 순위 (현재 사이트 속도 고려)에서도 더 높은 점수를 받을 수 있습니다.
개발자 도구의 리소스 탭은 웹 서버와 클라이언트 브라우저 간의 통신을 보여주는 창입니다. 브라우저가 요청한 모든 리소스 (항상 놀라운 결과), 서버에서 리소스를 수신하는 데 걸리는 시간, 전송 중에 사용된 대역폭을 확인할 수 있습니다.
아이러니하게도, 리소스 탭을 실행하면 페이지 로드 성능에 영향을 미치므로 기본적으로 사용 중지되어 있습니다. 이 기능에 처음 액세스하는 경우 보고 있는 페이지에서 해당 기능을 사용하도록 설정해야 합니다.
약간의 성능 저하가 불필요하게 발생하지 않도록 기본 설정인 '이 세션에만 사용'을 선택하는 것이 좋습니다. '리소스 추적 사용 설정'을 클릭하면 페이지가 새로고침되고 개발자 도구가 서버에서 전송한 리소스를 모니터링하고 표시합니다.
다음 스크린샷은 Google 홈페이지에 필요한 리소스 및 로드된 리소스를 보여줍니다.
이 화면에는 많은 정보가 있으므로 하나씩 살펴보겠습니다.
기본 동작은 페이지의 모든 리소스를 요청하고 로드하는 데 걸린 시간을 표시하는 것입니다. 리소스 목록을 아래로 스크롤하면 놀랄 수도 있습니다. 클라이언트가 얼마나 많은 개별 요청을 하고 있는지 모를 수 있기 때문입니다. 클라이언트의 요청 수가 많으면 성능에 심각한 영향을 줄 수 있습니다. 무엇이 요청되었는지에 대한 가시성을 확보하는 것이 최적화의 첫 단계이며, 최종적으로는 리소스 축소입니다.
이미지 또는 스타일 시트에만 관심이 있는 경우 기본 탭 창 바로 아래에 있는 메뉴를 사용하여 리소스 유형을 필터링할 수 있습니다.
리소스가 요청되는 순서도 알아봅니다. 타임라인 표시를 사용하면 페이지의 특정 요소가 다른 요소보다 나중에 표시되는 이유를 더 잘 이해할 수 있습니다.
요청된 모든 리소스의 개요와 전체 요청 타임라인을 구성하는 방법을 알아본 후에는 개별 리소스를 상세히 살펴볼 수 있습니다.
페이지에 액세스할 때마다 일부 리소스가 요청되고 있다면 캐싱 헤더가 올바르게 구성되지 않은 것입니다. 왼쪽 목록에서 리소스를 클릭하면 리소스의 모든 헤더를 볼 수 있습니다.
헤더 표시를 사용하여 예상 HTTP 응답 코드가 설정되어 있고 적절한 헤더가 제공되었는지 확인합니다. 예를 들어, 리소스가 거의 변경되지 않거나 전혀 변경되지 않는 경우 서버는 미래의 만료일 헤더를 설정해야 합니다. 이 코드는 해당 날짜까지 리소스를 다시 요청해서는 안 된다고 브라우저에 알립니다. 이렇게 하면 페이지에 필요한 HTTP 연결의 양이 줄어들어 사이트 속도가 빨라집니다.
요약
Resources 탭에는 더 많은 기능이 있는데, 이에 대해서는 향후 도움말에서 다룰 것입니다.
리소스 탭을 사용하면 클라이언트 브라우저가 웹 서버와 통신하는 방식을 확인할 수 있습니다. 요청 시간, 요청 크기, 요청 순서 등의 이 정보를 사용하면 서버 로드와 비용을 줄이고 속도를 높이며 사용자 경험을 향상하는 스마트한 최적화를 수행할 수 있습니다.
속도는 웹사이트와 사용자, 검색엔진에서 매우 중요합니다. 리소스의 수와 크기를 줄이고 적절한 HTTP 대화가 발생하면 다음 단계는 페이지에서 실행 중인 스크립트를 조사하고 최적화하는 것입니다. 다행히도 다음에 소개된 스크립트 탭에서 바로 이 작업을 수행할 수 있습니다.
추가 리소스
개발자 도구에 대해 자세히 알아보려면 다음을 참고하시기 바랍니다.
이 도움말의 2부는 html5rocks.com에서 다른 많은 HTML5 및 Chrome 콘텐츠와 함께 제공됩니다.