views:

487

answers:

4

I'm confused with these colors. I noticed there are 4 colors showing in the left hand column of FireBug DOM tree:

  1. Bold black
  2. Black
  3. Bold green
  4. Green

In the right hand column:

  1. Blue
  2. Red
  3. Bold green
  4. Green
  5. Multiple color elements representing object structures.

What do this colors represent? And why, e.g, I can access window.document.URL and I can't access window.document.body in Console even though they are both in the "not-bold black" category in the DOM tree?

Thanks a lot

+2  A: 

From http://getfirebug.com/dom.html

Objects are color coded so that HTML elements, numbers, strings, functions, arrays, objects, and nulls are all easy to distinguish.

But I can't be bothered to lookup which color represents what. With this info I bet you can make that out yourself

jitter
Thanks but this link as the first I saw on google when I searched.
Ciwee
+1  A: 

After digging into it a little further I got the answer:

In the left column:

Black are properties and green are methods. Bold means the member was declared "by the user" meaning the members aren't from the default javascript/DOM framework.

In the right column:

Numbers are blue, strings are red. Objects appear as a "instance preview" in which the type name and the member names are green and the member values are gray

Ciwee
A: 

But I can see some properties ib bold black "get textLength". Why is there a space in between?

Mohit Kumar
A: 

Here is the correct answer.

Bold Black                  Objects
Black                        DOM objects
get in gray                    "Getter" functions
Bold green                  User functions
Green                        DOM functions
Bold Red                      Constructor functions

check the link for more information

Lorenzo