Novidades do DevTools (Chrome 71)

Kayce Basques

Os novos recursos e as principais mudanças que chegam ao Chrome DevTools no Chrome 71 incluem:

• Passe o cursor sobre uma expressão ao vivo para destacar um nó do DOM
• Armazenar nós do DOM como variáveis globais
• Informações sobre iniciador e prioridade agora nas importações e exportações de HAR
• Acessar o menu de comando pelo menu principal
• Pontos de interrupção do modo picture-in-picture
• (Dica extra) Execute monitorEvents() no console para observar o disparo de eventos de um elemento

Continue lendo ou assista a versão em vídeo desta página:

Passe o cursor sobre uma expressão em tempo real para destacar um nó do DOM

Quando uma expressão ao vivo é avaliada como um nó do DOM, passe o cursor sobre o resultado da expressão ao vivo para destacar esse nó na janela de visualização.

Figura 1. Passar o cursor sobre um resultado da expressão ao vivo para destacar o nó na janela de visualização

Armazenar nós DOM como variáveis globais

Para armazenar um nó DOM como uma variável global, execute uma expressão no console que avalia um nó, clique com o botão direito do mouse no resultado e selecione Armazenar como variável global.

Figura 2. Armazenar como variável global no console

Também é possível clicar com o botão direito do mouse no nó em Árvore DOM e selecionar Armazenar como variável global.

Figura 3. Armazenar como variável global na árvore DOM

Informações sobre iniciador e prioridade agora em importações e exportações de HAR

Para diagnosticar registros de rede com colegas, você pode exportar as solicitações de rede para um arquivo HAR.

Figura 8. Como exportar solicitações de rede para um arquivo HAR

Para importar o arquivo de volta ao painel de rede, basta arrastar e soltar.

Ao exportar um arquivo HAR, o DevTools agora inclui informações de iniciador e prioridade no arquivo HAR. Quando você importa arquivos HAR de volta para o DevTools, as colunas Initiator e Priority são preenchidas.

O campo _initiator fornece mais contexto sobre o que causou a solicitação do recurso. Isso é mapeado para a coluna Initiator na tabela "Requests".

Figura 9. Coluna do iniciador

Você também pode manter a tecla Shift pressionada e passar o cursor sobre uma solicitação para conferir o iniciador e as dependências dela.

Figura 10. Como visualizar iniciadores e dependências

O campo _priority indica o nível de prioridade que o navegador atribuiu ao recurso. Isso é mapeado para a coluna Prioridade na tabela "Solicitações", que fica oculta por padrão.

Figura 11. Coluna "Prioridade"

Clique com o botão direito do mouse no cabeçalho da tabela "Solicitações" e selecione Prioridade para mostrar a coluna Prioridade.

Figura 12. Como mostrar a coluna Prioridade

Acessar o menu de comando pelo menu principal

Use o menu de comando para acessar rapidamente os painéis, as guias e os recursos do DevTools.

Figura 13. O menu de comando

Agora você pode abrir o Command Menu no Main Menu. Clique no botão Main Menu e selecione Run command.

Figura 14. Como abrir o Command Menu no menu principal

Pontos de interrupção picture-in-picture

A Picture-in-Picture é uma nova API experimental que permite que uma página crie uma janela de vídeo flutuante na área de trabalho.

Ative as caixas de seleção enterpictureinpicture, leavepictureinpicture e resize no painel Event Listener Breakpoints para pausar sempre que um desses eventos picture-in-picture for acionado. O DevTools pausa na primeira linha do gerenciador.

Figura 16. Eventos picture-in-picture no painel "Event Listener Breakpoints"

(Dica bônus) Execute monitorEvents() no console para observar o disparo de eventos de um elemento

Suponha que você queira adicionar uma borda vermelha ao redor de um botão depois de focar e pressionar R, E, D, mas não sabe em quais eventos adicionar listeners. Use monitorEvents() para registrar todos os eventos do elemento no console.

1. Receba uma referência para o nó.

   

   Figura 17. Como usar Armazenar como variável global para conseguir uma referência ao nó

2. Transmita o nó como o primeiro argumento para monitorEvents().

   

   Figura 18. Como transmitir o nó para monitorEvents()

3. Interaja com o nó. O DevTools registra todos os eventos do nó no console.

   

   Figura 19. Eventos do nó no Console

Chame unmonitorEvents() para parar de registrar eventos no console.

unmonitorEvents(temp1);

Transmita uma matriz como o segundo argumento para monitorEvents() se você quiser monitorar apenas determinados eventos ou tipos de eventos:

monitorEvents(temp1, ['mouse', 'focus']);

O tipo mouse informa ao DevTools para registrar todos os eventos relacionados ao mouse, como mousedown e click. Outros tipos aceitos são key, touch e control.

Consulte a Referência da linha de comando para conferir outras funções úteis que podem ser chamadas no console.

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos de Novidades do DevTools no YouTube ou de dicas do DevTools no YouTube.

Novidades no DevTools

Uma lista de tudo que foi abordado na série Novidades no DevTools.