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