웹 개발을 할 때는 프론트엔드의 자바스크립트나 백엔드 API에서 버그가 발생하는 경우가 잦고, 적용한 CSS가 맘에 들지 않을 때도 많습니다. 이런 경우에는 코드 에디터로 원하는 부분을 수정하고 브라우저로 결과를 확인해야 하는데, 만족스럽지 않으면 에디터와 브라우저를 오가며 수정을 반복해야 합니다. 특히 CSS는 변경 결과가 어떻게 반영될 지 쉽게 예상이 되지 않아서 수정 과정이 더욱 번거로워지기도 합니다.
브라우저 **개발자 도구(Devtools)**는 이러한 불편함을 대폭 감소시켜줍니다. HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있으며, 자바스크립트 코드를 대상으로 디버거도 제공합니다. 서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있습니다.
개발자 도구가 웹 서비스를 진단하는데 도구인 만큼, 웹 취약점을 이용하려는 공격자에게도 유용하게 사용될 수 있습니다. 앞으로의 코스에서도 자주 등장할 것이므로 이번 코스에서는 웹 해킹에 자주 사용되는 개발자 도구의 기능에 대해 배우고, 간단한 실습으로 사용법을 익혀보겠습니다.
현대의 주요 브라우저인 크롬, 사파리, 파이어폭스는 모두 개발자 도구를 포함하고 있는데, 이 커리큘럼에서는 크롬 개발자 도구를 사용합니다. 각각의 인터페이스는 다소 다르지만 기능은 흡사합니다. 그러므로 다른 브라우저를 사용하더라도 무리없이 실습을 따라할 수 있을 것입니다.
개발자 도구를 실행하려면 브라우저를 열고 F12를 누릅니다. 그러면 다음과 같은 개발자 도구 창이 브라우저에 나타납니다. 아래 그림에서 개발자 도구의 간단한 레이아웃 정보를 확인할 수 있습니다.
| 🔴 빨간색 | 요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar) |
|---|---|
| 🟠 주황색 | 기능을 선택하는 패널. 코스에서는 굵게처리된 기능들만을 다룹니다. |
| • Elements: 페이지를 구성하는 HTML 검사 | |
| • Console: 자바 스크립트를 실행하고 결과를 확인할 수 있음 | |
| • Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음 | |
| • Network: 서버와 오가는 데이터를 확인할 수 있음 | |
| • Performance | |
| • Memory | |
| • Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음 | |
| • Security | |
| • Lighthouse | |
| 🟡 노란색 | 현재 페이지에서 발생한 에러 및 경고 메시지 |
| 🟢 녹색 | 개발자 도구 설정 |
요소 검사를 활용하면 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있습니다.
요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면 대상의 정보가 출력됩니다. 그 상태에서 클릭하면 이와 관련된 HTML 코드가 하이라이팅됩니다.
**디바이스 툴바(Device Toolbar)**를 활용하면 현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있습니다.
현대에는 웹에 접속하는 장치가 데스크톱, 태블릿, 스마트폰, 노트북 등으로 다양해지고 있으며, 웹 페이지가 렌더링되어야 할 화면 비율도 가지각색으로 많아지고 있습니다. 개발자는 모든 이용자에게 좋은 웹 경험을 줘야하므로, 자신이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 점검해봐야 합니다. 디바이스 툴바를 이용하면 이러한 점검을 쉽게 진행할 수 있습니다.