즐겨 찾는 웹 사이트가 어떻게 구성되어 있는지 알고 싶다면 브라우저의 "검사" 서비스가 숨겨진 축복이 될 수 있습니다. 우리는 Chrome의 "Inspect" 도구에 대해 다루었으며 Firefox도 유사한 기능을 제공합니다.
Firefox "요소 검사" 도구는 사용하는 HTML 및 CSS 요소, 네트워크에 대한 로드, 로드 요소의 대기 시간, 다음과 같이 저장소에 저장하는 파일을 포함하여 웹사이트 운영의 토대를 조사하는 데 도움이 될 수 있습니다. 쿠키.
숙련된 개발자는 이 입문서에서 많은 새로운 내용을 찾지 못할 수 있습니다. 그러나 초보자와 일반 웹 사용자는 Firefox의 기능에 대한 새롭고 강력한 측면과 인터넷의 모든 사이트 아래에 있는 파일 및 작업의 깊은 우물을 찾아야 합니다.
설치
Firefox를 사용하는 경우 추가 작업이 필요하지 않습니다. Firefox 사용을 시작하고 Windows, Linux, Mac, iOS 또는 Android를 사용 중인 경우 이 링크를 따라 최신 버전의 브라우저를 찾으세요. 다운로드한 설치 프로그램 파일을 평소와 같이 더블 클릭하거나 스마트폰의 경우 탭하여 설치합니다.
주요 Linux 배포판에는 Firefox가 사전 설치된 상태로 제공되거나 사용자가 쉽게 설치할 수 있는 소프트웨어 센터/패키지 저장소에 Firefox 사본이 있을 수 있습니다.
"요소 검사" 열기
Firefox를 설치한 후 웹 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하여 해당 검사기를 찾을 수 있습니다. 그러면 목록 하단 근처에 "요소 검사"가 있는 아래 그림과 같은 드롭다운 메뉴가 표시됩니다.
검사관
"요소 검사"를 클릭하면 화면 하단의 검사기가 즉시 열립니다. 이 시점에서 인스펙터가 서비스의 "인스펙터" 부분을 기술적으로 열었기 때문에 제목이 약간 흐릿해집니다.
어떤 경우든 클릭한 요소는 도구 중간에 표시되며 <div>와 같이 해당 요소 위로 마우스를 이동하면 아래 스크린샷에서 내가 마우스를 가져간 태그 – "Inspector"는 웹페이지 자체에서 화면의 시각적 요소를 강조 표시합니다.
이렇게 하면 보고 있는 요소를 쉽게 알 수 있습니다. 또한 해당 요소의 다양한 속성을 쉽게 찾을 수 있습니다. "Inspector"의 오른쪽을 보면 특정 <div>의 속성을 볼 수 있습니다. 여백, 패딩, 테두리, 글꼴 크기 및 세로 정렬에 대한 설정을 포함한 태그.
오른쪽 패널을 스크롤하면 다른 요소에서 상속된 속성을 볼 수 있습니다. 해당 창에서 속성을 변경하고 실시간으로 웹페이지에 나타나는 것을 볼 수도 있습니다.
스타일 편집기
인스펙터 상단에 있는 도구 모음을 따라 CSS(Cascading Style Sheets) 영역으로 여행을 계속할 수 있습니다. "스타일 편집기"라고 표시된 곳을 클릭하면 화면 하단에 세 개의 새 패널이 표시되는 새 대화상자가 열립니다.
여기에서 DuckDuckGo가 사용하는 두 가지 스타일 시트 파일, 첫 번째로 선택한 스타일 시트의 요소 및 해당 시트의 다양한 "@media" 규칙을 볼 수 있습니다. 이 규칙은 크고 작은 화면에 대한 반응형 디자인을 제어합니다.
"Inspector" 섹션에서 하는 것처럼 이 스타일 시트를 편집할 수 있습니다. 이 경우 선택할 수 있는 규칙이 많습니다. 첫 번째 스타일 시트에만 1262개의 규칙이 있습니다.
도구 모음에서 "네트워크 모니터"로 더 이동하면 해당 파일과 해당 상태에 대한 웹사이트의 요청을 찾을 수 있습니다. 이미지 및 글꼴과 같은 다른 요소도 해당 탭에 있을 수 있으며 요청이 처리된 후 이러한 모든 요청과 각 파일의 크기를 볼 수 있습니다.
성능
"Performance" 탭을 열 때 "Start Recording Performance" 버튼을 클릭하여 검사관이 정보를 수집하도록 해야 합니다. 몇 초 안에 페이지가 실행되는 초당 프레임(FPS), 발생한 DOM(문서 개체 모델) 이벤트, 스타일 재계산, 이러한 요소를 처리하는 데 걸린 시간(일반적으로 밀리초)을 발견합니다. 로드.
이 사이트의 경우 마우스 오버인 강조 표시된 DOM 이벤트를 로드하는 데 6.03밀리초가 소요되었음을 확인할 수 있습니다. 이 페이지의 평균 FPS는 약 39였습니다. 그리고 내 응답 시간 범위를 보여주는 차트는 일부 이벤트의 경우 9000밀리초에 도달했습니다.
메모리
"메모리" 탭에서 "스냅샷 찍기" 버튼을 클릭하여 정보를 수집해야 합니다. 나에게 그것은 약 600Kb의 문자열, 1Mb의 객체, 1Mb의 스크립트가 메모리로 가는 길을 찾는 이벤트 맵을 생성했습니다. 이 스크린샷에서 볼 수 있는 것처럼 "트리 지도"라고 표시된 드롭다운 메뉴를 클릭하면 동일한 요소를 몇 가지 다른 방식으로 볼 수 있습니다.
저장소
마지막으로 "저장소" 탭을 클릭하면 웹사이트가 컴퓨터에 저장했을 수 있는 영구 파일을 볼 수 있습니다. 대부분의 사용자와 관련이 있으며 여기에는 쿠키가 포함됩니다. 아래 이미지에서 로드된 것을 볼 수 있습니다.
오른쪽 패널에서 이 특정 쿠키가 향후 10년의 중반에 만료되고 이 기사를 작성하는 동안 액세스한 것을 볼 수 있습니다.
결론
Firefox 인스펙터를 사용할 때는 헤쳐나가야 할 것이 많습니다. 여러 부분에 대한 이 소개는 한동안 당신을 바쁘게 만들 것입니다.
사이트의 HTML 요소를 변경하는 데 시간이 걸립니다. 몇 가지 다른 웹사이트를 방문하여 로딩 시간을 확인하십시오. 특정 페이지가 컴퓨터에 얼마나 많은 쿠키를 저장하려고 하는지 알아보십시오. 때때로 그 정보가 당신을 잠시 멈추게 할 수 있습니다.
바라건대, 이 발견의 여정을 통해 웹사이트가 기대한 대로 작동할 수 있도록 웹사이트가 하는 일에 대해 더 잘 이해할 수 있을 것입니다. 이전에 깨달았던 것보다 훨씬 더 많을 수 있습니다.