Always reveal html element in console.log (Chromium)

Question

I have a js script with a console.log that sometimes prints html elements.

Chrome has two modes of printing such DOM elements:

• In html style like <div class="abc">...</div>, where hovering highlights the element in the page, and click opens the DOM subtree.
• In object style like div.abc, where hovering does nothing, and click opens the object properties.

I always want the first format.

But for some reason, when printing a lot of these elements, Chrome randomly switches to the second format.

At first I thought this happens if there is not enough space, e.g. if we print other values in the same console.log call. But this seems not to be the case.

Any idea how I can always get the first format? Either a setting in Chrome/Chromium, or something I can do in my script.

EDIT

I will try to come up with a reproducible example. It will be difficult because this happened on a website with already a lot going on.

For now I will simply mention that by "a lot of these elements", I mean repeated calling of console.log(element) with different elements. The first 100 or so calls would give me the first representation, then it would switch to the other representation. But this was not at all consistent, and there was no specific event that would explain such a switch.

New data points since initial version of the question:

• console.dirxml(element) also switches to the JSON prepresentation (= second format), at the same time that console.log does.
• console.log(element, element instanceof HTMLElement) always prints [element], true, no matter whether the json or xml representation is used to print the element.

Answer 1

You cannot get always this format because that is unpredictable in the blink engine, and the source code is the proof, moreover there is a comment exactly for this case:

function printNode(nodeId)
{
    if (!nodeId) {
        // Sometimes DOM is loaded after the sync message is being formatted, so we get no
        // nodeId here. So we fall back to object formatting here.
        this._formatParameterAsObject(object, elem, false);
        return;
    }

Answer 2

for some reason, when printing a lot of these elements, Chrome randomly switches to the second format

Without a minimal, reproducible example demonstrating both cases, it's hard to provide a fully-satisfying answer, but according to the documentation, the following methods will print the XML representation of a node:

• console.dirxml(node)
• console.log(node)

While, in contrast, console.dir(node) will print a JSON representation of the node.

There is also a console utility function for navigating (programmatically focusing) a node/object: inspect(object/function).

---

If, by "printing a lot of these elements" you just mean an object collection like an Array or NodeList, then that's not a level of display control that Chromium's dev tools offers you. Instead, you should iterate each node and print it (or provide each node as an argument to console.log, for example:

const divArray = [...document.querySelectorAll('div')];
console.log(divArray); // JSON representation of an array (of div elements)
console.log(...divArray); // one XML representation for each div element

Answer 3

One way can be to log the HTML element as a string using the Element.outerHTML property, e.g.

const myDiv = document.querySelector('#myDiv');

console.log(myDiv.outerHTML); // <div id="myDiv"></div>

Or console logging only after the page has loaded, using the window.onload event handler property, e.g.

onload = (e) => console.log(myDiv);

...which I prefer since it prints the actual HTML element to the console, like:

<div id="myDiv"></div>