JavaScript/Notes/Debugging: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
No edit summary
 
(One intermediate revision 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 ==  
== Error Reporting in IE ==  
In IE, go to Tools > Internet Options and choose the Advanced tab.  
In IE, go to Tools > Internet Options and choose the Advanced tab.  
Line 13: Line 17:
'''Mac:''' Opera, Chrome, Firefox: Option + command + i.
'''Mac:''' Opera, Chrome, Firefox: Option + command + i.


'''Chrome'''
'''Chrome:'''
[https://developers.google.com/chrome-developer-tools/docs/javascript-debugging Debugging JavaScript]
[https://developers.google.com/chrome-developer-tools/docs/javascript-debugging Debugging JavaScript]



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]

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>

debugger from the menu[edit]

Firefox: Debugger.png

Add a Breakpoint[edit]

A breakpoint is an intentional point in a script put in place for debugging purposes. Opera: Firefox: Debugger-breakpoint.png


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>