# 크롬 개발자 도구

개발자 도구는 브라우저에 제공하는 하나의 도구이다. 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와준다.

• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Lighthouse

주요 패널로는 Elements, Console, Sources, Network, Application 등이 있다.

#1 Elements

• HTML이 어떻게 이루어졌는지 DOM트리 구조를 확인할 수 있다.
• HTML과 CSS를 수정해보며 디버깅 할 수 있다.
• Styles탭에 CSS 적용순서는 상단에서 하단의 순서로 적용된다.
• User agent stylesheet : 브라우저의 기본 속성값으로 Chrome, Safari,IE 등 브라우저의 종류에 따라 다르게 적용되어있다.

#2 Console