JavaScript/Notes/Debugging: Difference between revisions
(Created page with "<source lang="html5"> <!doctype html> <head> <title>Debugger Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>Test Debugg...") |
No edit summary |
||
(14 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== Tasks Page == | |||
Find a few tasks on the following page: | |||
[http://garretts.github.io/jsclass/debugging/ debugging tasks] | |||
== Error Reporting in IE == | |||
In IE, go to Tools > Internet Options and choose the Advanced tab. | |||
Make sure the check box for "Display a notification for every script error” is checked. | |||
== It Doesn't Work! == | |||
* Make sure you've correctly added a closing </SCRIPT> tag. | |||
* Check the error console. | |||
* Validate the HTML Markup | |||
* See also [http://jsfaq.org/notes/code-guidelines/ Code Guidelines for Rich Internet Application Development] | |||
== How to Launch the Debugger == | |||
'''Mac:''' Opera, Chrome, Firefox: Option + command + i. | |||
'''Chrome:''' | |||
[https://developers.google.com/chrome-developer-tools/docs/javascript-debugging Debugging JavaScript] | |||
=== debugger keyword === | |||
<source lang="javascript"> | |||
function myFunc(myParam) { | |||
debugger; | |||
var myVar = 1; | |||
function innerFunc() { | |||
} | |||
} | |||
</source> | |||
=== FIXME: Find and fix the bug === | |||
The code example below must be changed to output: | |||
<pre> | |||
Check the value of i: 0 | |||
Check the value of i: 1 | |||
Check the value of i: 2 | |||
Check the value of i: 3 | |||
</pre> | |||
<strong>Example</strong> | |||
<source lang="javascript"> | |||
var count = 0; | |||
var output = document.getElementById("output"); | |||
for ( var i = 0; i < 4; i++ ) { | |||
setTimeout(function(){ | |||
output.textContent = "Check the value of i:" + i; | |||
}, 200); | |||
} | |||
</source> | |||
=== debugger from the menu === | |||
Firefox: | |||
[[File:Debugger.png]] | |||
=== Add a Breakpoint === | |||
A breakpoint is an intentional point in a script put in place for debugging purposes. | |||
Opera: | |||
Firefox: | |||
[[File:Debugger-breakpoint.png]] | |||
=== Debugger Keyword Full Example === | |||
Copy'n'paste this example into your text editor, open your browser, and open this file. | |||
<source lang="html5"> | <source lang="html5"> | ||
<!doctype html> | <!doctype html> |
Latest revision as of 18:20, 1 January 2014
Tasks Page[edit]
Find a few tasks on the following page: debugging tasks
Error Reporting in IE[edit]
In IE, go to Tools > Internet Options and choose the Advanced tab. Make sure the check box for "Display a notification for every script error” is checked.
It Doesn't Work![edit]
- Make sure you've correctly added a closing </SCRIPT> tag.
- Check the error console.
- Validate the HTML Markup
- See also Code Guidelines for Rich Internet Application Development
How to Launch the Debugger[edit]
Mac: Opera, Chrome, Firefox: Option + command + i.
Chrome: Debugging JavaScript
debugger keyword[edit]
<source lang="javascript"> function myFunc(myParam) {
debugger; var myVar = 1; function innerFunc() { }
} </source>
FIXME: Find and fix the bug[edit]
The code example below must be changed to output:
Check the value of i: 0 Check the value of i: 1 Check the value of i: 2 Check the value of i: 3
Example <source lang="javascript"> var count = 0; var output = document.getElementById("output");
for ( var i = 0; i < 4; i++ ) {
setTimeout(function(){ output.textContent = "Check the value of i:" + i; }, 200);
} </source>
[edit]
Add a Breakpoint[edit]
A breakpoint is an intentional point in a script put in place for debugging purposes. Opera: Firefox:
Debugger Keyword Full Example[edit]
Copy'n'paste this example into your text editor, open your browser, and open this file. <source lang="html5"> <!doctype html> <head> <title>Debugger Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
Test Debugger
When Entering an Execution Context, the Variable Environment is initialized with parameter variables, Function Declarations, and Variable Statements.
function myFunc(myParam) { debugger; var myVar = 1; function innerFunc() { } }
<script> function myFunc(myParam) {
debugger; var myVar = 1; function innerFunc() { }
} </script>
Open the debugger and then click the button below.
<button onclick="myFunc(7)">myFunc(7)</button> </body> </html> </source>