Chrome 개발자 도구 (F12)

✔️ 크롬(Chrome) 브라우저 (단축키 F12)

브라우저마다 개발자 도구를 제공하고 있다.

개발자 도구를 통해서 HTML/CSS 구조를 엿볼 수 있다.

 

 

한편으로 웹 개발을 하다 보면  Ajax와 같은 요청처리 문제가 발생할 수 있다.

이때, Ajax 통신에서 로직이 문제인지, 서버 쪽 문제인지 확인하고 싶을 때가 있다.

이러한 부분을 코드로는 디버깅하기 쉽지 않다.

 

Ajax뿐만 아니라 HTML이나 CSS 조절이나 네트워크 동신 과정 상황을 보는데로

Chrome Browser 개발자 도구는 용이하다.

- 녹화기능을 통한 HTML, CSS, JavaScript, image 파일 상황

- 404와 같은 응답 오류 문제 분석

- 서버 응답 시간

- Network Tab "Capture screenshots" 기능 (시간대별로 화면을 볼 수 있다.)

즉, 성능개선을 위한 진단 도구로 활용할 수 있다.