Fui responder uma pergunta recentemente e utilizei um exemplo bem simples, apenas aplicando uma regra CSS ao primeiro `<div>` do snippet. Porém, notei que essa regra é aplicada também à que exibe as mensagens do `console.log()`:

Rode o snippet abaixo, clique no espaço que tem o ██ e pressione qualquer tecla do teclado.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    (function(){
      document.addEventListener('keypress', () => {
        console.log('Mensagem do console.');
      });
    })();

<!-- language: lang-css -->

    div { height: 60px; width: 60px; background: red }

<!-- language: lang-html -->

    <div></div>

<!-- end snippet -->

Esse elemento não deveria ter uma regra específica para impedir esse tipo de comportamento?