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>​

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


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


Also See:


Notify of

Inline Feedbacks
View all comments