Chrome Developer Tools, using inspection functions inside script tags.

Question

I've looked around on google and I cannot figure out to use for instance the dir() function within the web page I'm working on, I would like to have it spit out debug statements, as I'm used to doing with Firebug.

A clearer example

What I want is to do the following.

<script>
a=document.getElementById('gabber');
dir(a);
</script>

However doing this gets an undefined error.

Answer 1

The console can be found at:

• Instpect Element
• Click Scripts up top
• Very bottom left, click the Show Console button

Side note: console.log() functions will also appear here.

Answer 2

Did you try to use console.log(var)? It dumps object into javascript console (Ctrl+Shift+j) and you can explore the structure in comfortable way.

Answer 3

console.dir works for me:

console.dir(document.getElementById('foo')); 

You can see all the functions available on the console like this:

for (var n in console) {
  if (typeof console[n] == "function") {
    console.log(n);
  }
}

(I get the following on Chrome 5.0.322.2:)

debug
error
info
log
warn
dir
dirxml
trace
assert
count
markTimeline
time
timeEnd
group
groupEnd

Answer 4

"jQuerify" --- Perfect extension to embed jQuery into Chrome Console as simple as you can imagine. This extension also indocates if jQuery has been already embeded into page.

This extension used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by "Ctrl+Shift+j").

To embed jQuery into selected tab click on extention button.

LINK to extension: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc