브라우저 개발자 도구 및 필수 확장 프로그램 가이드
프론트엔드 개발뿐만 아니라 백엔드 개발자에게도 브라우저 개발자 도구는 필수입니다.
1. 개발자 도구(F12)가 안 열릴 때
증상: F12를 눌러도 아무 반응이 없음
원인: 회사 보안 정책으로 브라우저 설정이 강제되어 있거나 단축키 충돌입니다.
해결: Ctrl + Shift + I (Windows) 또는 Cmd + Option + I (macOS)를 시도해 보세요.
2. 필수 확장 프로그램 추천
- React DevTools: 리액트 컴포넌트 구조 및 상태 확인
- JSON Viewer: API 응답 데이터를 가독성 좋게 출력
- Wappalyzer: 현재 사이트가 어떤 기술 스택을 쓰는지 확인
3. 네트워크 탭 활용하기
증상: API 요청이 실패하는데 원인을 모르겠음
해결: [Network] 탭에서 해당 요청을 클릭하고 [Response]와 [Headers]를 확인하세요. 401(권한), 500(서버 에러) 등 상태 코드가 핵심 단서입니다.
1분 꿀팁
브라우저 개발자 도구의 [Console] 탭에서 자바스크립트 코드를 즉석에서 실행하여 간단한 로직 테스트를 할 수 있습니다.