FirstBoot Guides

브라우저 개발자 도구 및 필수 확장 프로그램 가이드

프론트엔드 개발뿐만 아니라 백엔드 개발자에게도 브라우저 개발자 도구는 필수입니다.

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] 탭에서 자바스크립트 코드를 즉석에서 실행하여 간단한 로직 테스트를 할 수 있습니다.

관련 가이드