Referência da API Console Utilitários

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

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





$x(path [, startNode])

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

Por exemplo, o seguinte retorna todos os elementos <p> na página:
$x("//p")



O exemplo a seguir retorna todos os elementos <p> que contêm elementos <a>:
$x("//p[a]")



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



clear()

clear() limpa o histórico do console.
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 a função no painel Sources , permitindo que você percorra o código e o depure.
debug(getData);



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

Para mais informações sobre breakpoints, consulte Pausar o código com breakpoints.

dir(object)

dir(object) mostra 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);



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 console.dirxml() método.

inspect(object/function)

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

O exemplo a seguir abre o document.body no painel Elements:
inspect(document.body);



Ao transmitir uma função para inspecionar, a função abre o documento no painel Sources para que você possa 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 (por exemplo, click ou keydown). Os membros de cada matriz são objetos que descrevem o listener registrado para cada tipo. Por exemplo, o seguinte lista todos os listeners de eventos registrados no objeto do documento:
getEventListeners(document);



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



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



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

keys(object)

keys(object) retorna uma matriz que contém os nomes das propriedades pertencentes 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 resulta no seguinte:



monitor(function)

Quando a função especificada é chamada, uma mensagem é registrada no console indicando o nome da função e os argumentos transmitidos a ela quando foi chamada.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Use unmonitor(function) para interromper o monitoramento.

monitorEvents(object [, events])

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

O seguinte monitora todos os eventos de redimensionamento no objeto da janela.
monitorEvents(window, "resize");



O seguinte define uma matriz para monitorar eventos de "redimensionamento" e "rolagem" no objeto da janela:
monitorEvents(window, ["resize", "scroll"])

Também é possível especificar um dos "tipos" de evento disponíveis, strings que são mapeadas 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"
tocar
"touchstart", "touchmove", "touchend", "touchcancel"
controle
"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

Por exemplo, o seguinte usa o tipo de evento "chave" todos os eventos de chave correspondentes em um campo de texto de entrada selecionado no momento no painel Elements.
monitorEvents($0, "key");

Confira abaixo um exemplo de saída depois de digitar caracteres no campo de texto:



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()
conclui o perfil, abre automaticamente o painel Performance e mostra os resultados na faixa Main.



Para iniciar a criação de perfil:
profile("Profile 1")

Para interromper a criação de perfil e conferir os resultados na faixa Performance > Main:
profileEnd("Profile 1")

Resultado na faixa Performance > Main:



Os perfis também podem ser aninhados. Por exemplo, isso funciona 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. Por 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 instanciados via new foo().


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

table(data [, columns])

Registre dados de objetos com formatação de tabela transmitindo um objeto de dados com cabeçalhos 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);



Para copiar uma tabela registrada para a área de transferência como uma tabela Markdown formatada ou dados CSV, clique com o botão direito do mouse na tabela no Console e selecione a opção de cópia correspondente no menu de contexto.

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. Isso é usado em conjunto com debug(fn).
undebug(getData);

unmonitor(function)

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. Por exemplo, o seguinte interrompe todo o monitoramento de eventos no objeto da janela:
unmonitorEvents(window);

Também é possível interromper seletivamente o monitoramento de eventos específicos em um objeto. Por exemplo, o código a seguir inicia o monitoramento de todos os eventos do mouse no elemento selecionado no momento e, em seguida, interrompe 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 pertencentes ao objeto especificado.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);