Brief Intro to Firebug Firebug at a glance

• One of the most popular web debugging tool with a collecon of powerful tools to edit, debug and monitor HTML, CSS and JavaScript, etc. • Many rich features: • Inspect, Log, Profile • Debug, Analyze, Layout How to install

• Get firebug: • Open Firefox, and go to hp://geirebug.com/ • Click Install Firebug, and follow the instrucons • Ways to launch Firebug • F12, or Firebug Buon • Right click an element on the page and inspect it with Firebug Firebug Panels

• Console: An interacve JavaScript Console • HTML: HTML View • CSS: CSS View • Script: JavaScript Debugger • DOM: A list of DOM properes (defaults to window object) • Net: HTTP traffic monitoring • Cookies: Cookie View Tasks for HTML Panel

• Open twier.com and log in with your account. Acvate Firebug. • Tasks with HTML Panel • 1. Which

tag corresponds to the navigaon bar at the top of the page? • 2. Change the text “Messages” in the navigaon bar to “Tweets” • 3. Find out which

tag corresponds to the dashboard which is the le column of the page. Can you change the width of the dashboard to 200px? • 4. Try to figure out the URL of your profile picture at the top le corner of the home page, and use this URL to open this picture in a new tab. • 5. Change your name next to your profile picture to something else, and change the text colour to blue. Inspect HTTP Traffic

• Open twier.com and log in with your account. Acvate Firebug. • Tasks with Net Panel • 1. Which request takes the longest me to load? • 2. Locate the request header from the HTML request, and find out the informaon about your Firefox browser. • 3. What is the host informaon of the CSS file twier_core.bundle.css? What is the remote IP? How long does it take to load this file? Now disable the browser cache through the dropdown menu of the Net Panel, reload the page and see how long it takes to load file again. Why is there a difference? • 4. Switch to the XHR filter, wait two minutes, and see how many addional XHR requests are made. Can you figure out why there are addional XHR request made? • 5. Copy one URL of such XHR request, open it in a new tab, and see what response is returned. Imagine you have developed a piece of soware that checks if there are new twits for you, what kind of XMLHpRequests should you send to twier.com? Console Panel

• A JS command line, which interacvely executes JavaScript commands and lists messages. • Try a few funcons in the command line • document.write(“

This is a heading

”); • prompt(“Please input your name”); • alert(“Hello world!”); • confirm(“Please confirm this box”); • console.log(“this is a log message”); Script Panel

• Open hp://www.cs.utoronto.ca/~soh/csc309/MM_JAVASCRIPT3E/ chapter17/debugger.html • Tasks with Script Panel • 1. Click on “Start Quiz”. Noce a radio buon with “undefined” name. • 2. Open up Firebug and click Script Panel. • 3. Find a JavaScript funcon that creates these radio buons. • 4. Put a break point inside the funcon and reload the page. • 5. Enter variables i and answers.length as new watch expressions on the right panel. • 6. Figure out why “undefined” buon appears on the page. References

• Firebug: hps://geirebug.com/wiki • HTML, CSS, JavaScript, JSON: hp://www.w3schools.com/default.asp • JavaScript & JQuery: The Missing Manual Example Code: hp://examples.oreilly.com/0636920032663/