O Chrome Developer Tools Console é provavelmente uma das ferramentas de navegador especializadas mais usadas e mais úteis. O console oferece ao programador muitos recursos interessantes. Ajuda na depuração, criação de perfil e monitoramento do código da página. O material que estamos traduzindo hoje é dedicado a falar sobre alguns dos recursos do console do Chrome que não são tão amplamente conhecidos quanto merecem.
Função de monitor
A função é monitorusada para organizar o monitoramento de outras funções. Em particular, permite descobrir quando uma determinada função foi chamada e com quais parâmetros ela foi chamada. Considere um exemplo (seu código é inserido no console do Chrome):function traceFunc (arg) { }
monitor(traceFunc)
A função é traceFuncpassada para a função monitorcomo um argumento. Agora, quando a função traceFuncfor chamada, receberemos uma notificação sobre isso (novamente, no console):traceFunc(90)
function traceFunc was called with arguments: 90
Usando a função de monitorFunção não monitorada
A função unmonitorpermite desativar o monitoramento de uma função que foi monitorada anteriormente usando a função monitor. Para parar de monitorar a função traceFunc, usamos a seguinte construção:unmonitor(traceFunc)
Se você ligar depois disso traceFunc, nenhuma notificação será exibida no console.traceFunc(90)
Chamar uma função cujo monitoramento está desativado não resulta na saída de informações sobre essa chamada para o consoleFunção MonitorEvents
O esquema para usar a função monitorEventsé semelhante a este:monitorEvents(object,[,events])
Essa função permite rastrear a ocorrência de eventos de objeto e exibe informações sobre esses eventos no console.Suponha que exista um botão na página descrita pelo seguinte código:<button id="button">Button</button>
Vamos começar a rastrear o evento clickdeste botão:monitorEvents(button, "click")
Se depois de iniciar a observação de um evento, clickclique no botão - as informações sobre o evento serão exibidas no console.Botão e comece a monitorar seus eventos, clique em Vocêpode monitorar vários eventos passandomonitorEventsuma matriz comofunções dosegundo argumento:monitorEvents(button, ["click", "mouseover"])
Agora sob observação estão os eventos clicke mouseover. Como resultado, o console recebe mensagens sobre o clique no botão e foi mantido sobre o mouse.Monitorando eventos dos botões de clicar e passar o mouseVocê pode organizar o monitoramento de grupos de eventos:monitorEvents(button, ["click", "mouse"])
Uma string mouseé um identificador universal para um grupo de eventos relacionados ao mouse. Por exemplo - mouseover, mousemove, mouseout. Como no caso de inscrição em eventos específicos, a inscrição em um identificador universal de eventos levará à emissão de notificações quando esses eventos ocorrerem.Monitorando eventos de botão relacionados a clicar nele e com o mouseObviamente, a função émonitorEventsaplicável a outros objetos, e não apenas aos botões. O mesmo se aplica aos eventos que podem ser assistidos com ele. Estes não são apenasclickeventos do mouse.Função UnmonitorEvents
A função unmonitorEventspermite cancelar o monitoramento de eventos de objetos iniciados pela função monitorEvents.Suponha que decidimos rastrear cliques no botão:monitorEvents(button, "click")
Como resultado, quando o botão é clicado, as informações sobre esses eventos chegam ao console. Para interromper o monitoramento, precisamos deste design:unmonitorEvents(button, "click")
Agora o sistema para de monitorar o evento do clickbotão.Depois de se recusar a monitorar eventos de clique, os relatórios sobre cliques em um botão deixam de chegar ao console$ _ Construção
O design $_permite acessar o resultado da última expressão executada no console.Suponha que inserimos uma expressão no console 2 + 2e a executemos. Isso nos deu 4.Em seguida, inserimos e executamos a expressão 3*2. Isso nos deu 6.Descobrimos que realizamos duas expressões, a mais recente delas 3*2. Se agora entrar no console $_e clicar em Enter- o resultado da expressão é exibido 3*2, ou seja - 6.Usando a construção $ _Função de cópia
A função copypermite copiar os dados transferidos para a área de transferência.Vamos executar, por exemplo, o seguinte comando:copy("nnamdi")
Isso copiará a linha para a área de transferência nnamdi. Para verificar isso, execute o comando acima no console e tente colar o que está na área de transferência na barra de endereços do navegador. Você deve obter algo parecido com a imagem a seguir.Software que copia dados para a área de transferênciaFunção clara
A função clearpermite limpar o histórico de execução de comandos no console. Essa função é útil nos casos em que o console está cheio de vários materiais exibidos nele e você deseja remover dele tudo o que é exibido nele.Teclas de função
A função keys(object), como o método Object.keys, retorna uma matriz de chaves de propriedade do objeto:const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)
Usando a função de teclasFunção de valores
A função valuesé semelhante a um método Object.values. Retorna uma matriz de valores de propriedade do objeto.const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)
Usando a função de valoresFunção GetEventListeners
A função getEventListenersretorna informações sobre eventos registrados para o objeto. Por exemplo, se você registrar determinados eventos para um botão, a função getEventListenerspassada para esse botão retornará um objeto que contém, na forma de matrizes, uma descrição dos eventos do botão.Suponha que a página tenha este código:<button id="button"
onclick="clickHandler()"
onmousedown="mousedownHandler()"
onmouseover="mouseoverHandler()">
Button
</button>
<script>
function clickHandler() {
}
function mousedownHandler() {
}
function mouseoverHandler() {
}
</script>
Este código descreve o botão e três eventos: click, onmousedown, e onmouseover. Eventos são atribuídos manipuladores clickHandler, mousedownHandlere mouseoverHandler.Chame o seguinte comando no console:getEventListeners(button)
Para obter informações sobre o botão manipuladores de eventosUm objeto, emitido após o comandogetEventListeners(button), propriedades disponíveisclick,mousedownemouseovercujos nomes correspondem aos nomes de manipuladores de eventos que atribuem um botão. Propriedades contêm matrizes de objetos que contêm informações detalhadas sobre eventos.Função $
A função $retorna o primeiro dos elementos DOM que correspondem ao seletor passado para ele. O diagrama da chamada de função é semelhante a este:$(elementName, [,node])
Suponha que a página tenha o seguinte código:<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
Este código descreve quatro botões.Vamos executar o seguinte comando:$("button")
A seguir, mostra o que entra no console após sua execução.O resultado docomando $ ("button")Button1 .Como você pode ver, o comando retornou um botão. Este botão é o primeiro elementobuttondo documento. Depois de termos à disposição um nó DOM de um elemento, podemos nos referir a suas propriedades e métodos.Por exemplo, para descobrir o identificador de um botão, você pode usar esta construção:$("button").id
Esclarecimento do identificador do botãoUsando a função$, você pode especificar o nó DOM, o primeiro elemento do qual estamos interessados.Suponha botõesButton2,Button3eButton4a partir do exemplo anterior são colocadas num elemento<div>:<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
Para selecionar o primeiro botão daqueles que estão aninhados <div>, você pode usar o seguinte comando:$("button", document.querySelector("div"))
Acessando um elemento aninhado em outro elementoComo você pode ver, agora ele$retorna um botãoButton2, pois esse é o primeiro elementobuttonaninhado no elemento<div>Função $$
A função $$funciona da mesma forma que a função acima $. Mas ele retorna todos os elementos correspondentes. É chamado assim:$$(element, [,node])
Suponha que haja quatro botões em uma página, como nos exemplos anteriores.Chame o seguinte comando:$$("button")
Usando a função $$Após a chamada$$, como visto na figura anterior, temos à disposição uma matriz de elementosbutton.Os elementos também podem ser selecionados daquele especificado quando$$o nó DOM échamado. Por exemplo, se uma página possui vários botões<div>, podemos, para selecionar todos esses botões, usar este design:$$("button", document.querySelector("div"))
Usando a função $$ para selecionar itens aninhados em outro itemSumário
O console do Chrome é uma ferramenta útil. À medida que novas versões do Chrome se tornam disponíveis, os recursos do console se expandem. Portanto, é útil procurar periodicamente aqui em busca de algo novo e interessante.Queridos leitores! Quais ferramentas de console do Chrome você usa com mais frequência?