Brief Intro to Firebug Firebug at a glance • One of the most popular web debugging tool with a collec6on 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 instruc6ons • Ways to launch Firebug • F12, or Firebug Buon • Right click an element on the page and inspect it with Firebug Firebug Panels • Console: An interac6ve JavaScript Console • HTML: HTML View • CSS: CSS View • Script: JavaScript Debugger • DOM: A list of DOM proper6es (defaults to window object) • Net: HTTP traffic monitoring • Cookies: Cookie View Tasks for HTML Panel • Open twiLer.com and log in with your account. Ac6vate Firebug. • Tasks with HTML Panel • 1. Which <div> 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 <div> 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 twiLer.com and log in with your account. Ac6vate Firebug. • Tasks with Net Panel • 1. Which request takes the longest 6me 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 twiLer_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 addi6onal XHR requests are made. Can you figure out why there are addi6onal 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 so`ware that checks if there are new twits for you, what kind of XMLHpRequests should you send to twiLer.com? Console Panel • A JS command line, which interac6vely executes JavaScript commands and lists messages. • Try a few func6ons in the command line • document.write(“<h1> This is a heading</h1>”); • prompt(“Please input your name”); • alert(“Hello world!”); • confirm(“Please confirm this box”); • console.log(“this is a log message”); Script Panel • Open hLp://www.cs.utoronto.ca/~soh/csc309/MM_JAVASCRIPT3E/ chapter17/debugger.html • Tasks with Script Panel • 1. Click on “Start Quiz”. No6ce a radio buLon with “undefined” name. • 2. Open up Firebug and click Script Panel. • 3. Find a JavaScript func6on that creates these radio buLons. • 4. Put a break point inside the func6on and reload the page. • 5. Enter variables i and answers.length as new watch expressions on the right panel. • 6. Figure out why “undefined” buLon appears on the page. References • Firebug: hps://geirebug.com/wiki • HTML, CSS, JavaScript, JSON: hLp://www.w3schools.com/default.asp • JavaScript & JQuery: The Missing Manual Example Code: hLp://examples.oreilly.com/0636920032663/ .