30장 DevTools를 열고 요소 살펴보기

개발자 도구는 개발자만의 비밀 메뉴가 아니다. 페이지가 왜 깨져 보이는지, 버튼이 어떤 요소인지, 모바일 크기에서 어떻게 배치되는지 확인하는 관찰 도구다. Windows와 Linux에서는 `Ctrl+Shift+I` 또는 F12, macOS에서는 `Command+Option+I`로 연다. 페이지를 오른쪽 클릭해 검사를 선택하면 그 지점의 요소로 바로 이동한다.

왼쪽 위 요소 선택 아이콘을 켜고 페이지의 제목이나 버튼을 가리키면 Elements 패널의 HTML이 선택된다. 오른쪽 Styles에서는 적용된 CSS 규칙과 덮어쓴 값을 볼 수 있다. 체크를 잠시 끄거나 값을 바꿔도 현재 탭의 표시만 시험적으로 변하며 서버의 실제 파일은 수정되지 않는다. 새로고침하면 대부분 원래대로 돌아온다.

비밀번호 칸의 속성을 바꾸거나 숨겨진 내용을 펼칠 수 있다는 사실은 ‘내 화면에 표시된 비밀은 이미 내 브라우저에 도착했다’는 뜻이기도 하다. 개발자 도구로 유료 콘텐츠를 우회하거나 다른 사람의 데이터를 보려 해서는 안 된다. 자신이 소유하거나 허가받은 페이지에서만 실험한다.

Device Toolbar는 화면 크기와 터치 환경을 흉내 낸다. 실제 휴대전화의 성능, 글꼴, 브라우저 UI를 완벽히 재현하지는 않으므로 최종 확인은 실제 기기에서도 한다. 요소를 캡처해 지원 요청에 붙일 때는 탭 제목, 주소, HTML 속성에 개인정보와 토큰이 없는지 가린다.