Novidades do DevTools (Chrome 71)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos e as principais mudanças do Chrome DevTools no Chrome 71 incluem:

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

Passe o cursor sobre uma Live Expression para destacar um nó DOM

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

Passe o cursor sobre um resultado de "Live Expression" para destacar o 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 do DOM como variáveis globais

Para armazenar um nó do 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 Armazenar como variável global.

Armazene como variável global no Console.

Figura 2. Armazenar como variável global no console

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

Armazene como variável global na árvore do DOM.

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

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

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

Exporte 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 soltá-lo.

Quando você exporta um arquivo HAR, o DevTools agora inclui as informações do iniciador e de prioridade no arquivo HAR. Quando você importar arquivos HAR de volta para o DevTools, as colunas Iniciador e Prioridade serão preenchidas.

O campo _initiator fornece mais contexto sobre o que fez com que o recurso fosse solicitado. Isso é mapeado para a coluna Initiator na tabela "Requests".

A coluna inicial.

Figura 9. A coluna inicial

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

Visualização de iniciadores 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 está oculta por padrão.

A coluna Prioridade.

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.

Como mostrar a coluna "Prioridade".

Figura 12. Como mostrar a coluna Prioridade

Acesse o Menu de comandos no Menu principal

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

O menu de comando.

Figura 13. O menu de comando

Agora você pode abrir o menu de comandos no menu principal. Clique no botão Menu principal principal e selecione Executar comando.

Como abrir o Menu de Comando a partir do Menu Principal.

Figura 14. Como abrir o Menu de Comando a partir do Menu Principal

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

O 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 Pontos de interrupção do listener de eventos para pausar sempre que um desses eventos picture-in-picture for disparado. O DevTools pausa na primeira linha do gerenciador.

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

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

(Dica bônus) Execute monitorEvents() no console para ver os eventos de um elemento serem 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 para o nó.

    Use "Armazenar como variável global" para acessar uma referência ao nó.

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

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

    Como transmitir o nó 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.

    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. Os 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59