개발자도구?

크롬 브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 강력한 도구다.
개발자 도구는 브라우저에 기본 내장되어 있어 따로 설치할 필요가 없다.

개발자 도구의 단축키

• 윈도우 : F12 또는 Ctrl + Shift + I
• macOS : command⌘ + option + I

개발자도구를 왜 사용할까?

개발자 도구는 웹 개발에 유용한 기능을 제공한다 자주 사용하는 개발자 도구의 기능은 다음과 같다.

Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다.
단, 편집한 내용이 저장되지는 않는다. 웹페이지가 내가 의도한 대로 렌더링되지 않았다면 이 패널로 버그를 찾아내기 유용하다.

Console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log메서드릐 실행 결과를 확인할 수 있다.

Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅 할 수 있다.

Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.

Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.