Is it possible to print out something in the browser debug console, so that when clicked on, will invoke a function?

Question

While debugging, I might have an element el, and I can print it out using console.log(el).

There can be 50 or even 100 of them, while debugging. Can I print out something in the debug console in Google Chrome, so that when I click on it, will make the element come into focus in the webpage?

I tried:

    let tmpLink = document.createElement("a");
    tmpLink.href = "#";   // now it is a link instead of anchor
    tmpLink.innerHTML = "Click Me";
    tmpLink.addEventListener("click", function() {
      el.focus();
    });
    console.log(tmpLink);

and the link is printed out in the debug console, except when I click on it, doesn't bring me to the element on page. Is there a way to do it?

One less desirable way is to do

window.focusArr = window.focusArr || [];
window.focusArr.push(el);
console.log(`Element ${window.focusArr.length - 1}`);

so I can just do in the console:

focusArr[21].focus()

But is there a way to make clicking on something work in the debug console?

Answer 1

This isn't exactly what you're asking, but it may achieve the functionality you're looking for while debugging. In Chrome, if you log the actual element that you'd want to focus on, you can log an exact reference to the element, and then right click on it in the console and select "Scroll into view":

(For your code, you'd have to do console.log(el) so that the el that you're interested in can be right-clicked on and zoomed to)

Answer 2

Just log the element itself.

let e = document.getElementById('main');
console.log(e)

<div id="main">
Hello
</div>

You can then right click on the element in the log message and choose "Scroll into view"