크롬 javascript 디버깅하는 방법 – Elements편

Elements 탭 = elements를 분석하고 실시간으로 수정할 수 있는 기능성을 제공하는 부분이다.

왼쪽은 하이라키 구조를 보여주는 html 코드, 오른쪽은 코드의 속성값들을 보여준다.

또한, html에서 랜더링 된 최종 결과물 코드가 보여지는 부분이다.

돋보기 모양의 아이콘(노란색으로 체크 되어져 있는 부분)으로 원하는 element를 선택하여 소스를 찾아볼 수 있다. 또는 원하는 “element 우클릭 > 검사”를 클릭해도 된다.

Computed 탭에서는 선택된 엘리먼트가 최종적으로 적용 되어진 css 속성들이 무엇인지 볼 수 있다.

여기에서 Computed는 최종적은 스타일 결과를 보여주는 것이고, Styles은 현재 명시적으로 css를작성한 개발자가 해당 엘리먼트에 css로 적용한 속성값만을 보여주는 것이다.

다음과 같이 css에 밑줄이 그어진 부분은 css의 우선순위로 인해서 적용이 되지 않은 스타일 속성값을 의미한다.

위의 element가 우선순위가 높기 때문에 위의 css가 적용되었고

아래 element는 무시되었다.

해당 element 우 클릭 하여 나오는 BreakPoint를 걸면, 현재 선택된 element가 자바스크립트 소스에서 속성값이 변경되면 breakpoint에 의해 멈추게 되는 것이다.

 

Event Listener 탭에서는 해당 엘리먼트에 어떤 event들이 적용되어 있는지 확인할 수 있다.