Referência da API Console Utilitários

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

A API Console Utilitários contém uma coleção de funções de conveniência para realizar tarefas: selecionar e inspecionar elementos DOM, consultar objetos, exibir dados em formato legível, parar e iniciar o criador de perfil, monitorar eventos DOM e chamadas de função e muito mais.

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

$_

$_ retorna o valor da expressão avaliada mais recentemente.

No exemplo a seguir, uma expressão simples (2 + 2) é avaliada. Então, a propriedade $_ é avaliado, que contém o mesmo valor:

$_ é a expressão avaliada mais recentemente.

No próximo exemplo, a expressão avaliada inicialmente contém uma matriz de nomes. Avaliando $_.length para encontrar o comprimento da matriz. O valor armazenado em $_ muda para se tornar o mais recente. expressão avaliada, 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 últimos cinco DOMs elementos inspecionados no painel Elements ou os últimos cinco objetos de heap JavaScript selecionados em no painel Perfis. $0 retorna o elemento ou objeto JavaScript selecionado mais recentemente, $1. retorna o segundo selecionado mais recentemente, 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 $0.

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

Exemplo de $1.

$(seletor [, startNode])

$(selector) retorna a referência ao primeiro elemento DOM com o seletor de CSS especificado. Quando chamada com um argumento, essa função será 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 Role a tela até "Visualizar" para que ela apareça na página.

O exemplo a seguir retorna uma referência ao elemento selecionado no momento e mostra o src :

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

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

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

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

Exemplo de uso<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> para criar uma matriz de todos os <code translate=&lt;img&gt; elementos
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 como usar $() para selecionar todas as imagens que aparecem após o elemento div selecionado no documento e exibir suas fontes.





$x(caminho [, startNode])



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



Por exemplo, o comando 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.



Semelhante às outras funções de seletor, $x(path) tem um segundo parâmetro opcional, startNode,
que especifica um elemento ou nó a partir do qual pesquisar elementos.



Exemplo de uso de um seletor XPath com startNode.



clear()



clear() limpa o console do histórico.


clear();



cópia(objeto)



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


copy($0);



debug(função)



Quando a função especificada é chamada, o depurador é invocado e interrompe dentro da função no
Painel Sources que permite analisar o código e depurá-lo.


debug(getData);



Interrupção 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 saber mais sobre pontos de interrupção, consulte Pausar seu código com pontos de interrupção.



dir(object)



dir(object) mostra uma lista em estilo de objeto com 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 usando dir() para exibir o mesmo elemento:


document.body;
dir(document.body);



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



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



dirxml(objeto)



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



inspect(object/function)



O inspect(object/function) é aberto e seleciona o elemento ou objeto especificado na
painel: o painel Elements para elementos DOM ou o painel Perfis para objetos de heap JavaScript.



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


inspect(document.body);



Inspecionando um elemento com inspect().



Ao transmitir uma função para inspeção, ela abre o documento no painel Fontes.
para serem inspecionados.



getEventListeners(object)



getEventListeners(object) retorna os listeners de eventos registrados no objeto especificado. A
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 comando a seguir lista todos os listeners de eventos registrados no documento
objeto:


getEventListeners(document);



Saída do uso de getEventListeners().



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



Vários listeners.



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



Visualização expandida do objeto do listener.



Para mais informações, consulte Inspecionar propriedades do objeto.



chaves(objeto)



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



Por exemplo, suponha que seu aplicativo definiu 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 resulta no seguinte:



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



monitor(função)



Quando a função especificada é chamada, uma mensagem é registrada no console indicando a
nome da função junto com os argumentos que são passados para a 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 Evento é registrado no
no console do Google Cloud. Especifique um único evento a ser monitorado, uma matriz de eventos ou um dos eventos genéricos
"tipos" mapeadas para uma coleção predefinida de eventos. Veja os exemplos abaixo.



O seguinte monitora todos os eventos redimensionados no objeto da janela.


monitorEvents(window, "resize");



Eventos de redimensionamento da janela de monitoramento.



O seguinte define uma matriz para monitorar o "resize" e "rolar" no objeto da janela:


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



Você também pode especificar um dos "tipos" de eventos disponíveis, strings que mapeiam para conjuntos predefinidos de
eventos. A tabela abaixo lista os tipos de evento disponíveis e os mapeamentos de eventos 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"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"



Por exemplo, o comando a seguir usa a expressão "key" Tipo de evento: todos os eventos de tecla correspondentes em uma entrada de texto
campo selecionado no momento no painel Elements.


monitorEvents($0, "key");



Confira abaixo um exemplo de saída após a digitação de caracteres no campo de texto:



Monitorar eventos principais.



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



perfil([nome]) e perfilEnd([nome])



profile() inicia uma sessão de criação de perfil da CPU JavaScript com um nome opcional. profileEnd()
conclui o perfil e exibe os resultados na coluna Desempenho > Faixa principal.





Para iniciar a criação de perfil:


profile("Profile 1")



Para interromper a criação de perfil e ver os resultados na página Desempenho > Faixa principal:


profileEnd("Profile 1")



O resultado na seção Desempenho > Faixa principal:



Perfil 1 na faixa principal de Desempenho.



Os perfis também podem ser aninhados. Por exemplo, isso 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 que foram 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 é um nome de classe. Retorna todos os objetos que foram instanciados
via new foo().
    • 




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



tabela(dados [, colunas])



Registre os dados do objeto com formatação de tabela transmitindo um objeto de dados com cabeçalhos de coluna opcionais.
Este é um atalho para console.table().



Por exemplo, para exibir 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(função)



undebug(function) interrompe a depuração da função especificada. Assim, quando a função for
chamado, o depurador não é mais invocado. É usado com debug(fn).


undebug(getData);



unmonitor(função)



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


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) interrompe o monitoramento de eventos para o objeto e os eventos especificados. Para
exemplo, o comando a seguir interrompe todo o monitoramento de eventos no objeto "window":


unmonitorEvents(window);



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


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



valores(objeto)



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


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

values(player);



Resultado de valores(player).