블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total324,886
Today0
Yesterday2
[Inspector]
웹킷 기반 브라우저에는 Inspector가 있습니다.
크롬에서는 오른 클릭해서 '요소 검사'. 사파리에서는 오른 클릭해서 '구성 요소 점검'.
을 선택하면 브라우저 하단에 등장하는 '그것' 입니다.

기본으로는 'Elements'탭이 선택되어있고.
오른 클릭한 위치의 Element에 대한 정보를 확인/수정해볼 수 있습니다.

[자바스크립트 디버깅]
Inspector에서 'Scripts' 탭을 선택해서 자바스크립트 디버깅을 할 수 있습니다.
 
 

1. 디버깅할 파일을 선택
스크립트가 포함된 html 파일, js 파일을 선택할 수 있습니다.

2. Break point 설정, 흐름 제어
라인 넘버 클릭시 break point 설정/해제가 가능합니다.
설정된 라인은 파란색으로 표시되고, 현재 실행중인 라인은 화살표가 붙습니다.
오른쪽의 버튼은 순서대로 <계속실행>, <라인단위 실행>, <함수 내부로 들어가기>, <함수 밖으로 나가기>, <모든 break point 해제> 입니다.

3. 값, 호출스택 확인
<Watch Expression>은 'Add'로 추가한 식의 값을 확인할 수 있습니다.
<Call Stack>은 말 그대로 호출 스택입니다.
<Scope Variables>는 지역, 전역 변수 값을 확인할 수 있습니다.
그밖에 break point 위치를 확인할 수 있고, 이벤트 리스너에도 break point를 설정하는 등등의 기능이 있습니다.
 
[마침]
alert 창을 띄우거나 컨텐츠 내부에 동작 확인을 위한 코드를 넣을 필요없이
컨텐츠 외부에서 동작을 확인할 수 있는 점이 좋은 것 같습니다 :)
Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함