728x90
- 각 패널들의 명칭과 기능
Elements : DOM CSS를 편집하여 렌더링된 뷰 > 편집한 내용이 저장되지는 않는다.
Console : 웹페이지의 에러, console.log
Sources : 자바스크립트 코드 디버깅
Network : 네트워크 요청 정보와 성능
Application : 웹 스토리지, 세션, 쿠키 확인 및 관리
- 개발자 도구 창 분리 : 우측의 더보기 ... 클릭 > Dock Side
- 디버깅
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter</title>
</head>
<body>
<div id="counter">0</div>
<button id="increase">+</button>
<button id="decrease">-</button>
<script>
const $counter = document.getElementById('counter-x');
const $increase = document.getElementById('increase');
const $decrease = document.getElementById('decrease');
let num = 0;
const render = function () { $counter.innerHTML = num; };
$increase.onclick = function () {
num++;
console.log('increase 버튼 클릭', num);
render();
};
$decrease.onclick = function () {
num--;
console.log('decrease 버튼 클릭', num);
render();
};
</script>
</body>
</html>
에러가 발생한다!
오른쪽 끝에 index.html:19 와 같은 에러 발생 위치를 클릭
> Sources 패널로 자동 이동, 디버깅 가능!
line 19 의 라인 번호를 클릭해 책갈피 모양이 뜨면 브레이크 포인트가 걸린 것이다.
이 때 오류를 실행하면 디버깅 모드로 들어간다.
마우스 커서를 원하는 곳에 올리면 변수의 값을 알 수 있다.
현재 $counter는 null 값을 갖고 있다.
이렇게 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것을 디버깅이라고 한다.
<모던 자바스크립트 딥 다이브>에서 발췌.
'학습 내용 정리 > 기본' 카테고리의 다른 글
| 프론트 엔드 백엔드란? (0) | 2023.06.17 |
|---|---|
| 코딩 용어 (0) | 2023.06.11 |
| [중요!] 의사 전달 코드 (0) | 2023.05.23 |
| REST API (1) | 2023.05.12 |
| HTTP와 HTTP 코드 별 의미 (1) | 2023.05.12 |
