1. 버그란
컴퓨터의 프로그램이나 시스템의 오류
2. 디버그(디버깅)
디버그은 컴퓨터 프로그램의 논리적인 오류를 찾아내는 테스트 과정을 뜻.
3. 크롬 개발자 도구
크롬 브라우저에 내장된 개발 관련 도구
디버깅뿐 아니라 모바일 기기 시뮬레이터, 네트워크 분석 등 다양한 일을 함
#실행법
마우스 오른쪽 클릭 -> 검사
#주 사용 탭
Elements
DOM을 확인하고 CSS를 수정
Console
로그를 확인하고 스크립트 명령어를 입력하는 탭
Sources
자바스크립트 디버깅의 가장 핵심적인 영역
4. 디버깅 법
#예제 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> ul { width: 200px; height: 50px; margin: 0; padding: 0; background: #999; } li { width: 50px; height: 50px; margin: 0 10px; float: left; background: #000; list-style: none; } span { color: #fff; } </style> </head> <body> <ul> <li> <span>1</span> </li> <li> <span>2</span> </li> </ul> </body> </html> | cs |
Elements
- padding check 해제
- background 색변경
Console
var lis = document.querySelectorAll("li"); for (var i = 0; i < lis.length; i++){ lis[i].style.backgroundColor = "red"; } |
Sources
#예제 코드 추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="en"> <head> <style> ul { width: 200px; height: 50px; margin: 0; padding: 0; background: #999; } li { width: 50px; height: 50px; margin: 0 10px; float: left; background: #000; list-style: none; } span { color: #fff; } </style> </head> <body> <ul> <li> <span>1</span> </li> <li> <span>2</span> </li> </ul> <script> var lis = document.querySelectorAll("li"); for (var i = 0; i < lis.length; i++){ lis[i].style.backgroundColor = "red"; } </script> </body> </html> | cs |
- 검사할 부분 클릭후 새로고침
(step을 1단계씩 넘기며 볼수있다.)
#그 외 Event 관련 디버깅
체크 되있는건 마우스 클릭 이벤트 관련 디버깅
'JavaScript > JavaScript 기초' 카테고리의 다른 글
| SSR(서버 사이드 렌더링)/CSR(클라이언트 사이드 렌더링) (0) | 2020.12.05 |
|---|---|
| RESTFul API (0) | 2018.09.05 |
| 이벤트 버블링, 캡처링, 위임의 정의 정리 (0) | 2018.09.05 |
| 비동기 ajax (0) | 2018.09.04 |
| 삼항 연산자 (0) | 2018.06.25 |
