구글 크롬의 '검사' 도구를 이용한 웹사이트 진단
구글 크롬은 빠른 소비자 브라우저일 뿐만 아니라, 그 내부에 많은 개발자 기능을 숨기고 있습니다. ‘검사’ 도구를 사용하면 이러한 기능의 일부를 드러낼 수 있습니다. 처음에는 압도적일 수 있지만, 이 도구는 웹사이트가 어떻게 구성되어 있는지에 대한 통찰력을 제공하며, 자신의 사이트를 디버그하는 데 도움이 될 수 있습니다.
검사 도구 접근하기
검사 도구는 크롬의 컨텍스트 메뉴에서 찾을 수 있습니다.
브라우저의 어떤 요소에서든 마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 ‘검사’를 클릭하세요.
아래와 같이 크롬 브라우저의 측면에서 창이 팝업됩니다. 이것을 DevTools 패널이라고 합니다. 파이어폭스에서 Firebug를 사용해 본 적이 있다면, 그 일부를 인식할 수 있을 것입니다.
여기에는 많은 내용이 있으므로, 개별 요소를 살펴보겠습니다.
검사기 검사하기
검사 패널은 창 상단에 보이는 여러 개의 탭으로 나뉘어 있습니다. 기본 요소 탭에 집중하겠습니다.
이 탭 옆에는 두 개의 유용한 버튼이 있습니다. 첫 번째는 요소 검사 도구입니다.
이 도구를 사용하면 마우스를 올려 다양한 DOM 요소를 선택하여 검사할 수 있습니다.
두 번째 버튼은 장치 미리보기 모드를 켭니다. 이 모드에서는 다양한 해상도와 화면 크기에서 웹페이지가 어떻게 보이는지 확인할 수 있습니다.
그 버튼을 클릭하면 웹페이지가 새로운 보기로 전환됩니다.
그런 다음 페이지 미리보기 위의 드롭다운 메뉴나 페이지 미리보기의 측면 핸들을 사용하여 장치 미리보기 창의 크기를 조정할 수 있습니다.
HTML 보기
DevTools 탭의 대부분은 HTML 패널로 차지됩니다.
이 패널은 ‘소스 보기’의 슈퍼 파워 버전과 같습니다. DOM에 따라 구조화되어 있으며, 요소는 부모 요소 안에 중첩되어 있습니다.
처음에 ‘검사’한 요소는 자동으로 회색 또는 파란색 배경으로 강조 표시됩니다. 여기서는 링크 안에 포함된 이미지를 검사했습니다. 예상대로 강조된 앵커 태그를 볼 수 있습니다.
하지만 내 이미지는 어디에 있나요? 앵커 태그 옆의 공개 삼각형을 클릭하면 중첩된 DOM 요소를 드러낼 수 있습니다. 이 경우 화살표는 내가 찾고자 했던 태그를 드러냅니다.
HTML 패널 하단에는 작은 메뉴 바가 있습니다.
이것은 빵 부스러기 경로라고 하며, 선택된 요소의 모든 부모 요소를 보여줍니다. 이러한 요소 중 하나로 이동하려면 간단히 클릭하세요.
스타일
HTML 보기 아래에는 요소에 적용되는 모든 CSS 규칙을 보여주는 패널이 있습니다. 이를 스타일 패널이라고 하며, 이 경우 내가 이전에 검사한 앵커 태그에 적용되는 모든 규칙을 볼 수 있습니다.
규칙 위에 마우스를 올리고 옆의 체크 박스를 클릭하면 규칙을 켜고 끌 수 있습니다.
이 변경 사항은 즉시 페이지 미리보기에서 반영됩니다. 그리고 규칙을 직접 클릭하면 이름과 값을 변경할 수 있습니다.
필터 검색 상자를 사용하여 특정 규칙을 검색할 수도 있습니다.
그러나 스타일 패널은 그 이상으로 많은 기능을 수행할 수 있습니다. 스타일 패널의 많은 기능에 대한 전체 설명은 구글의 문서를 확인하세요.
박스 모델 및 계산된 스타일
스타일 보기 옆에는 선택된 요소의 박스 모델이 있습니다. 박스 모델은 특정 요소에 적용된 여백, 테두리, 패딩 및 콘텐츠 크기를 추상적으로 나타낸 것입니다.
이 경우 내 요소의 기본 크기는 461 x 209 픽셀입니다. 여백, 테두리 또는 패딩 규칙이 없으므로 해당 상자는 비어 있습니다.
여러분이 위치, 여백, 테두리 또는 패딩 규칙이 있는 요소를 선택하면 박스 모델이 다음과 같이 보일 수 있습니다.
검사 요소 도구가 활성화된 상태에서 DOM 요소 위에 마우스를 올리면 in situ 박스 모델도 볼 수 있습니다.
박스 모델 아래에는 이 특정 요소에 적용되는 모든 스타일링 규칙의 목록이 있습니다. 이는 스타일 패널과 약간 다릅니다. 실제 CSS 라인을 표시하지 않고, 이러한 규칙의 효과만 표시합니다. 이를 객체의 ‘계산된 스타일’이라고 하며, 이는 CSS의 결합 결과입니다.
마지막으로 필터 상자에 입력하여 특정 규칙을 검색할 수 있습니다.
결론
웹 페이지를 자주 다루는 경우, 크롬의 검사 도구는 탐색할 가치가 충분합니다. 콘솔 및 네트워크와 같은 DevTools의 다른 탭은 개발자에게 매우 유용할 수 있습니다. 지금 당장 다룰 수 있는 것보다 더 많은 내용이 있지만, 구글의 문서는 철저하고 유용합니다.
