자바스크립트 디버깅


디버깅 도구 없이 JavaScript를 작성하는 것은 어려울 것입니다.

JavaScript 디버깅

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

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

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


Note通常，你在编写一个新的 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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

중단점 설정

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

각 중단점에서 JavaScript 코드 실행이 중지되어 검사할 수 있습니다. JavaScript 변수의 값입니다.

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

디버거 키워드

디버거 키워드는 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에 내장된 디버깅 도구는 Dragonfly입니다. 자세한 지침을 보려면
    http://www.opera.com/dragonfly/ 페이지를 방문하세요.

Safari

  • 브라우저를 엽니다.

  • 마우스 오른쪽 버튼을 클릭하고 요소 검사를 선택하세요.

  • 하단 팝업창에서 '콘솔'을 선택하세요.