JavaScript 디버깅
디버깅 도구 없이 JavaScript 프로그램을 작성하는 것은 어렵습니다.
코드에 구문 오류와 논리 오류가 있을 수 있습니다. 디버깅 도구가 없으면 이러한 오류를 찾기가 어렵습니다.
보통 자바스크립트에 오류가 있으면 프롬프트 메시지가 나오지 않아 코드 오류가 발생한 위치를 찾을 수 없습니다.
JavaScript 디버깅 도구
프로그램 코드에서 오류를 찾는 것을 코드 디버깅이라고 합니다.
디버깅은 어렵지만 다행히도 많은 브라우저에는 디버깅 도구가 내장되어 있습니다.
내장된 디버깅 도구를 시작하거나 중지할 수 있으며 심각한 오류 메시지가 사용자에게 전송됩니다.
디버깅 도구를 사용하면 중단점(코드 실행이 중지되는 지점)을 설정하고 코드가 실행되는 동안 변수를 감지할 수 있습니다.
브라우저에서 디버깅 도구를 활성화하려면 일반적으로 F12 키를 누르고 디버깅 메뉴에서 "콘솔"을 선택합니다.
JavaScript 프로그램을 디버깅하려면 console.log()를 사용하는 것이 Alert()보다 더 좋은 방법입니다. 그 이유는 다음과 같습니다. Alert() 함수는 JavaScript 프로그램의 실행을 차단하여 console.log를 발생시킵니다. ()는 콘솔에 관련 정보만 출력하므로 비슷한 문제가 발생하지 않습니다
console.log()가 무엇인가요?
매우 오래된 일부 브라우저를 제외하고 오늘날 대부분의 브라우저에는 디버깅 기능이 내장되어 있지 않더라도 플러그인을 설치하여 보완할 수 있습니다. 예를 들어, 이전 버전의 Firefox에는 내장된 디버깅 도구가 없습니다. 이 경우 Firebug 플러그인을 설치하여 디버깅 기능을 추가할 수 있습니다. 디버깅 기능이 있는 브라우저에서는 console이라는 멤버 변수가 디버깅 도구의 콘솔을 참조하는 window 개체에 등록됩니다. 콘솔 객체의 log() 함수를 호출하여 콘솔에 정보를 출력할 수 있습니다. 예를 들어 다음 코드는 콘솔에 "샘플 로그"를 인쇄합니다.
코드는 다음과 같습니다. window.console.log("Sample log")
위 코드는 창 개체를 무시하고
코드는 다음과 같습니다:console.log("Sample log");
console.log()는 모든 문자열, 숫자 및 JavaScript 개체를 허용할 수 있습니다. Alert() 함수와 유사하게 console.log()는 개행 문자 n과 탭 문자 t도 허용할 수 있습니다. console.log() 문에 의해 출력된 디버깅 정보는 브라우저의 디버깅 콘솔에서 볼 수 있습니다. console.log()의 동작은 브라우저마다 다를 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
//变量
var i = 'I am a string';
console.log('变量：',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组：',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('对象：',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('对象数组1：',objArr1);
console.log('对象数组1：',objArr2);
</script>
</head>
<body>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
</body>
</html>debugger 키워드
debugger 키워드는 JavaScript 실행을 중지하고 디버그 기능을 호출하는 데 사용됩니다.
이 키워드는 디버깅 도구에서 중단점을 설정하는 것과 동일한 효과를 갖습니다.
디버깅을 사용할 수 없으면 디버거 문이 작동하지 않습니다.
디버거를 활성화하면 세 번째 줄 이전에 코드 실행이 중지됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p id="demo"></p>
<script>
var x = 5 * 5 + 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
브라우저를 엽니다. 마우스 오른쪽 버튼을 클릭하고 요소 검사를 선택합니다. 하단에 나타나는 창에서 "콘솔"을 선택하세요.
다음 섹션