Можно ли распечатать что-нибудь в консоли отладки браузера, чтобы при нажатии вызывать функцию?

Question

Во время отладки у меня может быть элемент el, и я могу распечатать его, используя console.log(el).

. При отладке их может быть 50 или даже 100. Могу ли я распечатать что-нибудь в консоли отладки в Google Chrome, чтобы при нажатии на него элемент фокусировался на веб-странице?

Я пытался:

    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);

и ссылка распечатывается в консоли отладки, за исключением того, что когда я нажимаю на нее, я не перехожу к элементу на странице. Есть ли способ сделать это?

Один менее желательный способ сделать это

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

, поэтому я могу просто сделать в консоли:

focusArr[21].focus()

Но есть Есть ли способ заставить нажатия на что-то работать в консоли отладки?

Answer 1

Просто зарегистрируйте сам элемент.

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

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

Затем вы можете щелкнуть правой кнопкой мыши элемент в сообщении журнала и выбрать «Прокрутить в просмотр»

Answer 2

Это не в точности , о чем вы просите, но оно может достичь той функциональности, которую вы ищете во время отладки. В Chrome, если вы регистрируете фактический элемент, на котором вы хотите сфокусироваться, вы можете зарегистрировать точную ссылку на элемент, а затем щелкните правой кнопкой мыши по нему в консоли и выберите «Прокрутить в вид»:

(Для вашего кода вам нужно будет сделать console.log(el), чтобы на интересующем вас el можно было щелкнуть правой кнопкой мыши и увеличено до