Brief Intro to Firebug Sukwon Oh CSC309, Summer 2015

Transcription

1 Brief Intro to Firebug Sukwon Oh CSC309, Summer 2015

2 Firebug at a glance One of the most popular web debugging tool with a colleccon of powerful tools to edit, debug and monitor HTML, CSS and JavaScript, etc. Many rich features: Inspect, Log, Profile Debug, Analyze, Layout

3 How to install Get firebug: Open Firefox, and go to htp://gevirebug.com/ Click Install Firebug, and follow the instruccons Ways to launch Firebug F12, or Firebug BuTon Right click an element on the page and inspect it with Firebug

4 Firebug Panels Console: An interaccve JavaScript Console HTML: HTML View CSS: CSS View Script: JavaScript Debugger DOM: A list of DOM properces (defaults to window object) Net: HTTP traffic monitoring Cookies: Cookie View

5 Tasks for HTML Panel Open twiter.com and log in with your account. AcCvate Firebug. Tasks with HTML Panel 1. Which <div> tag corresponds to the navigacon bar at the top of the page? 2. Change the text Messages in the navigacon bar to Tweets 3. Find out which <div> tag corresponds to the dashboard which is the led 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 led 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.

6 Inspect HTTP Traffic Open twiter.com and log in with your account. AcCvate Firebug. Tasks with Net Panel 1. Which request takes the longest Cme to load? 2. Locate the request header from the HTML request, and find out the informacon about your Firefox browser. 3. What is the host informacon of the CSS file twiter_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 addiconal XHR requests are made. Can you figure out why there are addiconal 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 sodware that checks if there are new twits for you, what kind of XMLHTpRequests should you send to twiter.com?

7 Console Panel A JS command line, which interaccvely executes JavaScript commands and lists messages. Try a few funccons 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 );

8 Script Panel Open htp:// chapter17/debugger.html Tasks with Script Panel 1. Click on Start Quiz. NoCce a radio buton with undefined name. 2. Open up Firebug and click Script Panel. 3. Find a JavaScript funccon that creates these radio butons. 4. Put a break point inside the funccon and reload the page. 5. Enter variables i and answers.length as new watch expressions on the right panel. 6. Figure out why undefined buton appears on the page.

9 References Firebug: htps://gevirebug.com/wiki HTML, CSS, JavaScript, JSON: htp:// JavaScript & JQuery: The Missing Manual Example Code: htp://examples.oreilly.com/ /