Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 507
dbrin Avatar asked Mar 16 '12 04:03

dbrin


People also ask

What is Dom Developer Tools?

DOM Inspector (DOMi) is a web developer tool created by Joe Hewitt and was originally included in Mozilla Application Suite as well as versions of Mozilla Firefox prior to Firefox 3. It is now included in Firefox, and SeaMonkey.

What is XHR Chrome dev tools?

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.

How do I open console in dev tools Chrome?

To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).


2 Answers

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.

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

like image 53
Derek 朕會功夫 Avatar answered Sep 29 '22 22:09

Derek 朕會功夫


Yes, it's called "Properties".

enter image description here

like image 34
Alex Ivasyuv Avatar answered Sep 29 '22 21:09

Alex Ivasyuv