How to get selected html element
When I develop angular applications I often need to know which scope is bound to the element in debug console.
We have the document with following structure.
<html> <body> <div id="result"></div> </body> </html>
I open the developer console in google chrome browser and write this command.
This solution has disadvantage if you want to know scope for element which is deep nested and without attributes class and id. The selector for choosing right element can be very complex and complicated.
I show you simpler solution.
1. Open the developer console
2. Select the element
3. write command
You don´t have to use complicated selector anymore. What exactly does command $0 mean? This command is provided to console by Chrome Command line API. This command returns us the the most recent selected element. You can use $0 (the most recently selected element) – $4 (the fifth recently selected element). This functionality is not related to angular but you can use it in every html page.
Do you want to hear a secret? The $0 command is not dependent only on Chrome, but this functionality is supported by most commonly used browsers.
The command line API has many useful functions. This functions are documented at page https://developer.chrome.com/devtools/docs/commandline-api and I recommend you to read it.