웹 개발을 공부하시는 분이나 아니면 테스트 웹페이지를 만들어서 이것저것 해보고 싶은 분들을 위해
VSCode에서 디버깅모드로 실행하는 법을 설명해 보겠습니다. 본인이 원하는 곳에 폴더를 하나 만듭니다.
저는 이렇게 만들었습니다. C:\Users\Com\OneDrive\Documents\web_test_page
먼저 자바스크립트 파일부터 만들어 보겠습니다. 저는 test.js 파일을 만들고 밑에 있는 것처럼 코딩했습니다.
var i = 0;
for (i = 0; i < 10; i++) {
document.write("Hello, World!");
document.write("<br>");
console.log("i : " + i);
}
아주 간단하게 반복문으로 ("Hello, World!")를 브라우저에 뿌려주고 있습니다. 다음으로 html 파일 작성합니다.
저는 상기와 같은 폴더에 page.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>
</head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
VSCode에서 html이라고 입력하고 html:5 선택하면 기본 코드 골격이 완성되는데
기본적인 소스에서 body부분에 test.js 스크립트 태그만 추가했습니다.
다음으로 VSCode의 Extensions에서 Debugger for Chrome을 인스톨합니다.
다음으로 처음에 만들었던 test.js 파일을 열고, 코드 줄번호 왼쪽 공간을 클릭하여 브레이크 포인트를 찍습니다.
마지막으로 아래 화면 처럼 launch.json 파일을 수정합니다. 여기서 중요한 부분은 마지막 코드를
로컬에서 간단하게 테스트를 위해 URL이 아닌 파일을 직접 선택을 한다는 것입니다.
이제 준비가 되었으니 F5 단축키를 눌러 Start Debugging을 Run 합니다. 그러면 크롬 브라우저가 뜨면서
아까 test.js에 찍어둔 브레이크 포인트에서 멈추는 것을 확인할 수 있습니다. 다시 한번 F5를 눌러 계속 진행하면
브라우저에 Hello, World! 가 찍히고 화면 아래 DEBUG CONSOLE탭에는 콘솔 로그가 찍힙니다.
또한 에디터에서 보고 싶은 변수에 마우스를 올려보면(이번에는 i) 값을 확인 가능합니다.
이렇게 테스트 페이지를 VSCode에서 로컬로 디버깅 모드를 설정해 놓으면 간단한 웹페이지 테스트나
자바스크립트 문법 공부에도 도움이 될 것 같습니다. 로컬이 아닌 실제 웹상(서버)에 연결하는 법과
자세한 디버깅 기능 사용법은 추후 다른 포스팅으로 올리도록 하겠습니다.
오늘은 여기까지 -끝-
댓글