웹/JavaScript
[Javascript] 디버깅
Judith Hopps
2023. 1. 14. 17:02
반응형
디버깅은 모든 소프트웨어에서 소스 코드의 오류 또는 버그를 찾아서 수정하는 과정입니다.
VS Code의 디버깅 툴
- 타 에디터/IDE에서도 유사 기능들 제공
index.js
let x = 1;
const y = Math.ceil(Math.random() * 10);
const rollDice = () => {
const result = Math.ceil(Math.random() * 6);
return result;
}
x += y; // 🔴
x *= y;
x -= y;
x ** (y % 3 + 1); // 🔴
for (let i = 0; i < 5; i++) {
x = addOrSubtDice(x); // 🟢
}
try { x.toUpperCase(); } catch (e) {}
// x.toUpperCase();
function addOrSubtDice (x) {
let dice = rollDice();
if (Math.random() > 0.5) dice *= -1; // 🟡
x += dice; // 위에 조건부 넣을 시 브레이크포인트 추가
return x;
}
x **= 2; // 🔴
console.log(x);
- 먼저 몇 번 실행해보기
1. 기본 디버깅
- 🔴 표시된 라인들에 Breakpoint 브레이크포인트 달기
- Run and Debug 탭 열고 Node.js 모드로 디버깅 실행
- Continue : 다음 브레이크포인트로 건너뜀
- Step Over : 다음 라인으로 넘어감
- 💡 VARIABLES 섹션에서 변수들의 값 확인하기
- 💡 중간에 x, y의 값 수동으로 변경해보기
- BREAKPOINTS 섹션에서 브레이크표인트들 비활성화, 전체삭제 해보기
2. 함수로 진입하기
- 함수를 실행하는 라인에서 Step Into를 사용하여 함수로 진입
- 👉 모든 라인을 확인하려면 Step Into로 모두 진행해도 무관
- Step Out을 사용하여 빠져나오기
- 함수 내에 브레이크포인트가 걸려 있다면 Step Into하지 않아도 진입
- 💡 CALL STACK 섹션에서 함수 호출마다의 스택 확인하기
- 💡 VARIABLES 섹션에서 각 스택에 속한 변수, this 값 확인하기
3. 오류와 예외처리된 사항 확인하기
- Caught Exceptions 테스트
- Uncaught Exceptions 체크온하고 오류 발생시킨 뒤 테스트해보기
4. 특정 값 WATCH하기
- x, y, dice를 WATCH섹션에 추가하고 테스트
- !!(x % 2) 등의 표현식 넣어보기
Conditional Breakpoint 걸어보기
- 🟡 표시된 라인에 dice < 3 조건의 Expression 브레이크포인트 걸어보기
- 🟢 표시된 라인에 > 3 조건의 Hit Count 브레이크포인트 걸어보기
브라우저의 디버깅 툴
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>브라우저에서의 디버깅</title>
<script defer src="./index.js"></script>
</head>
<body>
</body>
</html>
- 라이브서버로 브라우저에서 실행
- 개발자 도구에서 Sources 탭 열기
- 안내된 단축키로 index.js 검색하여 열기
- 브레이크포인트들 추가한 뒤 새로고침하여 디버깅 시작
- VS 코드에서 사용했던 기능들 시도해보기 - 전반적으로 유사
반응형