자바스크립트 디버깅

JavaScript를 작성할 때 디버깅 도구가 없으면 어려울 것입니다.

JavaScript 디버깅

디버깅 도구 없이 JavaScript 프로그램을 작성하는 것은 어렵습니다.

코드에 구문 오류와 논리 오류가 있을 수 있습니다. 디버깅 도구가 없으면 이러한 오류를 찾기가 어렵습니다.

보통 자바스크립트에 오류가 있으면 프롬프트 메시지가 나오지 않아 코드 오류가 발생한 위치를 찾을 수 없습니다.

Tip: 일반적으로 새 JavaScript 코드를 작성할 때 오류가 발생합니다.

JavaScript 디버깅 도구

프로그램 코드에서 오류를 찾는 것을 코드 디버깅이라고 합니다.

디버깅은 어렵지만 다행히도 많은 브라우저에는 디버깅 도구가 내장되어 있습니다.

내장된 디버깅 도구를 시작하거나 중지할 수 있으며 심각한 오류 메시지가 사용자에게 전송됩니다.

디버깅 도구를 사용하면 중단점(코드 실행이 중지되는 지점)을 설정하고 코드가 실행되는 동안 변수를 감지할 수 있습니다.

브라우저에서 디버깅 도구를 활성화하려면 일반적으로 F12 키를 누르고 디버깅 메뉴에서 "콘솔"을 선택합니다.

console.log() 메서드

브라우저가 디버깅을 지원하는 경우 console.log() 메서드를 사용하여 디버그 창에 JavaScript 값을 인쇄할 수 있습니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

프로그램 실행 시도해 보세요

Set breakpoints

디버그 창에서 JavaScript 코드에 중단점을 설정할 수 있습니다.

각 중단점에서 JavaScript 코드의 실행이 중지되므로 JavaScript 변수의 값을 확인할 수 있습니다.

확인 후 코드(재생 버튼 등)를 다시 실행하시면 됩니다.

debugger 키워드

debugger 키워드는 JavaScript 실행을 중지하고 디버그 기능을 호출하는 데 사용됩니다.

이 키워드는 디버깅 도구에서 중단점을 설정하는 것과 동일한 효과를 갖습니다.

디버깅을 사용할 수 없으면 디버거 문이 작동하지 않습니다.

디버거를 활성화하면 세 번째 줄 이전에 코드 실행이 중지됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

프로그램을 실행해서 사용해 보세요

주요 브라우저용 디버깅 도구

일반적으로 브라우저에서 디버깅 도구를 활성화하려면 F12 키를 누르고 디버깅 메뉴에서 "콘솔"을 선택합니다.

각 브라우저의 단계는 다음과 같습니다.

Chrome 브라우저

브라우저를 엽니다.
메뉴에서 도구를 선택하세요.
도구에서 개발자 도구를 선택하세요.
마지막으로 콘솔을 선택하세요.

Firefox 브라우저

브라우저를 엽니다.
페이지를 방문하세요:
http://www.getfirebug.com.
지침을 따르세요:
Firebug를 설치하세요.

Internet Explorer 브라우저.

브라우저를 열어보세요.
메뉴에서 도구를 선택하세요.
도구에서 개발자 도구를 선택하세요.
마지막으로 콘솔을 선택하세요.

Opera

브라우저를 엽니다.
Opera에 내장된 디버깅 도구는 Dragonfly입니다. 자세한 지침을 보려면
http://www.opera.com/dragonfly/ 페이지를 방문하세요.

Safari

브라우저를 열어보세요.
마우스 오른쪽 버튼을 클릭하고 요소 검사를 선택하세요.
하단 팝업창에서 "콘솔"을 선택하세요.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>

제출하다 코드 재설정

자동운전