Rc108 010d Firebug

#108 Get More Refcardz! Visit refcardz.
com
CONTENTS INCLUDE:
n
About Firebug Getting Started with
Firebug 1.5
n
Installation
n
Inspecting Page Elements
n
JavaScript Profiling
n
Keyboard and Mouse Shortcuts
n
Console API Reference and more...
By Chandan Luthra & Deepak Mittal
• Move your cursor on the page component/section that
ABOUT FIREBUG you want to inspect.
• Click on the page component/section to investigate it.
Firebug is a free and open-source tool, available as a Mozilla
Firefox extension, which allows debugging, editing and There is another easy and fast way to inspect an element. Just
monitoring of any website’s CSS, HTML, DOM and JavaScript. right click on the page component/section and select “Inspect
It allows performance analysis of a website and has a Element” from the context menu. You can also directly select
JavaScript console for logging errors and watching values. a DOM node under the HTML tab to view its style, layout, &
Firebug has many other tools to enhance the productivity DOM attributes.
of today’s web developer. Firebug provides all the tools
that a web-developer needs to analyze, debug and monitor JAVASCRIPT PROFILING
JavaScript, CSS, HTML and Ajax. Firebug includes a debugger,
error console, command line, and a variety of useful inspectors. Type the following code in an HTML file, save it and open it up
with Firebug enabled Firefox (if Firebug is not enabled then
Please note that though Firebug allows you to make press F12 key to activate it):
changes to the source code of your web page, but
<html>
the changes are done to the copy of the HTML code
www.dzone.com
Hot which has been sent to the browser by the server.

<head><title>Firebug</title>
<script>
Tip Any changes that are done to the code are done in function bar(){
console.profile(‘Measuring time’);
the copy which is with the browser and not in the foo();
console.profileEnd();
code which is on the server. }
function foo(){
loop(1000);loop(100000);loop(10000);
INSTALLATION }
function loop(count){
for(var i=0;i<count;i++){}
Firebug is developed as a Firefox addon and can be installed }
</script></head><body>
on Firefox like all other add-ons. In order to make Firebug Click this button to profile JavaScript
work for non-Firefox browsers, there is a JavaScript “Firebug <input type=”button” value=”Start” onclick=”bar();”/>
</body></html>
Lite” from Firebug which makes available a large set of Firebug
features. Based on your browser version, you can install the Click on the button to start the JavaScript profiler. You will see
corresponding Firebug version. a table generated in the Firebug’s Console panel. Description
and purpose of the columns:
Getting Started with Firebug 1.5
Firebug Version Browser Version

Function: This column shows the name of each function.
Firebug 1.6 alpha Firefox 3.6 and Firefox 3.7
Firebug 1.5 Firefox 3.5 and Firefox 3.6
Firebug 1.4 Firefox 3.0 and Firefox 3.5
Firebug 1.3 Firefox 2.0 and Firefox 3.0 Get over 90 DZone Refcardz
Firebug Lite IE, Safari and Opera
FREE from Refcardz.com!
To install Firebug on Firefox, visit http://getfirebug.com and
click the “Install Firebug on Firefox” button.
To use Firebug Lite on non Firefox browsers, visit

http://getfirebug.com/firebuglite, copy the JavaScript from
there and include it in your HTML code.
INSPECTING PAGE ELEMENTS
This is the first and main step for investigating an HTML element.
• Click on the “inspect” button to get into the

Firebug’s inspection mode.
DZone, Inc. | www.dzone.com

2
Call: Shows the count of how many times a particular function Click on the “Click Me!” button to start the execution. You will
has been invoked. (3 times for loop() function in our case.) notice that JS execution is paused at the breakpoint that you
set.
Percent: Shows the time consuming of each function in
percentage. You can now step debug the JavaScript by pressing one of
these buttons (Continue, Step Over, Step Into and Step Out)
Own Time: Shows the duration of own script in a particular under the “Script” tab.
function. For example foo() function has none of its own code.
Instead, it is just calling other functions. So, its own execution
time will be ~0ms. If you want to see some values for that
column, add some looping in this function. • Continue (F8): Allows you to resume the script execution
once it has been stopped via another breakpoint.
Time: Shows the duration of execution from start point of a
function to the end point of a function. For example foo() has • Step Over (F10): Allows you to step over the function call.
no code. So, its own execution time is approx ~0ms, but we • Step Into (F11): Allows you to step into the body of the
call other functions in that function. So, the total execution another function.
time of other functions is 4.491ms. So, it shows 4.54ms in that
• Step Out: Allows you to resume the script execution and
column which is equal to own time taken by 3 loop() function +
will stop at next breakpoint.
own time of foo().
Avg: Shows the average execution time of a particular function. TWEAK CSS ON THE FLY
If you are calling a function one time only, you won’t see the
differences. If you are calling more than one time, you will see Through Firebug, you can add, remove and change the CSS
the differences. The formula for calculating the average is: properties of inspected elements. This is a most useful feature
Avg = Own time / Call of Firebug through which one can fix the UI issues rapidly and
easily. You can watch the live demo of the changes that you are
Min and Max columns: Shows the minimum execution time of
making in the CSS tab. If you want to add the ‘color’ property
a particular function. In our example, we call loop() for 3 times.
of an inspected element:
When we passed 1000 as a parameter, it probably took only
a few millisecond (let’s say 0.045ms.) and when, we passed • ‘Double-click’ on the ‘Style’ panel of HTML tab. A little
100000 to that function, it took much longer than first time (let’s text editor will appear and type ‘color’ followed by a
say 4.036ms). So, in that case, 0.045ms will be shown in Min ‘TAB’ key.
column and 4.036ms will be shown in Max column.
• Now the tiny text editor moves to the right side of the
File: Shows the file name of file with line number where the ‘color’ property asking you to enter the value (color code)
function is located for the property. Provide a value to it and press enter to
see the magic.
JAVASCRIPT DEBUGGING
Firebug allows you to insert break points and step debug the
JS code.
<html>
<head><title>Javascript Debugging</title>
<script>
function populateDiv(){
var divElement = document.
getElementById(‘messageLabel’);
divElement.innerHTML = “Lorem ipsum dollor”;
}
</script></head>
<body>
<div id=”messageLabel”></div>
<input type=”button” value=”Click Me!”
onclick=”populateDiv();” />
</body></html>
Now, under the Firebug’s “Script” tab, move your mouse

pointer on the line number as shown in the image and click to

insert a breakpoint.
Hot Apart from JS auto code-completion, Firebug provides an

Tip auto-complete feature for CSS properties too.
Hot To verify that you have inserted a break point, you can see
the list of breakpoints in the “Breakpoints” panel on the To disable a CSS rule, move the mouse pointer near to the CSS
Tip right side of “Script” tab. rule. Click on the ‘do-not’ icon that appears on the left side
of the rule.

3
To change a specific CSS rule, simply click on the rule, a text or XML. This is very useful while debugging any AJAX code,
editor will appear asking you for the new property or value. and it’s also quite fun to analyse how other web pages use AJAX.
You can see the headers, Response, JSON, Response/Request

NETWORK MONITORING
Headers, GET/POST call.
Firebug also allows monitoring web pages of your application.

A web app might appear to be slow to an end user due to
Network latency, Order in which the files are loaded, Number
of concurrent request made to server or Browser caching.
Firebug’s Net panel allows you to monitor each and every
file and request (XHR or HTTP). It generates a colorful graph
accordingly on the basis of cycle of a request. Following image
is an example of a request:

Color Description THE cd() METHOD
Green Time for DNS Lookup
By default all the expressions and functions that you execute
Light Green Time to connect to the server in the command line are relative to the top level window of
Light Brown Time for which the request had to wait in the queue the page. For example, you cannot invoke any function from
Firebug’s command line if that function is defined in an iFrame
Purple Time waiting for a response from the server
within a page. Firebug provides a solution for such situation.
Dark Grey Request was sent to server, request served by the server The cd() method allows you to change the context of the
and not from browser cache window from main window to the iFrame.
Light Grey Request was sent to the server, “304 Not Modified” On the Firebug command use the following syntax against a
received from server, response loaded from the browser page that has an iFrame
cache
Syntax:
TRACKING XmlHttpRequest cd(window.frames[0]);

// you can also use the $, $$ or $x selectors for selecting
the iFrame elements.
Enabling “Show XMLHttpRequests” option on the Console
tab, it acts like an AJAX spy.
Hot When the context changes then you will be notified by
Tip FireBug.
KEYBOARD AND MOUSE SHORTCUTS
Firebug provides a lot of keyboard and mouse shortcuts in

order to make working with Firebug easier and faster. As you
become more experienced with Firebug, you will find yourself
making more and more use of these shortcuts to accomplish
common tasks instead of opening Firebug panel and then
clicking on various tabs and buttons.
Global Shortcuts
Task / Operation Shortcut
Open Firebug Panel F12
Close Firebug Panel F12

Open Firebug in Window Ctrl+F12
Each XMLHttpRequest will be automatically logged to the
Switch to Previous Tab Ctrl+`
console, where we you can inspect its response as text, JSON,

4
Focus Command Line Ctrl+Shift+L DOM and Watch Editor Shortcuts

Focus Search Box Ctrl+Shift+K Task / Operation Shortcut
Toggle Inspect Mode Ctrl+Shift+C Finish Editing Double-Click on empty space
Toggle JavaScript Profiler Ctrl+Shift+P Cancel Editing Ctrl+.
Re-Execute Last Command Line Ctrl+Shift+E Autocomplete Next Property Ctrl+,

Autocomplete Previous Property Shift+Tab
HTML Tab Shortcuts
CSS Tab Shortcuts
Click on name or value
Edit Attribute
Edit Property Click on property
Edit Text Node Click on text
Insert New Property Double-Click on white-space
Edit Element Double-Click tag name
Focus Menu of Style Sheets Ctrl+Space
Next Node in Path Ctrl+.
Previous Node in Path Ctrl+, CSS Editor Tab Shortcuts
HTML Editor Shortcuts Task / Operation Shortcut
Task / Operation Shortcut Finish Editing Return
Finish Editing Return Cancel Editing Esc
Cancel Editing Esc Advance to Next Field Tab

Advance to Previous Field Shift+Tab
Advance to Next Field Tab
Increase Number by One Up
Decrease Number by One Down
HTML Inspect Mode Shortcuts Increase Number by Ten Page Up
Task / Operation Shortcut Decrease Number by Ten Page Down
Cancel Inspection Esc Autocomplete Next Keyword Up

Autocomplete Previous Keyword Down
Inspect Parent Ctrl+Up
Inspect Child Ctrl+Down Layout Tab Shortcut
Toggle Inspection Ctl+Shift+C Task / Operation Shortcut
Edit Value Click on value
Script Tab Shortcuts
Task / Operation Shortcut Layout Editor Shortcuts
Continue F8OR Ctrl+/ Task / Operation Shortcut
Step Over F10 OR Ctrl+’ Finish Editing Return
Cancel Editing Esc
Step Into F11 OR Ctrl+;
Advance to Next Field Tab
Step Out Shift+F11 OR Ctrl+Shift+;
Toggle Breakpoint Click on line number
Increase Number by One Up
Disable Breakpoint Shift+Click on line number Decrease Number by One Down
Edit Breakpoint Condition Right-Click on line number Increase Number by Ten Page Up
Run to Line Middle-Click on line number OR Decrease Number by Ten Page Down
Ctrl+Click on line number
Command Line (small) Shortcuts
Next Function on Stack Ctrl+.
Previous Function on Stack Ctrl+,
Autocomplete Next Property Tab
Focus Menu of Scripts Ctrl+Space
Autocomplete Previous Property Shift+Tab
Focus Watch Editor Ctrl+Shift+N Execute Return
Inspect Result Shift+Return
DOM Tab Shortcuts
Open Result’s Context Menu Ctrl+Return
Edit Property Double-Click on empty space Command Line (large) Shortcut
Next Object in Path Ctrl+. Task / Operation Shortcut
Previous Object in Path Ctrl+, Execute Ctrl+Return

5
console.timeEnd(name) Stops a timer created by a call

CONSOLE API REFERENCE
to console.time(name) and
writes the time elapsed.
Task / Operation Purpose console.profile([title]) Turns on the JavaScript profiler.
console.log(object[, object, ...]) Writes a message to the The optional argument title
console. You may pass as many would contain the text to be
arguments as you’d like, and printed in the header of the
they will be joined together in a profile report.
space-delimited line. console.profileEnd() Turns off the JavaScript profiler
and prints its report.
console.debug(object[, object, ...]) Writes a message to the
console, including a hyperlink console.count([title]) Writes the number of times
to the line where it was called. that the line of code where
count was called was executed.
console.info(object[, object, ...]) Writes a message to the The optional argument title will
console with the visual “info” print a message in addition to
icon and color coding and a the number of the count.
hyperlink to the line where it
console.table() Allows output of tabular data
was called.
in console. E.g.
console.warn(object[, object, ...]) Writes a message to the var myTable = new Array(3);
console with the visual for (var i=0; i<3; i++)
“warning” icon and color myTable[i] = [i+1, i+2, i+3, i+4];
coding and a hyperlink to the console.table(table);
line where it was called.
console.error(object[, object, ...]) Writes a message to the
COMMAND API REFERENCE
console with the visual “error”
icon and color coding and a
hyperlink to the line where it Command Purpose
was called.
$(id) Returns a single element with the given id.
console.assert Tests that an expression is true.
(expression[, object, ...]) If not, it will write a message $$(selector) Returns an array of elements that match
to the console and throw an the given CSS selector.
exception.
$x(xpath) Returns an array of elements that match
console.dir(object) Prints an interactive listing of the given XPath expression.
all properties of the object.
dir(object) Prints an interactive listing of all properties
This looks identical to the view
of the object. This looks identical to the
that you would see in the
view that you would see in the DOM tab.
DOM tab.
dirxml(node) Prints the XML source tree of an HTML or
console.dirxml(node) Prints the XML source tree of XML element. This looks identical to the
an HTML or XML element. This view that you would see in the HTML tab.
looks identical to the view that You can click on any node to inspect it in
you would see in the HTML the HTML tab.
tab. You can click on any node
to inspect it in the HTML tab. cd(window) By default, command line expressions
are relative to the top-level window of
console.trace() Prints an interactive stack trace the page. cd() allows you to use the
of JavaScript execution at the window of a frame in the page instead.
point where it is called.
clear() Clears the console.
console.group(object[, object, ...]) Writes a message to the
console and opens a nested inspect Inspects an object in the most suitable
block to indent all future (object[, tabName]) tab, or the tab identified by the optional
messages sent to the console. argument tabName.
Call console.groupEnd() to The available tab names are “html”,
close the block. “css”, “script”, and “dom”.
console.groupCollapsed Like console.group(), but the keys(object) Returns an array containing the names
(object[, object, ...]) block is initially collapsed. of all properties of the object.
console.groupEnd() Closes the most recently values(object) Returns an array containing the values
opened block created by a call of all properties of the object.
to console.group() or console. debug(fn) Adds a breakpoint on the first line of a
groupEnd() function.
console.time(name) Creates a new timer under undebug(fn) Removes the breakpoint on the first line
the given name. Call console. of a function.
timeEnd(name) with the same
name to stop the timer and monitor(fn) Turns on logging for all calls to a function.
print the time elapsed. unmonitor(fn) Turns off logging for all calls to a function.

6
monitorEvents Turns on logging for all events

STRING FORMATTING
(object[, types]) dispatched to an object. The optional
argument types may specify a specific
family of events to log. The most All of the console logging functions can format a string with
commonly used values for types are any of the following patterns:
“mouse” and “key”.
The full list of available types includes Symbol Type/Purpose
“composition”, “contextmenu”,
%s Formats the object as a string
“drag”, “focus”, “form”, “key”, “load”,
“mouse”, “mutation”, “paint”, “scroll”, %d, %i, %l, %f Formats the object as a number
“text”, “ui”, and “xul”. %o Formats the object as a hyperlink to the inspector
%1.o, %2.0, etc.. Formats the object as an interactive table of its
properties
unmonitorEvents Turns off logging for all events
(object[, types]) dispatched to an object. %.o Formats the object as an array of its property
names
profile([title]) Turns on the JavaScript profiler. The
optional argument title would contain %x Formats the object as an interactive XML
the text to be printed in the header of markup tree
the profile report. %1.x, %2.x, etc.. Formats the object as an interactive XML
markup tree with n levels expanded
profileEnd() Turns off the JavaScript profiler and
*If you need to include a real % symbol, you can escape it with
prints its report.
a backslash like so: “\%”.
ABOUT THE AUTHOR RECOMMENDED BOOKS

Chandan Luthra is a Software Development Engineer with With the advent of RIA (Rich Internet Applications), most
IntelliGrape Software, New Delhi, India-a company specializing web pages are driven by a combination of JavaScript, AJAX,
in Groovy/Grails development. He is an agile and pragmatic CSS, and so on. Web developers and designers find it hard
programmer and an active participant at local open source to debug and fix the issues that crop up on the client side.
software events, where he evangelizes Groovy, Grails, Firebug is a wonderful toolkit to have in your arsenal for
Jquery, and Firebug. Chandan is a Linux and open source handling all such issues. This book covers all of Firebug’s
enthusiast. He also involves himself in writing blogs and is an features and will help you utilize its capabilities with
active member on various tech-related mailing lists. He has maximum efficiency. AJAX development and debugging is
developed web applications for various industries, including entertainment, not one of the easiest tasks; this book explains step-by-step,
finance, media and publishing, as well as others. how to develop and debug AJAX components in your web page in a very easy
way, thereby increasing your productivity. Topics like performance tuning of the
Deepak Mittal is a software developer based in New Delhi, web page are covered in detail.
India, and he has been involved with software engineering
and web programming in Java/JEE world since the late
1990s. Deepak is a Linux and open source enthusiast. He is
BUY NOW
an agile practitioner and speaks about open source, agile books.dzon.com/books/firebug
processes, and free software at various user group meetings
and conferences. He has designed and built web applications
for industries including pharmaceutical, travel, media, and
publishing, as well as others. He loves to explore new technologies and has
been an early-adopter of quite a few mainstream technologies of today’s world.
#82
Browse our collection of 100 Free Cheat Sheets

Get More Refcardz! Visit refcardz.com
CONTENTS INCLUDE:
■
■
About Cloud Computing
Usage Scenarios Getting Started with
Aldon Cloud#64Computing
■
Underlying Concepts
Cost
by...
■
Upcoming Refcardz
youTechnologies ®
■
Data
t toTier
brough Comply.
borate.
Platform Management and more...
■
Chan
ge. Colla By Daniel Rubio
tion:
dz. com
also minimizes the need to make design changes to support

CON
tegra ternvasll
ABOUT CLOUD COMPUTING one time events. TEN TS
INC ■
HTML LUD E:
us Ind Anti-PPaat
Basics
Automated growthHTM
ref car
Web applications have always been deployed on servers & scalable

L vs XHT technologies
nuorn
■
Valid
ation one time events, cloud ML
connected to what is now deemed the ‘cloud’. Having the capability to support
Apache Ant
Usef
Du
ti
■
ul M.
computing platforms alsoulfacilitate
#84
Open the gradual growth curves
n an
Page Source
o
■
s
Vis it
However, the demands and technology used on such servers Structure
C
faced by web applications. Tools
Core
By Key ■
Elem
Patte
has changed substantially in recent years, especially with Structur
E: al Elem ents
INC LUD gration the entrance of service providers like Amazon, Google and Large scale growth scenarios involvingents
specialized
NTS and mor equipment
rdz !
ous Inte Change
HTML
CO NTE Microsoft. es e... away by
(e.g. load balancers and clusters) are all but abstracted
Continu at Every e chang
m
About ns to isolat
relying on a cloud computing platform’s technology.
Software i-patter
space
Hadoop
rdz .co
■
n
Re fca
e Work
Build
riptio
and Ant
Desc
These companies have a Privat
are in long deployed
trol repos
itory
webmana applications
ge HTM
L BAS
■
Patterns Control lop softw n-con to

■
that adapt and scale
Deve
les toto large user
a versio ing and making them
bases, In addition, several cloud computing ICSplatforms support data
ment ize merg
rn
Version e... Patte it all fi minim le HTM
Manage s and mor e Work knowledgeable in amany ine to
mainl aspects related tos multip
cloud computing. tier technologies that Lexceed the precedent set by Relational
space Comm and XHT
■
ref ca
Build
re
Privat lop on that utilize HTML MLReduce,

Practice Database Systems (RDBMS): is usedMap are web service APIs,
■
Deve code lines a system
d as thescalethe By An
sitory of work prog foundati
Ge t Mo
Buil Repo
This Refcard active
will introduce are within
to you to cloud riente computing, with an
d units
RATION etc. Some platforms ram support large grapRDBMS deployments.
■
The src
dy Ha
softw
e ine loping and Java s written in hical on of
INTEG attribute
task-o it all
softwar emphasis onDeve es by
Mainl these
ines providers, so youComm can better understand
also rece JavaScri user interfac web develop and the rris
Vis it
Spring Security
codel chang desc
INUOU ding Task Level as the
e code
w ww.dzone.com
NT of buil trol what it is a cloudnize

line Policy sourc es as aplatform
computing can offer your ut web output ive data pt. Server-s e in clien ment. the ima alt attribute ribes whe
T CO cess ion con Code Orga it chang e witho likew mec ide lang t-side ge is describe re the ima
ABOU the pro ject’s vers applications. and subm with uniqu
e name
are from
sourc CLOUD COMPUTING ise hanism. fromAND
PLATFORMS web unavaila
was onc use HTML The eme pages and uages like ge file
it
(CI) is Nested s alte
rd z!
a pro evel Comm the build softw um ble. rnate can be

gration ed to Task-L Label ies to
build minim UNDERLYING CONCEPTS e and XHT rging use HTM PHP tags text that
blem activit the bare standard a very loos Tags found,
ous Inte committ to a pro USAGE SCENARIOS ate all
Autom configurat
ion cies to t
ization, ely-defi
ML as
thei
Ajax
tech L can is disp
Continu ry change cannot be (and freq
nden ymen layed
solution fective ned lang r visual eng nologies
Re fca
Label
Build
manu
al
d tool
depe deplo t need but as if
eve , a ) stalle the same nmen for stan overlap uen
(i.e. , inef Build t, use target enviro Amazon EC2: Industry standard it has
software and uagvirtualization ine. HTM , so <a>< tly are) nest
with terns problem ce pre-in whether dards
ated b></
ory. ns (i.e. Autom Redu ymen
has bec become e with a> is
via pat ticular d deploEAR) in each very little L
Subversion
reposit -patter s that Pay only cieswhat you consume
tagge or Amazon’s cloud
the curr you cho platform
computing isome
heavily based moron fine. b></ ed insid
lained ) and anti the par solution duce nden For each (e.g. WAR es t
ent stan ose to writ more e imp a></ e
not lega each othe
x” b> is
be exp text to “fi are al Depeapplication deployment
Web ge until t a
librarifew years agonmen
t enviro was similar that will softwaredard
industry standard and virtualization app
e HTM technology.
orta nt,
tterns to pro Minim packa nden
Mo re
CI can ticular con used can rity all depe all targe
s will L or XHT arent. Reg the HTM l, but r. Tags
etimes Anti-pa they
tend
es, but to most phone services:
y Integ alizeplans with le that
late fialloted resources, ts with an and XHT simplify all help ML, und ardless
L VS
XHTM <a><
in a par hes som
Centr
end,
Binar
pro cess. the practic enti ng incurred costgeme
nt
whether e a single
such
temp
resources on
were consumed
t enviro
nmen
orthenot. Virtualization MLaare your
othe
you prov
erst of L
b></
in muchallows physical piece of hardware to
ide be HTM
rily bad
Mana based
approac ed with the cial, but, implem anding
Creat targe es to actually r web
nden
cy rties are nt
of the a solid L has
into differe coding.resources
necessa pared to
chang
efi Depe prope itting utilized by multiple operating
function systems.simplerThis allows foundati job adm been arou
associat to be ben
er
Ge t
te builds commo
are not Fortuna
late Verifi e comm than on
n com Cloud computing asRun it’sremo
known etoday has changed this.
befor alitytohas irably, nd for
They they
etc.
Temp Build (e.g. bandwidth, n memory, CPU) be allocated exclusively to tely exp that som
lts whe
ually,
appear effects. Privat y, contin Every elem mov used
to be, HTML
ecte job e time
ed resu The various resourcesPerfo rm a
consumed by webperio applications
dicall (e.g. nt team
pag
individual operating entsinstances. ed to CSS
system Brow d. Earl
y HTM has expand . Whi
gration
opme because
adverse unintend d Builds sitory Build r to devel common e (HTML . ser ed far le it has don
ous Inte web dev manufacture L had very
Stage Repo
e bandwidth, memory, CPU) areIntegtallied
ration on a per-unit CI serve basis or XHT
produc tinu e Build rm an from
extensio .) All are more e its
e.com
ard ML shar limit

tern.
ack elopers rs add than
Con Refc Privat
from zero) by Perfo
(starting all majorated cloud ed man ed layout
feedb computing platforms. As a user of Amazon’s esse
term e, this
on
n. HTM EC2 cloud
ntiallycomputing es certplatform, you are result anybody
the pat
occur came
gration as based is
of the ” cycl such Build Send
autom as they builds proc
assigned esso
an operating L system
files shouin the plai
same wayain elem
as on allents
hosting The late a lack of stan up with clev y competi
supp
ous Inte tional use and test concepts
soon n text ort.
ration ors as ion with r
tinu
Integ entat
ld not in st web dar er wor ng stan
ven “build include
docum
Con be cr kar dar
the con s to the standar
oper
to rate devel
While efer of CI Gene
notion
DZone, Inc.
Cloud Computing
the
s on
expand
ISBN-13: 978-1-934238-75-2
140 Preston Executive Dr. ISBN-10: 1-934238-75-9
Suite 100
50795
Cary, NC 27513
DZone communities deliver over 6 million pages each month to 888.678.0399

919.678.0300
more than 3.3 million software developers, architects and decision
Refcardz Feedback Welcome
$7.95
makers. DZone offers something for everyone, including news,

refcardz@dzone.com
tutorials, cheatsheets, blogs, feature articles, source code and more. 9 781934 238752
Sponsorship Opportunities
“DZone is a developer’s dream,” says PC Magazine.
sales@dzone.com
Copyright © 2010 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, Version 1.0
photocopying, or otherwise, without prior written permission of the publisher.

Rc108 010d Firebug

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rc108 010d Firebug

Uploaded by

Copyright:

Available Formats

#108 Get More Refcardz! Visit refcardz.

Hot which has been sent to the browser by the server.

Firebug Version Browser Version

To use Firebug Lite on non Firefox browsers, visit

INSPECTING PAGE ELEMENTS

• Click on the “inspect” button to get into the

DZone, Inc. | www.dzone.com

Now, under the Firebug’s “Script” tab, move your mouse

Hot Apart from JS auto code-completion, Firebug provides an

DZone, Inc. | www.dzone.com

You can see the headers, Response, JSON, Response/Request

Firebug also allows monitoring web pages of your application.

TRACKING XmlHttpRequest cd(window.frames[0]);

KEYBOARD AND MOUSE SHORTCUTS

Firebug provides a lot of keyboard and mouse shortcuts in

DZone, Inc. | www.dzone.com

Focus Command Line Ctrl+Shift+L DOM and Watch Editor Shortcuts

Toggle JavaScript Profiler Ctrl+Shift+P Cancel Editing Ctrl+.

Re-Execute Last Command Line Ctrl+Shift+E Autocomplete Next Property Ctrl+,

Finish Editing Return Cancel Editing Esc

Cancel Editing Esc Advance to Next Field Tab

Task / Operation Shortcut Decrease Number by Ten Page Down

Cancel Inspection Esc Autocomplete Next Keyword Up

DZone, Inc. | www.dzone.com

console.timeEnd(name) Stops a timer created by a call

DZone, Inc. | www.dzone.com

monitorEvents Turns on logging for all events

ABOUT THE AUTHOR RECOMMENDED BOOKS

Browse our collection of 100 Free Cheat Sheets

also minimizes the need to make design changes to support

Web applications have always been deployed on servers & scalable

However, the demands and technology used on such servers Structure

ous Inte Change

Patterns Control lop softw n-con to

Privat lop on that utilize HTML MLReduce,

NT of buil trol what it is a cloudnize

a pro evel Comm the build softw um ble. rnate can be

ard ML shar limit

DZone communities deliver over 6 million pages each month to 888.678.0399

makers. DZone offers something for everyone, including news,

You might also like