google-chromegoogle-chrome-devtoolscode-inspection

What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?


In Google Chrome's developer tools, when I select an element, I see ==$0 next to the selected element. What does that mean?

Screenshot


Solution

  • It's the last selected DOM node index. Chrome assigns an index to each DOM node you select. So $0 will always point to the last node you selected, while $1 will point to the node you selected before that. Think of it like a stack of most recently selected nodes.

    As an example, consider the following

    <div id="sunday"></div>
    <div id="monday"></div>
    <div id="tuesday"></div>
    

    Now you opened the devtools console and selected #sunday, #monday and #tuesday in the mentioned order, you will get ids like:

    $0 -> <div id="tuesday"></div> 
    $1 -> <div id="monday"></div>
    $2 -> <div id="sunday"></div>
    

    Note: It Might be useful to know that the node is selectable in your scripts (or console), for example one popular use for this is angular element selector, so you can simply pick your node, and run this:

    angular.element($0).scope()
    

    Voila you got access to node scope via console.