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 dinâmica para destacar um nó do DOM
• Armazenar nós do DOM como variáveis globais
• Informações de iniciador e prioridade agora em importações e exportações de HAR
• Acessar o menu de comandos no menu principal
• Pontos de interrupção picture-in-picture
• (Dica extra) Execute monitorEvents() no console para observar os eventos de um elemento sendo acionados

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

Passe o cursor sobre uma expressão dinâmica para destacar um nó DOM

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

Figura 1. Passar o cursor sobre um resultado de Live Expression para destacar o nó na janela de visualização

Armazenar nós DOM como variáveis globais

Para armazenar um nó do DOM como uma variável global, execute uma expressão no console que avalie 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

Ou clique com o botão direito do mouse no nó na Árvore do DOM e selecione Armazenar como variável global.

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

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

Se você quiser diagnosticar registros de rede com colegas, exporte as solicitações de rede para um arquivo HAR.

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

Para importar o arquivo de volta para o painel "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 Iniciador e Prioridade são preenchidas.

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

Figura 9. A coluna "Iniciador"

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

Figura 10. Como ver iniciadores e dependências

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

Figura 11. A 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 comandos no menu principal

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

Figura 13. O menu de comandos

Agora é possível abrir o menu de comandos no menu principal. Clique no botão Menu principal e selecione Executar comando.

Figura 14. Abrir o menu de comandos no menu principal

Pontos de interrupção picture-in-picture

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

Ative as caixas de seleção enterpictureinpicture, leavepictureinpicture e resize no painel Pontos de interrupção do listener de eventos para pausar sempre que um desses eventos picture-in-picture for acionado. O DevTools faz uma pausa na primeira linha do manipulador.

Figura 16. Eventos picture-in-picture no painel "Pontos de interrupção do listener de eventos"

(Dica extra) Execute monitorEvents() no console para observar os eventos de um elemento sendo acionados.

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

1. Receba uma referência ao nó.

   

   Figura 17. Usar Armazenar como variável global para receber uma referência ao nó

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

   

   Figura 18. Transmitir o nó para monitorEvents()

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

   

   Figura 19. Os eventos do nó no console

Chame unmonitorEvents() para interromper o registro de eventos no console.

unmonitorEvents(temp1);

Transmita uma matriz como o segundo argumento para monitorEvents() se 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 compatíveis são key, touch e control.

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

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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