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