A crash course in Firebug
•Transferir como KEY, PDF•
0 gostou•617 visualizações
An internal presentation and knowledge share, given to the development team. Madgex, 2009.
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
A crash course in Firebug
- 1. OVERVIEW, CRASH COURSE & TOUR Madgex ILP
- 4. WHAT IS FIREBUG? •A extension for Firefox
- 5. WHAT IS FIREBUG? •A extension for Firefox • Also available for IE/Opera/Safari as a bookmarklet
- 6. WHAT IS FIREBUG? •A extension for Firefox • Also available for IE/Opera/Safari as a bookmarklet • What does it include? HTML/CSS Editor DOM Inspector JS Console & command-line interpreter, JS Profiler Network Monitor
- 7. WHAT IS FIREBUG? •A extension for Firefox • Also available for IE/Opera/Safari as a bookmarklet • What does it include? HTML/CSS Editor DOM Inspector JS Console & command-line interpreter, JS Profiler Network Monitor • It’s extendable!
- 8. WHY YOU SHOULD USE IT • Live editing of HTML/CSS Watch out - it’s read-only!
- 9. WHY YOU SHOULD USE IT • Live editing of HTML/CSS Watch out - it’s read-only! • Gives useful JS errors & allows for useful logging to the console No more Alerts()!
- 10. WHY YOU SHOULD USE IT • Live editing of HTML/CSS Watch out - it’s read-only! • Gives useful JS errors & allows for useful logging to the console No more Alerts()! • Shows all AJAX GET’s/POST’s
- 11. WHY YOU SHOULD USE IT • Live editing of HTML/CSS Watch out - it’s read-only! • Gives useful JS errors & allows for useful logging to the console No more Alerts()! • Shows all AJAX GET’s/POST’s • Firecookie extension
- 12. WHY YOU SHOULD USE IT • Live editing of HTML/CSS Watch out - it’s read-only! • Gives useful JS errors & allows for useful logging to the console No more Alerts()! • Shows all AJAX GET’s/POST’s • Firecookie extension • There’s a ton more, I’ll demo it in a bit...
- 13. TO THE TOUR
- 15. WHAT’S THE CATCH? • The CMS doesn’t work in Firefox
- 16. WHAT’S THE CATCH? • The CMS doesn’t work in Firefox • Can slow the browser
- 17. WHAT’S THE CATCH? • The CMS doesn’t work in Firefox • Can slow the browser • The Firebug project has gone through a rough patch 1.2 & 1.3 releases are too buggy to use - luckily 1.4alpha looks to be back on track
- 18. WHAT’S THE CATCH? • The CMS doesn’t work in Firefox • Can slow the browser • The Firebug project has gone through a rough patch 1.2 & 1.3 releases are too buggy to use - luckily 1.4alpha looks to be back on track • Firefox 2.0.0.20 & Firebug 1.05 is the stable environment I use Firefox from PortableApps.com works really well as a dev environment Firefox portable - http://tinyurl.com/ff2portable Firebug 1.05 - http://tinyurl.com/firebug105
Notas do Editor
- Hello, thanks for taking to time to come along. Hopefully you’ll find this useful.\nI’m going to do a quick overview then spend most of the time in the tool itself showing you how it all works.\nI want this talk to be informal. If you have any questions - shout & if you have a laptop, play along.\n
- People who work in HTML/CSS/JavaScript should have this tool in their arsenal - hopefully i’ll show you it’s uses in this talk.\nCopywriters and the curious (edit text, extract colours, images etc.)\n
- so, what is firebug?\n
- \n
- Firefox has thousands of extensions. I have a bunch I use daily (firebug, colorzilla, delicious, html validator, web developer).\nExtensions are basically zipped up files containing XUL (XML UI language) and Javascript.\nThere’s also tonnes of ‘top 20 addons for firefox’ blog posts out there - firebug will feature in nearly every one.\n
- IE and other browsers are not left out - there is a bookmarklet available. but it pales in comparison to the real extension.\nThe author Joe Hewitt created it so that he had a half-decent client-side logging mechanism for IE.\n
- Using the editors & inspectors you can explore a webpage, revealing how it hangs together and edit it - i’ll cover this more later.\nJavascript console & interpreter - like the Immediate window in Visual Studio.\nJS profiler - how fast your code is running - easily find out whats slowing down the page.\nNetwork monitor - like a stopwatch for page loads, with a breakdown of how long each http request took.\n
- Just like Firefox, Firebug (itself an addon) can have add-ons.\nThe community have plugged some of the shortcomings with firebug & provided UX enhancements.\n\n
- So, why should you use it?\nWhen the HTML & CSS is loaded and parsed by the browser it will render it on the page (inc. CSS, Images etc.). Using the HTML view you effectively get to x-ray the rendered page. This isn’t View Source, it’s a tree of the parsed HTML, so you can drill into div’s find the child nodes, see CSS that’s being applied.\nAnd make changes! watch out though, it’s read-only. One mistaken F5 and your changes are gone.\n
- IE’s Javascript errors are crap. You get a generic error & line number - that’s it.\nUsing the firebug console you can see helpful JS errors - the source file, line number, error detail, trace information & the option to set a breakpoint on the line that threw the error.\nJS breakpoints!\n\n
- All XMLHttpRequest (also known as AJAX) requests are logged in the console.\nYou can view the URL requested, with parameters passed, the request & response headers and the response itself.\nInvaluable - like a cut-down packet sniffer.\n
- One extension to firebug I really like is FireCookie - this allows you to view all cookies as their passed backwards and forwards & their contents/expiry etc.\nYou can also entirely manage them - create/delete/edit on the fly.\nYSlow extension for finding your ‘score’ against their rules for High Performance Web Sites\n
- There’s more to Firebug, and I’ll give the full tour in a minute, but these things alone make it a tool worth learning in my opinion.\n
- Firebug has a lot of stuff in it - if i start to drone on too much, give a loud cough or something to move me along.\n
- \n
- \n
- The stupid, stupid CMS doesn’t work in FF/FB - which means it’s a serious struggle to debug.\n
- It can be disabled, but having all the panels in Firebug open will slow down the browsing experience as it has all the extra overhead of populating the Firebug panels.\n
- Missing breakpoints, Javascript engine keeling over, panels not rendering properly.\n\n
- This is what I use - it’s a little out of date, but all the tour here used it & it’s stable.\n