Почему не работает слушатель событий на элементах?

Question

[pogromist]

Я заметил что на сайте duolingo все компоненты какие-то странные.
Если зайти на их сайт не авторизованным, вы увидите поля ввода email и пароль, на них можно провести пример.

Открыв консоль повесим (любое) событие клик на инпут емейла.

document.querySelector(`[data-test="email-input"]`).addEventListener('click', (e)=>{console.log(e);} );

А теперь если покликать по нему, ничего не срабатывает.
Я пробовал и другие события:

document.querySelector(`[data-test="email-input"]`).addEventListener('change', (e)=>{console.log(e);} );
document.querySelector(`[data-test="email-input"]`).addEventListener('input', (e)=>{console.log(e);} );

но ничего не работает.
Насколько я знаю сайт написан на React.

Вопрос: Почему слушатели не срабатывают, и как заставить их работать?

Comments

[Модератор]

Не надо лепить как можно больше тэгов.
См.п.3.1 Регламента.

[pogromist]

Модератор, и какой тег был лишним?

[Алан Гибизов]

pogromist, элементарно - более общий тэг - лишний.

Answer 1

[maksam07]

console.log не отрабатывает. Замени на alert, к примеру. Почему такое поведение - не знаю.

Answer 2

[Aetae]

console.log.toString()
Сайт подменяет консоль.

Если используешь юзерскрипты, то можешь забрать консоль до того как её подменят:

// @run-at document-start
const myConsole = window.console;

Если нет, но очень надо - можешь создать фрейм и забрать консоль оттуда.)