-
[javascript] 34. 디버깅(debugging) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:24JavaScript Debugging1. JavaScript Debugging자바스크립트 코드는 디버거(debugger) 없이는 작성하기 힘듭니다.문법적(Syntax) 에러나 논리적(logical) 에러를 포함한 코드는 진단(diagnose)하기 힘듭니다.자바스크립트 코드가 에러를 가지고 있을 때, 아무일도 일어나지 않습니다. 에러 메세지 또한 없습니다.2. JavaScript Debuggers프로그래밍 코드의 에러를 찾는 것은 코드 디버깅이라 부릅니다.디버깅은 쉽지 않습니다. 그러나 현대 브라우저는 내장된 디버거를 가지고 있습니다.디버거를 사용하여 중단 점을 설정할 수 있습니다. 그리고 코드가 실행되는 동안 변수를 검사할 수 있습니다.3. The console.log() Method브라우저가 디버깅을 지원하면 console.log()를 사용하여 자바스크립트 값을 디버거 윈도우에서 확인 할 수 있습니다.123456789101112131415161718192021<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p><script>a = 5;b = 6;c = a + b;console.log(c);</script></body></html>
cs 4. Setting Breakpoints디버거 윈도우에서, 자바스크립트 코드의 중단점을 설정 할 수 있습니다.각 중단점마다, 자바스크립트는 실행을 멈추고, 자바스크립트 값을 검사 할 수 있습니다.값을 검사한 후에, 코드의 실행을 재게 할 수 있습니다.5. The debugger Keyworddebugger 키워드는 자바스크립트의 실행을 멈추고, 디버깅 함수를 호출 합니다.키워드는 디버거에서 중단 점을 설정하는 것과 같은 기능을 합니다.123456789101112131415161718192021<!DOCTYPE html><html><head></head><body><p id="demo"></p><p>With the debugger turned on, the code below should stop executing before it executes the third line.</p><script>var x = 15 * 5;debugger;document.getElementById("demo").innerHTML = x;</script></body></html>cs 6. Major Browsers' Debugging Tools일반적으로, F12 버튼으로 브라우저의 디버깅을 활성화 할 수 있습니다.Chrome
- Open the browser.
- From the menu, select tools.
- From tools, choose developer tools.
- Finally, select Console.
Firefox Firebug
- Open the browser.
- Go to the web page:
http://www.getfirebug.com. - Follow the instructions how to:
install Firebug
Internet Explorer
- Open the browser.
- From the menu, select tools.
- From tools, choose developer tools.
- Finally, select Console.
Opera
- Open the browser.
- Go to the webpage:
http://dev.opera.com/articles/view/opera-developer-tools. - Follow the instructions how to:
add a Developer Console button to your toolbar.
Safari Firebug
- Open the browser.
- Go to the webpage:
http://extensions.apple.com. - Follow the instructions how to:
install Firebug Lite.
Safari Develop Menu
- Go to Safari, Preferences, Advanced in the main menu.
- Check "Enable Show Develop menu in menu bar".
- When the new option "Develop" appears in the menu:
Choose "Show Error Console".
[ 출처: W3Schools ]
'Web > JavaScript' 카테고리의 다른 글
[javascript] 37. Style Guide - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 36. Strict Mode - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 35. 끌어올리기(Hoisting) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 33. 에러 - try/catch 문(Error - try / catch throw) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 32. 정규표현식(regular expression) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 31. 형 변환(type conversion) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
