How to determine the active HTML Element in Google Chrome

Active HTML Element : When the user clicks on a control such as Button, label or Textbox, then then focus is set on this control. For example, if the user has clicked on a button. Then the active HTML Element is the Button.

The active HTML Element can be determined by typing the command document.activeElement in the console after selecting the control of interest. Please see below image as an example.

How to jump in to the code in JavaScript sources from console

Let us see how to jump into the code in JavaScript sources from console by following the steps below

  1. Get the control instance in the console window ==> var control_instance = $($0)
  2. call the method name of the instance without the paranthesis. ==> control_instance.method
  3. It will print out the lines of code from the method ‘method’ of control_instance class.
  4. now double click on those lines of code. It will take us to the corresponding javascript file/code in the Sources tab of chrome developer ( Please see below picture )