debugged!. you know that old line about an ounce of prevention? it’s true for debugging

12
Debugged!

Upload: kristian-terry

Post on 23-Dec-2015

240 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Debugged!

Page 2: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

You know that old line about an ounce of prevention?

It’s true for debugging

Page 3: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Place the JavaScript code in an external file (this will make line by line debugging match correctly as some browsers play games with line numbers)

Know what debugging is available in each browser and learn to use them well

Use alerts and assertions Logging

Page 4: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Simply create another file where all of the JavaScripting will reside and place a link in the web page like the example below:

<script type="text/javascript” src=“js/java.js"></script>

This points the webpage to use the JavaScript file “java” available in the js folder. Now if things go south, debugging should point to this file on a line by line basis.

Page 5: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

In IE, go to Tools > Internet Options and choose the Advanced tab. Check the box for "Display a notification for every script error.”

In Safari, it is hidden a bit. Type the following command in Terminal (with Safari NOT running):

% defaults write com.apple.Safari IncludeDebugMenu 1

Open Safari again and a debug menu should be available

To remove the menu, repeat the above code and use a “0” instead of the “1”

Page 6: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Mozilla Firefox requires the DOM Inspector option on the Tools menu. If this is not present, reinstall Firefox with the Developer Tools option turned on (Custom > Developer Tools).

Install the Web Developer Extension (available at: http://chrispederick.com/work/webdeveloper )

Also install the JavaScript Debugger known as Venkman (available at: http://www.mozilla.org/projects/venkman )

Page 7: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Disable page cache (Tools >Web Developer >Disable> Disable Cache)

There are many settings under Tools >Web Developer> Options>Options. Miscellaneous >Open the JavaScript console when the

current page generates a warning— Not advised unless you can read at Evelyn Wood speeds as this returns a ton of messages when code is bad.

Sidebar >Open the DOM Inspector in the sidebar — A nifty little side window which can be useful.

Sidebar>Open the JavaScript console in the sidebar — Same type of sidebar.

View Source >View Source in a tab instead of a window - did not work for me.

When making changes to your options, remember to close and reopen Firefox to activate the changes.

Page 8: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Useful, but use sparingly at key points in the code to avoid having to close multiple windows if/when code goes wrong

Avoid nested alerts as things can get messy rather quickly

Make the alert message something that aids in understanding the script’s operation and where the issue might reside

Page 9: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

A line of code that states basically, at this point, “X” must always be true. Define the parameters Place the assertion at points in the code

where a certain expectation must be true or false

Page 10: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Almost every piece of code ever written and worth its binary weight has a logging mechanism

This is the preferred method to use instead of multiple alerts (save alerts for showstoppers)

Insert the log() function and create it such that any errors will write to an external file for later review, thus making corrections a little simpler

Page 11: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging

Write good code (of course, but no one’s perfect!)

Plan and prepare an external JavaScript file

Learn what debuggers are available for each browser you might use and familiarize yourself with their functionality

Write useful alerts and assertions Use logging!!!

Page 12: Debugged!.  You know that old line about an ounce of prevention?  It’s true for debugging