Tài liệu Instant Firebug Starter pptx

LINK DOWNLOAD MIỄN PHÍ TÀI LIỆU "Tài liệu Instant Firebug Starter pptx": http://123doc.vn/document/1047613-tai-lieu-instant-firebug-starter-pptx.htm

About the Author
Chandan Luthra is an agile and pragmatic programmer, and an active participant at the local
open source software events, where he evangelizes about Firebug, Groovy, Grails, and JQuery.
He is a Linux and open source enthusiast. He also involves himself in writing blogs, articles, and
is an active member on various tech-related mailing lists. He has developed web apps for various
industries, including entertainment, nance, media and publishing, as well as others.
He loves to share his knowledge and good coding practices with other team members
in order to perfect their development skills. In his free time, he loves to contribute to open
source technologies.
He also loves to code in JQuery with Firebug, which makes development very easy for him.
He is a fond lover of Firebug and has been using it since 2007 and co-authored a book on
Firebug 1.5 with Packt Publishing in the year 2010.
I would like to thank my beloved wife, Rashmi, for her love and support during
my ung adventures into esoteric nonsense. I would also like to thank Chetan
Khurana for helping me out with valuable ideas and suggestions. Finally, I
wish to thank to the Packt team and reviewers for giving a perfect shape to
this book.
www.it-ebooks.info
About the Reviewers
Jan Odvárko has been an independent software consultant for over 15 years. He has led and
worked on projects as diverse as real-time data visualization, clinical data management, web
performance tools, and visual tools for web development such as Firebug.
He has a deep passion for user-interface design and interaction, and has taught courses on a
wide range of computer science topics. He is the author of numerous articles and a speaker
at industry events. His experience includes roles such as software architect, project manager,
technical lead, consultant, software business founder, and contributor to many open
source projects.
He is currently leading the Firebug project. Prior to that he was co-founder and Chief Software
Architect at AllPeers.
He received a degree in Computer Science from University in Ceske Budejovice and he is
uent in Czech and English. You can read more about Jan on his website at http://www.
softwareishard.com/blog/about/.
He is currently living with his son Tomáš Odvárko in Czech Republic.
www.it-ebooks.info
Michael Ratclie is a Software Developer with Mozilla, a non-prot organization whose
focus is to make the Internet a better place whilst keeping it free and available to everybody.
He specializes in JavaScript, but also enjoys hacking away on various projects in various other
languages. He is an active participant at local open source software events and is a Linux and
open source enthusiast. He is also an active member of various tech-related mailing lists.
He loves to share his knowledge and good coding practices in order to help other hackers
improve their development skills. In his free time, he loves to contribute to open source
technologies. He is a veteran Firebug user and has been using it almost since its conception.
He works for Mozilla as a member of the Firefox Developer Tools Team. His team's goal is to
provide the greatest set of web developer tools ever. Along with Firebug, Firefox's built-in
developer tools provide an amazing aid for any web developer but he believes that they can
always be made better.
He was the technical editor for Packt Publishing's book, Firebug 1.5.
Follow him on Twitter @ratcliffe_mike or read his blog at
http://www.flailingmonkey.com.
I would like to thank my beautiful wife Sabine for putting up with my continual
desire to ll my brain with computer stu.
www.it-ebooks.info
www.packtpub.com
Support les, eBooks, discount oers and more
You might want to visit www.PacktPub.com for support les and downloads related to
your book.
Did you know that Packt oers eBook versions of every book published, with PDF and ePub
les available? You can upgrade to the eBook version at www.PacktPub.com and as a print book
customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@
packtpub.com
for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters and receive exclusive discounts and oers on Packt books and eBooks.
www.it-ebooks.info
packtLib.packtpub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
www.it-ebooks.info
Table of Contents
Instant Firebug Starter 1
So, what is Firebug? 3
Firebug capabilities 3
Installation 5
Installing Firebug on Firefox 5
Step 1 – what do I need? 5
Step 2 – downloading Firebug 5
Step 3 – adding Firebug to Firefox 6
Step 4 – conrm Firebug installation 6
Step 5 – restart Firefox 6
Installing Firebug on non-Firefox browsers 6
Live link 7
Local link 7
Bookmarklet 7
And that's it! 8
Quick start – Firebug window overview and inspecting 9
Console panel 9
HTML panel 10
CSS panel 10
Script panel 11
Things you can perform under the Script panel 11
DOM panel 12
Net panel 12
Cookies panel 13
Inspecting page components 13
Step 1 – open Firebug 14
Step 2 – activate inspection tool 14
Step 3 – selecting the element 14
Quick inspect 15
www.it-ebooks.info
Table of Contents
[ ii ]
Editing page components 15
Conclusion 16
Top 17 features you'll want to know about 17
Executing JavaScript on the y 17
Command editor 18
Smart paste 18
Using Console API 18
console.log(object[, object, ]) 18
console.debug(object[, object, ]) 19
console.info(object[, object, ]) 19
console.warn(object[, object, ]) 19
console.error(object[, object, ]) 19
console.assert(expression[, object, ]) 20
console.dir(object) 20
console.dirxml(node) 20
console.trace() 20
console.group(object[, object, ]) 20
console.groupCollapsed(object[, object, ]) 20
console.groupEnd() 20
console.time(name) 20
console.timeEnd(name) 20
console.prole([title]) 21
console.proleEnd() 21
console.count([title]) 21
Modifying an HTML element's attribute on the y 21
Adding a new attribute to an existing HTML element 22
Deleting an HTML element 23
Setting breakpoints on an HTML element 23
Inspecting cascading rules 25
Previewing colors and images 27
Tweaking CSS on the y 27
Enabling and disabling CSS rules 29
JavaScript proling 29
Columns and description of proler 30
JavaScript debugging 31
Applying Script breakpoints 32
Applying conditional breakpoints 35
Inspecting DOM 37
Network monitoring 39
Description of information in the Net panel 40
Load-time bar color signicance 40
Examining HTTP headers 42
Monitoring AJAX requests 43
Managing cookies 44
www.it-ebooks.info
Table of Contents
[ iii ]
People and places you should get to know 46
Ocial Sites 46
Articles and Tutorials 46
Community 46
Blogs 47
Twitter 47
www.it-ebooks.info
www.it-ebooks.info
Instant Firebug Starter
Welcome to the Instant Firebug Starter. This book has been especially created to
provide you with all the information that you need to get started with Firebug. You
will learn the basics of Firebug, get started with editing, debugging, monitoring
web pages, and discover some tips and tricks for using Firebug.
This document contains the following sections:
So what is Firebug? covers what Firebug actually is, what you can do with it,
why it’s so great, and why most web app and UI developers are using it across
the globe.
Installation covers how to download and install Firebug with minimum fuss and
then set it up so that you can use it as soon as possible.
Quick start gives you an overview of all the tabs in Firebug and how to perform
one of the core tasks of Firebug; inspecting and editing HTML. Follow the steps to
inspect and edit elements of your own web pages, which will be the basis of most
of your work in Firebug.
Top 17 features you need to know about explains how to inspect and edit HTML,
edit CSS on the y, prole and debug JavaScript, inspect DOM, and use a few
popular Firebug extensions. By the end of this section, you will be able to use
Firebug for inspecting and editing HTML on the y with an example which helps
you in the web application development process. You can also edit CSS and
visualize CSS metrics to tweak the look and feel of web pages immediately in
Firefox itself. It will then be followed by proling and debugging JavaScript with
a small Hello world example of JavaScript. You will also be able to explore DOM,
optimize the performance of a small sample application hosted on web server,
and analyze AJAX calls of dierent sites with the help of the Net tab of Firebug.
People and places you should get to know tells us every open source project is
centered around a community. This section provides you with many useful links
to the project page and forums, as well as a number of helpful articles, tutorials,
blogs, and Twitter feeds of Firebug super-contributors.
www.it-ebooks.info