chrome developer tools
Chrome 공식사이트 Tutorial: https://developer.chrome.com/devtools디버깅 순서:
1. 크롬에서 파일 실행
2. F12 클릭
3. 디버깅하고 싶은 요소에 따라 탭(element, sources, console, network etc..) 선택
<HTML요소 검사> :Elements 탭
- DOM 트리 node 별로 따라가서 오류를 찾는데 용의
종류:
1. DOM Tree
DOM editor-> Elements 탭의 Properties or페이지 오른쪽 마우스 클릭후 inspect (Ctrl+Shift+i)
바꾸고 싶은 글자가 있을때, 오른쪽 마우스 누른후 edit Text -> 변경가능
2. Break On (오른쪽 클릭)
3. Edit as HTML: 바로 수정가능함 (원본은 수정되지 않음)
4. Hover
hover 했을때 색으로 구분 하는 요소
-하늘색: 컨텐츠
-보라색: 패딩
-노란색: 마진
5. Bread Crumbs: 화면 아래 노드의 계층을 루트인 <html>부터 차례대로 나타냄
<CSS> :Elements 탭
- layout 이나 스타일 속성을 찾는데 용의
CSS Style editor -> Elements 탭의Style
1. Toggle Element State (a테그 속성만 가능)
2. Edit Element Specific CSS properties
3. Edit Class Specific CSS properties
4. Edit Element type Specific CSS properties
Disable a CSS Style- 선택된 요소앞의 체크박스표시로, CSS 속성을 껏다, 켰다 할수 있음
5. View and edit layout- 마진,보더,패딩,높이,넓이 요소를 수정 가능
<JavaScript> :Console / Sources탭
- JavaScript의 오류를 찾는데 용의
Console 탭에서 확인하는 흐름
1. Console 클릭 -> 에러 메세지가 뜸
2. 오른쪽에 에러난 라인 번호 클릭하면 소스로 넘어감
3.에디터로 돌아가서 수정
4. 크롬으로 돌아와 F5(새로고침)
에러내용:
Uncaught SyntaxError: Unexpected identifier
: 문법 오류 (오타 체크)
Page is Loaded
:오류는 나타나지 않지만 Function을 실행시켜 보면 오류가 있을 경우 오류가 나타남
Uncaught ReferenceError: 함수명 is not defined
:함수명이 같지 않을 경우, 혹은 작성되지 않았을 경우 나타남
Sources 탭에서 세부적인 내용을 확인/수정
1. Sources 클릭 -> Ctrl+p 후 파일 선택 -> 코드를 바로 열람
2. Break Point설정 (앞의 줄 번호를 클릭하면 됨)
3. javaScript부분 실행
->다음줄로 넘어가기: Step over (F10)
->끝내기: Resume execution (F8)
*참고
Watch Expressions에 변수에 담긴 값을 보고 싶을때,
+ 누르고 변수 이름 넣으면 값 추적 가능
댓글 없음:
댓글 쓰기