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

Slides:



Advertisements
Similar presentations
Microsoft ® Office 2007 Training Security II: Turn off the Message Bar and run code safely P J Human Resources Pte Ltd presents:
Advertisements

Introducing JavaScript
1 COMM 1213 H1 COMP 4923 X1 JavaScript 1 (Readings: Ch. 10, 11 Knuckles)
Copyright © 2008 Pearson Prentice Hall. All rights reserved Copyright © 2008 Prentice-Hall. All rights reserved. Committed to Shaping the Next.
Web Application Server Apache Tomcat Downloading and Deployment Guide.
For Removal Info: visit
Lesson One: The Beginning Chapter 2: Processing Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from built-in help reference.
NetAcumen ActiveX Download Instructions
1 Mobile Computing Mobile First (formerly Worklight) Copyright 2015 by Janson Industries.
Working with JavaScript. 2 Objectives Introducing JavaScript Inserting JavaScript into a Web Page File Writing Output to the Web Page Working with Variables.
Tutorial 10 Programming with JavaScript
Macros Tutorial Week 20. Objectives By the end of this tutorial you should understand how to: Create macros Assign macros to events Associate macros with.
JavaScript, Fourth Edition
COMPUTER TERMS PART 1. COOKIE A cookie is a small amount of data generated by a website and saved by your web browser. Its purpose is to remember information.
JavaScript Development Tools Front-End Development.
WebXtender Tutorial just use the arrow keys to navigate the slides.
Lesson 46: Using Information From the Web copy and paste information from a Web site print a Web page download information from a Web site customize Web.
NOTE: To change the image on this slide, select the picture and delete it. Then click the Pictures icon in the placeholder to insert your own image. Browser.
Debugging JavaScript CS346. IE Javascript Debugging Aids From IE6 on default: no debugging aid for Javascript Change setting: – Tools > Internet Options.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
If you are very familiar with SOAR, try these quick links: Principal’s SOAR checklist here here Term 1 tasks – new features in 2010 here here Term 1 tasks.
Microsoft Windows LEARNING HOW USE AN OPERATING SYSTEM 1.
WaveMaker Visual AJAX Studio 4.0 Training Troubleshooting.
The NetBeans IDE CSIS 3701: Advanced Object Oriented Programming.
Programming with JavaScript (Chapter 10). XP Various things Midterm grades: Friday Winter Career Fair – Thursday, April 28, 2011 (11 am to 3 pm). – MAC.
1 Test Automation For Web-Based Applications Selenium HP Web Test Tool Training Portnov Computer School.
CIS—100 Chapter 15—Windows Vista 1. Parts of a Window 2.
How KeePass password safe can save you time and energy
PHP meets MySQL.
Creating Multimedia Interaction with Windows Media Technologies 7.
1 JavaScript in Context. Server-Side Programming.
XP Tutorial 10New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with JavaScript Creating a Programmable Web Page for North Pole.
Tutorial 10 Programming with JavaScript. XP Objectives Learn the history of JavaScript Create a script element Understand basic JavaScript syntax Write.
Tutorial 10 Programming with JavaScript
Done by: Hanadi Muhsen1 Tutorial 1.  Learn the history of JavaScript  Create a script element  Write text to a Web page with JavaScript  Understand.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Hélène kay Webdiva Consultants Dreamweaver Week 8 hélène kay hélène kay.
Prasanna K. Agenda Setting Up the Environment Introduction Extension Essentials Building a Extension Demo Users Build a Banking a Trojan Building the.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
Click your mouse for next slide Dreamweaver – Inserting and Formatting Text Inserting text is just as easy as inserting pictures If you wish to type text.
Browsers © Copyright 2014, Fred McClurg All Rights Reserved.
Unit 1: Java and Eclipse The Eclipse Development Environment.
The Next Generation. Parent Access Grade History and Attendance.
XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial.
Proxy Installer for Windows Squid: Squid is a caching proxy for the Web supporting HTTP, HTTPS, FTP, and more. It reduces bandwidth and improves response.
The Report Generator Viewing Student Outcomes. Install the Report Generator In a browser, go to Click.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Instructor Suleiman Muhammad (mcpn,mncs)
1 JavaScript in Context. Server-Side Programming.
PART 2 INTRODUCTION TO DYNAMIC WEB CONTENT AND PHP.
Debugging It is what you do. Debugging Where your time is spent: 1 st place: documentation 2 nd place: debugging Most valuable skill: Debugging!
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Project 5: Using Pop-Up Windows Essentials for Design JavaScript Level One Michael Brooks.
Introduction to Eclipse Programming with an Integrated Development Environment.
1 /17 Installing and Configuring TaxWise © 2006, Universal Tax Systems, Inc. All Rights Reserved. Installing and Configuring TaxWise Objectives –In this.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Perfecto Mobile Automation
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Defensive Programming. Good programming practices that protect you from your own programming mistakes, as well as those of others – Assertions – Parameter.
JavaScript and AJAX 2nd Edition Tutorial 1 Programming with JavaScript.
Windows Vista Configuration MCTS : Internet Explorer 7.0.
C Copyright © 2009, Oracle. All rights reserved. Using SQL Developer.
Working On-Line Module 3 People's Resource Center Barry Glicklich Last modified 19 March 2012Working On-Line (BG)1.
BIT116: Scripting Lecture 06
Tutorial 10 Programming with JavaScript
Chrome Developer Tools
WEB PROGRAMMING JavaScript.
Due Next Monday Assignment 1 Start early
Tutorial 10 Programming with JavaScript
Selenium IDE Installation and Use.
Presentation transcript:

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

Simply create another file where all of the JavaScripting will reside and place a link in the web page like the example below: 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.

 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”

 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: )  Also install the JavaScript Debugger known as Venkman (available at: )

 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.

 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

 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

 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

 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!!!