개발자도구는 웹 개발자가 웹 어플리케이션을 디버깅하기 위해, 어떻게 돌아가는지 보기 위해 사용하는 툴이다. 그 중 Inspector를 먼저 보자.
Inspector
페이지소스는 브라우저에 표시된 내용 자체를 확인할 수 없다. Inspector는 현재 보고 있는 웹사이트의 실시간 내용을 보여줄 수 있다.
페이지의 요소를 편집하거나 하는 등 웹 개발자가 이슈를 디버깅하는데 도움을 주는데, 취약점을 발견하는 좋은 요소가 된다.
해당 페이지는 권한이 없는 회원은 들어가지 못한다.
팝업된 창의 코드부분을 확인할 수 있고, display가 block이기 때문에 보이지 않는것으로 보이고
none으로 바꿀 수 있다 !
하지만 위 수정이 남아있는 것은 아니고 세션이 새로고침되면 당연히 다시 복구된다.
Debugger
디버거는 당연히 디버깅할 수 있는 툴이고 JS 코드를 브라우저 내에서 분석할 수 있는 툴이다.
Contact 탭으로 이동할 때 페이지 로드시 뭔가 깜빡이는 것이 있는데, assets 디렉토리에 flash.min.js 파일을 확인할 수 있었고 깜빡이는 것을 제어할 수 있을 것 같은 코드가 보인다.
해당 라인에 브레이크 포인트를 걸고 새로고침 해보면
디버깅을 위해 브레이크가 된 것을 볼 수 있다.
Network
개발자 도구에서 네트워크를 사용할 수 있는데, 외부 리퀘스트를 추적할 수 있다.
새로고침을 하거나 어떤 데이터를 전송하거나 입력할 때 발생하는 리퀘스트를 잡아서 확인할 수 있다.
보낸 리퀘스트를 확인할 수 있고 더블클릭해보면
보다싶이 여러 타입으로 데이터를 볼 수 있다.
Hi !