반응형
크롬 브라우저에서 디버깅 하는 방법을 정리하겠다.
아래와 같은 코드를 실행한다고 가정하겠다.
코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello1 <br>
hello2 <br>
<script>
for (var i = 0; i < 10; i++ )
document.write("hello "+ i + "<br>")
</script>
</body>
</html>
주석>>
코드를 실행하고 한줄 한줄 내용을 확인하고 싶을때 break point를 정하고 그 부분부터 한줄씩 코드를 실행하면서 변수가 값의 변화를 확인하는 것을 debugging 이라고 한다.
위와 같은 코드는 간단해서 쉽게 알수 있지만 만일 코드가 복잡하고 많은 변수가 있다면 변수의 변화를 직관적으로 확인하기 힘들 때가 있다.
그럴때 코드를 실행 후 웹 브라우져에서 마우스 오른쪽을 클릭하고 검사를 누른다. 그럼 아래 그림처럼 나온다.
그림에서 위에 탭중에 Source를 선택한다. 그럼 아래처럼 코드를 확인할 수 있고 원하는 break point 지점의 숫자를 클릭한다.
여기 예제에서는 12번을 선택하겠다. 그리고 추적해서 보고 싶은 변수명을 Watch 항목에 입력한다. 그리고 Watch 위에 화살표로 한줄 씩 이동시키면서 변수의 변화를 확인할 수 있다.
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| javascript 객체지향 (0) | 2020.12.21 |
|---|---|
| javascript 배열 명령어들 정리 (추가, 삭제, 정렬) (0) | 2020.12.21 |
| javascript documnet write 란 (0) | 2020.12.20 |
| javascript prompt 로 입력값 받기 (0) | 2020.12.19 |
| javascript 결과 확인을 위한 alert, console log (0) | 2020.12.19 |