F12 | Inspect Element, Console

F12 브라우저는 모바일 레이아웃이나 API 호출을 간단히 확인할 때마다 매번 휴대폰을 케이블로 PC에 연결해야 하는 번거로움에 지쳐서 만들게 되었습니다.

미리 말씀드리지만, 이 프로젝트는 취미 삼아 간단한 확인, 학습, 그리고 재미 삼아 만들어 보는 용도입니다. 데스크톱용 Chrome 개발자 도구나 직장에서 사용하는 원격 디버깅 도구를 대체할 수는 없습니다.

F12 브라우저로 할 수 있는 몇 가지 기능은 다음과 같습니다.

페이지에서 바로 JavaScript 코드를 실행하여 결과를 확인할 수 있습니다.

HTML 트리를 클릭하여 클래스, 스타일을 확인하고 요소를 강조 표시할 수 있습니다.

실시간으로 fetch 및 XHR 호출을 모니터링하여 상태 코드를 확인하고 JSON 데이터를 읽을 수 있습니다.

네트워크 요청을 열어 헤더와 쿼리 매개변수를 확인할 수 있습니다.

페이지에서 로드된 이미지나 비디오 스트림과 같은 미디어 링크를 불러올 수 있습니다.

콘솔 로그와 오류를 확인할 수 있습니다.

학생이거나 모바일 사이트의 내부 작동 방식에 대해 궁금한 분, 또는 책상에서 떨어져 있을 때 API를 빠르게 점검하고 싶은 분들에게 유용하게 사용될 수 있기를 바랍니다.