개발자 도구로 디버깅

브라우저가 들여다보게 해 줍니다

앞 단원은 오류가 났을 때의 이야기였습니다. 오류가 나지 않는데 값이 이상할 때는 중간을 들여다봐야 합니다.

모든 브라우저에 개발자 도구가 들어 있습니다. F12 또는 Ctrl+Shift+I (맥은 Cmd+Option+I) 로 엽니다.

• Console — console.log 의 결과가 나오고, 코드를 직접 쳐 볼 수 있습니다.
• Sources — 코드를 한 줄씩 실행하며 값을 봅니다.
• Elements — 지금 화면의 HTML 과 CSS 를 봅니다(4부).
• Network — 주고받은 요청을 봅니다(5부).

console 은 log 만 있는 것이 아닙니다

console.log("보통 출력");
console.info("알림");
console.warn("확인이 필요합니다");
console.error("문제가 있습니다");

색이 다릅니다. 출력이 많아질 때 눈으로 갈라 보려고 사용합니다. 실제 개발자 도구에서는 종류별로 걸러 볼 수도 있습니다.

표로 보기

객체 배열은 console.table 로 보면 훨씬 읽기 좋습니다. 실제 개발자 도구에서는 표로 그려집니다.

const products = [
	{ name: "연필", price: 1000 },
	{ name: "공책", price: 2000 }
];

console.table(products);

이 화면의 출력 칸은 표를 그리지 않고 글자로 냅니다. 실제 개발자 도구에서 확인해 보세요.

얼마나 걸렸는지 재기

console.time("합계");

let sum = 0;
for (let i = 1; i <= 1000000; i++) {
	sum += i;
}

console.timeEnd("합계");   // 합계: 3.5ms

time 과 timeEnd 에 같은 이름을 적으면 그 사이가 얼마나 걸렸는지 나옵니다.

이 예제에는 실행 단추가 없습니다. 잰 시간은 실행할 때마다 달라져, 화면에 적어 둔 값과 맞출 수 없습니다.

중단점 — 한 줄씩 실행하기

console.log 를 여기저기 넣는 대신, 그 자리에서 멈춰 세우고 값을 볼 수 있습니다.

function total(prices) {
	let sum = 0;

	for (const price of prices) {
		debugger;   // 여기서 멈춥니다
		sum += price;
	}

	return sum;
}

debugger 를 적어 두거나, 개발자 도구의 Sources 에서 줄 번호를 눌러 중단점을 겁니다. 멈춘 뒤에는 이렇게 합니다.

• 한 줄 실행 — 다음 줄로 넘어갑니다.
• 안으로 들어가기 — 함수를 부르는 줄에서 그 함수 안으로 들어갑니다.
• 변수 보기 — 지금 시점의 모든 변수 값을 봅니다. 마우스를 올려도 보입니다.
• 이어서 실행 — 다음 중단점까지 갑니다.

이 화면에서는 중단점을 쓸 수 없습니다. 예제가 격리된 자리에서 실행되기 때문입니다. 실제 페이지를 만들 때 사용하세요.

무엇을 먼저 볼까

값이 이상할 때의 차례입니다.

1. 그 값을 찍어 봅니다. — console.log(값)
2. 타입도 함께 봅니다. — console.log(typeof 값, 값). 글자 "10" 과 숫자 10 은 출력이 같아 보입니다(1.4).
3. 한 줄 위로 올라갑니다. — 그 값이 어디서 왔는지 봅니다.
4. 거기서 중단점을 겁니다. — 찍는 자리가 서너 곳을 넘어가면 그편이 빠릅니다.

처음에 자주 걸리는 것

직접 해보기

이 단원의 정리