Need to find a better way to log the essentials of a browser side HTML element using JavaScript object
Posted by jpluimers on 2023/12/04
The basic options for logging an HTML Element using JavaScript are for instance described in [Wayback/Archive] google chrome – How can I log an HTML element as a JavaScript object? – Stack Overflow (thanks [Wayback/Archive] Ben Flynn for asking and [Wayback/Archive] Mathias Bynens for answering)):
Useconsole.dir:var element = document.documentElement; // or any other element console.log(element); // logs the expandable <html>…</html> console.dir(element); // logs the element’s properties and values
Both log all html or all properties even though often these are enough (most via [Wayback/Archive] Element – Web APIs | MDN):
- [Wayback/Archive] Element.
tagName– Web APIs | MDN - [Wayback/Archive] Element.
id– Web APIs | MDN - [Wayback/Archive] Element.
className– Web APIs | MDN name(if there is any, for instance [Wayback/Archive] HTMLFormElement.name– Web APIs | MDN)value(if there is any, for instance [Wayback/Archive] HTMLInputElement.value– Web APIs | MDN)
Hopefully my post the day before yesterday about Destructuring assignment – JavaScript | MDN will help me figure out something to do this better.
It will be helpful when logging elements for instance after they are clicked on (see yesterday’s post javascript – Chrome debugging – break on next click event – Stack Overflow).
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment