What is the equivalent to Firebug DOM tab in Chrome Dev tools?

Question

I am used to using DOM tab to inspect global JS variables that are present on the page in Firebug. What is the equivalent of it in Chrome Developer tools?

Answer 1

Type in window, then you will see the window object with everything inside it.

p.s: window is the "top-most" object in a normal webpage. (Global scope) Since "Chrome Developer Tools" is specifically mentioned, we can safely assume that window will always be the global scope.

Press Console, then enter window. Press enter and now you can see a list of global variables, such as $ (jQuery) and document.

Answer 2

Yes, it's called "Properties".

Answer 3

You might be looking for the Scripts tab in Chrome dev tools.

Also, if you click on the Console tab you can actually type in window.. You will see a large list of items that are all accessible from the "window" (generally global) scope.

After you find the object or variable you are looking for in the list, you can press Enter and Chrome will output the relevant information for your entry.

Answer 4

By setting a breakpoint in first line of your script in Script tab you will see all the global variables in Scope Variables section in right sidebar. Chrome dev tool will not show variables without a breakpoint but you still can access those from console.

Answer 5

Execute the following in the Chrome console:

for(variable in window) { if(window.hasOwnProperty(variable)) { console.log(variable); } }