Referência da API Console Utilitários

Kayce Basques
Kayce Basques
X GitHub Falha
Sofia Emelianova
Sofia Emelianova
GitHub

A API Console Utilities contém um conjunto de funções convenientes para realizar tarefas comuns: selecionar e inspecionar elementos de DOM, consultar objetos, exibir dados em formato legível, parar e iniciar o criador de perfil, monitorar eventos de DOM e chamadas de função e muito mais.

Procurando console.log(), console.error() e o restante das funções console.*? Consulte a referência da API Console.

$_

$_ retorna o valor da última expressão avaliada.

No exemplo abaixo, uma expressão simples (2 + 2) é avaliada. A propriedade $_ é então avaliada, contendo o mesmo valor:

$_ é a última expressão avaliada.

No próximo exemplo, a expressão avaliada inicialmente contém uma matriz de nomes. Ao avaliar $_.length para encontrar o comprimento da matriz, o valor armazenado em $_ muda para se tornar a expressão avaliada mais recente, 4:

$_ muda quando novos comandos são avaliados.

US$ 0 a US$ 4

Os comandos $0, $1, $2, $3 e $4 funcionam como uma referência histórica para os cinco últimos elementos DOM inspecionados no painel Elements ou os cinco últimos objetos de pilha JavaScript selecionados no painel Profiles. $0 retorna o elemento ou objeto JavaScript selecionado mais recentemente, $1 retorna o segundo mais recente e assim por diante.

No exemplo abaixo, um elemento img é selecionado no painel Elements. Na gaveta Console, $0 foi avaliado e exibe o mesmo elemento:

Exemplo de US $0.

A imagem abaixo mostra um elemento diferente selecionado na mesma página. O $0 agora se refere ao elemento recém selecionado, enquanto $1 retorna o anteriormente selecionado:

Exemplo de $1.

$(selector [, startNode])

$(selector) retorna a referência ao primeiro elemento DOM com o seletor de CSS especificado. Quando chamada com um argumento, essa função é um atalho para a função document.querySelector().

O exemplo a seguir retorna uma referência ao primeiro elemento <img> no documento:

Exemplo de $(&#39;img&#39;).

Clique com o botão direito do mouse no resultado retornado e selecione Reveal in Elements Panel para encontrá-lo no DOM ou Scroll in to View para mostrar na página.

O exemplo a seguir retorna uma referência ao elemento selecionado e exibe a propriedade src:

Exemplo de $(&#39;img&#39;).src.

Essa função também aceita um segundo parâmetro, startNode, que especifica um "elemento" ou nó para pesquisar elementos. O valor padrão desse parâmetro é document.

O exemplo a seguir retorna uma referência ao primeiro elemento img que é um descendente de devsite-header-background e mostra a propriedade src dele:

Exemplo de $(&#39;img&#39;, div).src.

$$(selector [, startNode])

$$(seletor) retorna uma matriz de elementos que correspondem ao seletor de CSS especificado. Esse comando é equivalente a chamar Array.from(document.querySelectorAll()).

O exemplo a seguir usa $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
.

Elementos Exemplo de uso de<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> para criar uma matriz de todos os <code translate=<img>
que aparecem no documento atual após o nó selecionado:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



Exemplo de uso de $() para selecionar todas as imagens que aparecem após o elemento div de seleção no documento e mostrar as fontes delas.





$x(path [, startNode])



$x(path) retorna uma matriz de elementos DOM que correspondem à expressão XPath especificada.



Por exemplo, o exemplo a seguir retorna todos os elementos <p> na página:


$x("//p")



Exemplo de uso de um seletor XPath.



O exemplo a seguir retorna todos os elementos <p> que contêm elementos <a>:


$x("//p[a]")



Exemplo de uso de um seletor XPath mais complicado.



Assim como as outras funções de seletor, $x(path) tem um segundo parâmetro opcional, startNode,
que especifica um elemento ou nó para pesquisar elementos.



Exemplo de uso de um seletor XPath com startNode.



clear()



clear() limpa o console do histórico.


clear();



copy(object)



copy(object) copia uma representação de string do objeto especificado para a área de transferência.


copy($0);



debug(function)



Quando a função especificada é chamada, o depurador é invocado e interrompe dentro da função no painel
Sources, permitindo percorrer o código e depurar.


debug(getData);



Como interromper dentro de uma função com debug().



Use undebug(fn) para interromper a interrupção na função ou use a interface para desativar todos os pontos de interrupção.



Para mais informações sobre pontos de interrupção, consulte Pausar seu código com pontos de interrupção.



dir(object)



dir(object) exibe uma lista de estilo de objeto de todas as propriedades do objeto especificado. Esse método
é um atalho para o método console.dir() da API Console.



O exemplo a seguir mostra a diferença entre avaliar document.body diretamente na
linha de comando e usar dir() para mostrar o mesmo elemento:


document.body;
dir(document.body);



Registro de document.body com e sem a função dir().



Para mais informações, consulte a entrada console.dir() na API Console.



dirxml(object)



dirxml(object) imprime uma representação XML do objeto especificado, conforme mostrado no painel Elements.
Esse método é equivalente ao método console.dirxml().



inspect(object/function)



inspect(object/function) abre e seleciona o elemento ou objeto especificado no painel
adequado: o painel Elements para elementos de DOM ou o painel Profiles para objetos de pilha JavaScript.



O exemplo a seguir abre o document.body no painel Elements:


inspect(document.body);



Inspecionar um elemento com inspect().



Ao transmitir uma função para inspeção, a função abre o documento no painel Sources para você
inspecionar.



getEventListeners(object)



getEventListeners(object) retorna os listeners de eventos registrados no objeto especificado. O
valor de retorno é um objeto que contém uma matriz para cada tipo de evento registrado (click ou
keydown, por exemplo). Os membros de cada matriz são objetos que descrevem o listener registrado
para cada tipo. Por exemplo, o código a seguir lista todos os listeners de eventos registrados no objeto
de documento:


getEventListeners(document);



Saída de uso de getEventListeners().



Se mais de um listener estiver registrado no objeto especificado, a matriz vai conter um membro
para cada listener. No exemplo abaixo, há dois listeners de evento registrados no
elemento de documento para o evento click:



Vários listeners.



Você pode expandir cada um desses objetos para explorar suas propriedades:



Visualização expandida do objeto de listener.



Para mais informações, consulte Inspecionar propriedades de objetos.



keys(object)



keys(object) retorna uma matriz que contém os nomes das propriedades que pertencem ao objeto
especificado. Para receber os valores associados das mesmas propriedades, use values().



Por exemplo, suponha que seu aplicativo tenha definido o seguinte objeto:


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



Supondo que player tenha sido definido no namespace global (para simplificar), digitar keys(player) e
values(player) no console gera o seguinte:



Exemplo dos métodos keys() e values().



monitor(function)



Quando a função especificada é chamada, uma mensagem é registrada no console para indicar o
nome da função e os argumentos que foram transmitidos à função quando ela foi chamada.


function sum(x, y) {
  return x + y;
}
monitor(sum);



Exemplo do método monitor().



Use unmonitor(function) para interromper o monitoramento.



monitorEvents(object [, events])



Quando um dos eventos especificados ocorre no objeto especificado, o objeto Event é registrado no
console. É possível especificar um único evento para monitorar, uma matriz de eventos ou um dos "tipos" de eventos genéricos mapeados para uma coleção predefinida de eventos. Veja os exemplos abaixo.



O seguinte monitora todos os eventos resize no objeto de janela.


monitorEvents(window, "resize");



Monitorar eventos de redimensionamento de janela.



O exposto a seguir define uma matriz para monitorar eventos "resize" e "scroll" no objeto de janela:


monitorEvents(window, ["resize", "scroll"])



Você também pode especificar um dos "tipos" de evento disponíveis, strings que mapeiam conjuntos predefinidos de
eventos. A tabela abaixo lista os tipos de evento disponíveis e os mapeamentos associados:



Tipo de evento e eventos mapeados correspondentes
rato"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
chave"keydown", "keyup", "keypress", "textInput"
toque"touchstart", "touchmove", "touchend", "touchcancel"
controle"redimensionar", "rolar", "aumentar o zoom", "focar", "desfocar", "selecionar", "mudar", "enviar", "redefinir"



Por exemplo, o exemplo a seguir usa o tipo de evento "chave" e todos os eventos de chave correspondentes em um campo de texto de entrada
selecionado no painel Elements.


monitorEvents($0, "key");



Confira abaixo um exemplo de saída após digitar caracteres no campo de texto:



Monitorar eventos de tecla.



Use unmonitorEvents(object[, events]) para interromper o monitoramento.



profile([name]) e profileEnd([name])



profile() inicia uma sessão de criação de perfil da CPU JavaScript com um nome opcional. profileEnd()
completa o perfil e exibe os resultados na faixa Performance > Principal.





Para começar a criar o perfil:


profile("Profile 1")



Para interromper a criação de perfil e conferir os resultados na faixa Performance > Principal:


profileEnd("Profile 1")



Resultado na faixa Performance > Principal:



Perfil 1 na faixa principal de performance.



Os perfis também podem ser aninhados. Por exemplo, isto funcionará em qualquer ordem:


profile('A');
profile('B');
profileEnd('A');
profileEnd('B');





queryObjects(Constructor)



Chame queryObjects(Constructor) no console para retornar uma matriz de objetos criados
com o construtor especificado. Exemplo:



    

  • queryObjects(Promise). Retorna todas as instâncias de Promise.
    • 

  • queryObjects(HTMLElement): retorna todos os elementos HTML.
    • 

  • queryObjects(foo), em que foo é o nome de uma classe. Retorna todos os objetos que foram instanciados
por new foo().
    • 




O escopo de queryObjects() é o contexto de execução selecionado no console.



table(data [, columns])



Registre os dados do objeto com a formatação da tabela passando um objeto de dados com títulos de coluna opcionais.
Esse é um atalho para console.table().



Por exemplo, para mostrar uma lista de nomes usando uma tabela no console, faça o seguinte:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Exemplo do método table().



undebug(function)



undebug(function) interrompe a depuração da função especificada para que, quando a função for
chamada, o depurador não seja mais invocado. Ele é usado em conjunto com debug(fn).


undebug(getData);



unmonitor(function)



unmonitor(function) interrompe o monitoramento da função especificada. Ele é usado em conjunto com
monitor(fn).


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) para de monitorar eventos para o objeto e os eventos especificados. Por
exemplo, o exemplo abaixo interrompe todos os monitoramentos de evento no objeto de janela:


unmonitorEvents(window);



Também é possível parar seletivamente o monitoramento de eventos específicos em um objeto. Por exemplo, o código
a seguir começa a monitorar todos os eventos de mouse no elemento selecionado e, em seguida, para o monitoramento
de eventos "mousemove" (talvez para reduzir o ruído na saída do console):


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



values(object)



values(object) retorna uma matriz que contém os valores de todas as propriedades que pertencem ao objeto
especificado.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



Resultado dos valores(jogador).