GetEles.

확장 프로그램은 보고 있는 페이지의 제목과 설명, 주요 색상을 읽어 하나의 패널에 보여준다. 원래라면 소스나 네트워크 탭에서 파내야 할 확인을 여기서 끝낸다. 무료이므로 빠른 점검에서 뺄 이유가 없다.

아무 요소나 선택하면 GetEles가 크기와 패딩, 테두리, 여백을 알려준다. 별도 도구에서는 마우스를 페이지 위로 움직여 두 요소 사이 거리를 표시할 수 있다. 어림짐작이 아니라 숫자가 필요할 때 쓸모 있다. 요소 정보는 무료이고, 측정도 짧은 마우스 움직임이면 된다.

Pro 요금제는 훑어볼 수 있는 구조 트리를 더한다. 페이지의 아무 노드로 바꿔 들어가 어떻게 중첩됐는지 본다. 같은 요금제에 변환 기능도 있어, 선택한 요소의 스타일을 훑어 Tailwind CSS 클래스로 바꾼다. 레이아웃을 Tailwind 프런트엔드로 옮길 때 손으로 쓰는 일을 덜어준다.

FCP와 LCP 같은 페이지 성능 수치를 뽑아 콘텐츠가 얼마나 빨리 나타나는지 본다. API 로그는 페이지가 보내는 호출을 기록해, 페이지를 다루면서 무엇을 보내고 받는지 따라갈 수 있다. 둘 다 Pro와 Lite 모드에 있고 무료 요금제에는 없다.

요소 스크린샷이나 페이지 전체 스크린샷을 찍을 수 있고, Pro 요금제는 더 고급 촬영 옵션을 더한다. 다만 소셜 플랫폼처럼 동적 콘텐츠가 많은 페이지는 깔끔하게 찍히지 않는다. 나중에 읽기 기능은 페이지를 저장해 나중에 다시 보게 해주며, Pro와 Lite 모드에 함께 들어간다.

GetEles는 키보드 단축키를 지원해, 마우스를 놓지 않고 패널을 열고 자주 쓰는 동작에 닿는다. Lite 모드는 더 가볍고 단순한 배치로 기본을 지키면서, 화면에 두는 것을 줄이고 싶은 사람을 위한 작은 기능을 더한다. 둘 다 긴 디버깅 작업에서 도구를 민첩하게 만든다.