Novidades do DevTools (Chrome 71)

Kayce Basques

Os novos recursos e as principais mudanças que serão lançadas no 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 sobre iniciadores e prioridades agora nas importações e exportações HAR
• Acessar o menu de comando no menu principal
• Pontos de interrupção do modo picture-in-picture
• Dica bônus: execute monitorEvents() no console para acompanhar o disparo de eventos de um elemento.

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

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

Quando uma Live Expression for avaliada como um nó DOM, passe o cursor sobre o resultado da Live Expression para destacar esse nó na janela de visualização.

Figura 1. Passar o cursor sobre o resultado de uma expressão em tempo real para destacar o nó na janela de visualização

Armazenar nós do DOM como variáveis globais

Para armazenar um nó DOM como uma variável global, execute uma expressão no Console que seja avaliada como um nó, clique com o botão direito do mouse no resultado e selecione Store as global variables.

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 o iniciador e a prioridade agora nas importações e exportações HAR

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

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

Para importar o arquivo de volta para o painel Network, basta arrastá-lo e soltá-lo.

Quando você exporta um arquivo HAR, o DevTools agora inclui informações sobre o iniciador e a prioridade no arquivo HAR . Ao importar arquivos HAR de volta para o DevTools, as colunas Initiador e Prioridade são preenchida.

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. A coluna iniciador

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

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. A coluna Prioridade

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

Figura 12. Como mostrar a coluna Prioridade

Acessar o menu de comando no menu principal

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

Figura 13. O menu de comando

Agora é possível abrir o menu de comando a partir do menu principal. Clique no Menu principal. e selecione Executar comando.

Figura 14. Como abrir o menu de comando no menu principal

Pontos de interrupção do modo picture-in-picture

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

Ative as caixas de seleção enterpictureinpicture, leavepictureinpicture e resize na tag Evento Painel "Breakpoints" do listener para pausar sempre que um desses eventos picture-in-picture for disparado. O DevTools pausa na primeira linha do gerenciador.

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

(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 a quais eventos adicionar listeners. Use monitorEvents() para registrar todos os do elemento ao console.

1. Receba uma referência para o 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. 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 instrui o DevTools a 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 ver outras funções úteis que você pode chamar no console.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

• Envie uma sugestão ou feedback pelo site crbug.com.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no DevTools no DevTools.
• Tuíte em @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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