Firebug Crash Course

2,109 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,109
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Firebug Crash Course

  1. 1. AdMob Tech Talk 001 http://www.getfirebug.com
  2. 2. How to open Firebug F12
  3. 3. The Tabs <ul><li>Console </li></ul><ul><li>HTML </li></ul><ul><li>CSS </li></ul><ul><li>Script </li></ul><ul><li>Dom </li></ul><ul><li>Net </li></ul>
  4. 4. Console – Bread & Butter <ul><li>Javascript error console </li></ul><ul><li>console.log() </li></ul><ul><li>console.trace() </li></ul><ul><li>Javascript command line </li></ul><ul><li>AJAX Requests </li></ul>`
  5. 5. HTML – Curious About Dom? <ul><li>Inspect </li></ul><ul><li>Modify </li></ul><ul><li>CSS Layout </li></ul><ul><li>Delete </li></ul><ul><li>Monitor </li></ul><ul><li>Event Logging </li></ul>
  6. 6. CSS – Stylin' <ul><li>CSS on page </li></ul><ul><li>All CSS files </li></ul><ul><li>Modify CSS </li></ul>
  7. 7. Script – Debugger <ul><li>Full debugger </li></ul><ul><li>Breakpoints </li></ul><ul><li>Step in, Step over, etc </li></ul>
  8. 8. Dom – Into the Tree <ul><li>Dom elements </li></ul><ul><li>Great for complex objects </li></ul>
  9. 9. Net - Performance <ul><li>Downloaded objects </li></ul><ul><li>Profiling page </li></ul><ul><li>Page size </li></ul>

×