1. HTML코드 작성 (자바스크립트 포함)
크롬에서 자바스크립트 디버깅을 하는 방법은 아주쉽습니다. 먼저 HTML 코드를 작성해보겠습니다.
아래 처럼 만들고 실행해 봅니다.
<html>
<head>자바스크립트 디버깅</head>
<body>
</body>
</html>
<script>
(function testScript(){
console.log("간단한 출력입니다");
})();
</script>
크롬에서 개발자도고를 실행하여 정상적으로 로그가 출력되었는지 확인합니다.
2. 디버깅 코드를 넣기 #1
디버깅하는 방법에는 2가지 정도 방법이 있습니다. 먼저 첫번째 방법으로는 코드에 debugger;를 삽입해주는 방법입니다. 아래와 같이 말이죠.
<html>
<head>자바스크립트 디버깅</head>
<body>
</body>
</html>
<script>
(function testScript(){
debugger; // 해당 부분에서 디버깅이 걸린다.
console.log("간단한 출력입니다");
})();
</script>
그럼 소스를 수정한 후 다시 실행해 봅니다.
정상적으로 디버깅이 걸리는 것을 확인 했습니다.
3. 디버깅 코드를 넣기 #2
이번에는 다른 방법으로 디버깅을 걸어보도록 하겠습니다. 맨처음 소스대로 놓고 개발자도구를 켭니다. 그리고 아래와 같이 작업을 해주시면 디버깅이 걸립니다.
그리고 페이지를 F5를 이용해 새로고침을 해보세요 그럼 디버깅이 걸리는 것을 확인 할 수 있습니다.
