How to do console.log() of an HTML element to know properties and events

This tutorial guides you on how to do console.log() of an HTML element to see which properties and events it offers.

In case of Angular projects when you work on property and event bindings you may wanted to know which Properties or Events of HTML elements you may bind. Let’s see how to use chrome developer tools to do this.

Console.log() HTML element

Let’s say you have a button called “Add” in the Angular page (HTML template).

<p>Add Demo </p>
<button id="add" class="btn btn-primary">Add</button>

To know or list properties or events of this HTML element (add button), first you need to get element using getElementById().

> var addButton = document.getElementById('add');
<. undefined

console.log(element) will log HTML section like below

> console.log(addButton)
  <button _ngcontent-qvo-c12 id=​"add" class=​"btn btn-primary">​Add​</button>​
<.undefined

console.dir(element) will log HTML element’s properties and values

> console.dir(addButton)
  
   - button#add.btn.btn-primary
      accessKey: ""
      ariaAtomic: null
      -------
      ------- 
      disabled: false     //Properties
      draggable: false
      elementTiming: ""
      -------
      ------- 
      onchange: (...)     //Events
      onclick: (...)
      onclose: (...)
      --------
      --------
      --------
<. undefined

If you are inside console already, you can leave ‘console.’ and simply type log instead of console.log

log(addButton)

Similarly, you can simply type dir instead of console.dir

dir(addButton)

Also See:

References

Leave a Reply

avatar
  Subscribe  
Notify of