디버깅(Debugging)
1. 디버깅(Debugging)
- 디버깅(Debugging)에 대해 알아봅시다!
- 디버깅(Debugging)이란? 컴퓨터 프로그램 개발 단계 중 발생한 시스템의 논리적 오류 or 버그를 찾아내고 수정하는 작업 과정을 말합니다.
2. 디버깅 도구 및 기법
- JavaScript에선 디버깅을 수행하는 데 사용할 수 있는 몇 가지 도구와 기법이 있습니다.
1) 브라우저 콘솔
- 대부분 웹 브라우저는 개발자 도구를 제공하며, 코드 실행 시 발생하는 오류를 보고하는 console이 포함되어 있습니다.
- 오류 메시지, 경고 및 로그 메시지를 확인하여 코드에서 발생하는 문제를 식별할 수 있습니다.
- Chrome 브라우저에서는 F12를 누르고, Console 탭을 선택하여 콘솔을 열 수 있습니다.
2) 디버거
- 대부분 브라우저는 코드 디버깅을 위한 내장 디버거를 제공합니다. 이를 통해 코드를 중지하고 각 줄에서 변수의 값을 확인하거나 코드 실행을 한 단계씩 진행할 수 있습니다.
- Chrome 개발자 도구에서 Source 탭을 열고 원하는 스크립트 파일을 선택하여, 중단점을 설정하고 디버깅을 시작할 수 있습니다.
- 또한, 코드안에 debugger을 입력하여 디버거를 자동으로 활성화할 수 있습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div>dom</div>
<script src="./main.js"></script>
</body>
</html>
main.js
console.log("started!");
const a = 1;
debugger;
console.log("end!");
→ 다음과 같이 원하는 곳에 debugger를 입력하여, 중단점을 설정하고 코드 실행을 한 단계식 진행할 수 있습니다.
3) console.log( )
- 코드의 특정 부분에서 변수의 값을 출력하여, 해당 값이 올바른지 확인할 수 있습니다.
- 이를 통해 변수의 값을 출력하고 console에서 해당 값을 시작할 수 있습니다.
main.js
function add(a, b) {
return a + b;
}
console.log("result: ", add(2, 3));
결과
4) 예외 처리
- try-catch 문을 사용하여 예외를 처리하고, 오류가 발생한 곳을 식별할 수 있습니다.
- try 블록 안에 코드를 넣고 catch 블록에서 오류를 처리하거나 오류에 대한 정보를 출력할 수 있습니다.
main.js
function divide(x, y) {
try {
if (y === 0) {
throw new Error("나누는 수는 0이 될 수 없음");
}
let result = x / y;
return result;
} catch (error) {
console.error("에러 발생: ", error.message);
// 에러 처리 or 기타 작업 수행
return NaN; // NaN (Not a Number) 반환
}
}
// divide 함수 호출
console.log(divide(10, 2)); // 5 출력
console.log(divide(10, 0)); // 예외 발생: 에러 메시지 출력 후, NaN 출력
결과
5) 디버깅 도구 사용
- 브라우저 외에도 Node.js와 같은 JavaScript 런타인 환경에서도 디버깅 도구를 사용할 수 있습니다.
- Node.js에는 내장된 디버거가 있으며, VSCode와 같은 통합 개발 환경(IDE)에서도 디버깅을 지원합니다.
3. 정리하며
- 지금까지 디버깅에 대해 알아보았습니다.
- 디버깅은 코드를 개선하고 오류를 찾는 데 중요한 단계입니다.
- 적절한 디버깅 기술과 도구를 사용하여, JavaScript 애플리케이션을 보다 안정적이고 효율적으로 만들 수 있습니다.
※ Git 주소
JavaScript-study/입문자를 위한 자바스크립트 실습/웹 프론트 언어로서 자바스크립트/디버깅 at main
Contribute to NewBean0312/JavaScript-study development by creating an account on GitHub.
github.com
'Front-End Study > JavaScript' 카테고리의 다른 글
| 브라우저 객체 (0) | 2024.03.24 |
|---|---|
| DOM (0) | 2024.03.22 |
| export와 export default의 차이 (0) | 2024.03.09 |
| this와 bind (0) | 2024.01.31 |
| reduce 함수 (0) | 2024.01.31 |
