Display of JavaScript values and DOM items

From FirebugWiki
Jump to: navigation, search

Firebug has a special display for the different JavaScript variable types and DOM items. This representation tries to provide the most useful information around an item at a glance.

The different items are:

Type Display Explanation
undefined UndefinedType.png
null NullType.png
boolean BooleanType.png Either true or false is displayed.
integer, float IntegerType.png, FloatType.png
infinity InfinityValue.png Positive infinity values are indicated by the word 'Infinity', negative infinity '-Infinity' accordingly.
NaN NaNValue.png NaN (Not a Number) values occur when a `1 / 0`.
They are indicated by the word 'Infinity', negative infinity '-Infinity' accordingly.
string StringType.png Strings are shown enclosed in double quotes. If they are too long, they are cropped in the middle and the cropped part is replaced by an ellipsis. The displayed length can be controlled via the extensions.firebug.stringCropLength preference.
array ArrayType.png Some of the array's items plus 'more...' in case there are more items enclosed by square brackets. The number of displayed items can be controlled via the extensions.firebug.ObjectShortIteratorMax preference.
object ObjectType.png The type of the object is shown in case it can be determined, otherwise 'Object', followed by some of the object's items plus 'more...' in case there are more items enclosed by curly braces. The number of displayed items can be controlled via the extensions.firebug.ObjectShortIteratorMax preference.
function FunctionType.png Functions are displayed showing their header, i.e. the function parameter list enclosed by their function name if it can be determined or 'function()' otherwise.
array-like object ArrayLikeObject.png, NodeListObject.png Array-like objects are objects that can be interated, i.e. have indexes (e.g. NodeList, DOMTokenList, jQuery node lists returned by $(...), etc.).
The type of the object is shown in case it can be determined, otherwise 'Object',Some of the object's items plus 'more...' in case there are more items enclosed by square brackets. The number of displayed items can be controlled via the extensions.firebug.ObjectShortIteratorMax preference.
DOM node DOMNodeClasses.png, DOMNodeID.png
window DOMWindow.png Window objects are displayed with the prefix 'Window' followed by their related URL.
document DOMDocument.png Document objects are displayed with the prefix 'Document' followed by their related URL.
regular expression RegExpType.png The regular expression is shown including its flags.
application cache AppCacheObject.png A hint noting the number of held items in the cache is displayed.
storage StorageObject.png A hint noting the number of held items in the storage is displayed.
browser history HistoryObject.png A hint noting the number of browser history entries.
CSS rules CSSStyleRuleObject.png, CSSMediaRuleObject.png, CSSFontFaceRuleObject.png, CSSImportRuleObject.png, CSSKeyframesRuleObject.png, CSSSupportsRuleObject.png, CSSNameSpaceRuleObject.png For CSS rules the type is shown first followed by additional info related to the rule. E.g. for style rules the related selector is shown, for @media rules the related query, for @import rules the imported URL, etc.