크롬 개발자 도구 관련 정보

크롬 개발자 도구

TIP: 크롬 개발자도구(F12) -> Element -> Properties 를 통해서 선택된 엘리먼트가 DOM에 대한 어떤 속성을 가지고 있는 지 알려줍니다.

Elements

돋보기 클릭시 찾고자하는 요소를 쉽게찾을수있다

​

• Computed Style - 선택된 엘레멘츠의 최종적인 css효과나타냄
• Styles - 현재 선택된 엘레멘츠의 사용자가 적용한 css를 나타냄
• Metrics - 엘레먼츠의 박스모델을 보여줌 (높이,폭,두께 등등) , 실시간으로 수정이 가능함
• Properties - 선택된 엘레멘츠가 돔에대한 어떤 속성을 가지고 있는지 나타냄
• DOM Breakpoints - 속성이 변경된경우 변경된부분에서 자바스크립트가 멈춤
• Event Listeners - 선택된 엘레멘츠에 어떤 이벤트가 걸려있는지 나타냄

​

Resources

현재페이지가 어떤 리소스들로 구성되어있는지 나타냄

html 이나 데이터 등이 나타남

​

Network

웹브라우저와 서버사이의 흐름을 분석하고 파악하게 도와준다

status는 통신중 발생한 오류를 숫자로 나타냄

​

Sources

버그를 찾는데 도움을 주는 프로그램(디버거)

​

디버깅하는방법

브레이크포인트를 지정

• step over next function call 한줄한줄 실행
• step into next funtion call 함수를 호출하고 끝나는것이 아니라 함수안으로 들어가서 실행
• step out of current funtion 함수 밖으로 빠져나간다.

​

Profiles

서비스의 성능을 측정해서 더높은성능으로 만드는 도구

​

Audits

웹페이지에서 성능이 느려질만한 부분을 찾아서 알려주는 도구

run을 실행하면 해결법도 알려준다 .

​

Console

브라우저에 명령을 내리고 브라우저의 상태를 통보받는 공간

[출처] 크롬 개발자 도구|작성자 개발자 이희원