Novidades do DevTools (Chrome 62)

Kayce Basques
Kayce Basques
X GitHub Falha

Novos recursos e mudanças no DevTools no Chrome 62:

Operadores de espera de nível superior no Console

O Console agora oferece suporte a operadores await de nível superior.

Como usar operadores de espera de nível superior no Console

Figura 1. Como usar operadores await de nível superior no Console

Novos fluxos de trabalho de captura de tela

Agora é possível fazer uma captura de tela de uma parte da janela de visualização ou de um nó HTML específico.

Capturas de tela de uma parte da janela de visualização

Para fazer uma captura de tela de uma parte da janela de visualização:

  1. Clique em Inspect Inspecionar ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows, Linux) para entrar no modo de inspeção de elemento.
  2. Mantenha pressionado Command (Mac) ou Control (Windows, Linux) e selecione a parte da janela de visualização da qual você quer fazer uma captura de tela.
  3. Solte o mouse. O DevTools faz o download de uma captura de tela da parte selecionada.

Como fazer uma captura de tela de uma parte da janela de visualização

Figura 2. Como fazer uma captura de tela de uma parte da janela de visualização

Capturas de tela de nós HTML específicos

Para capturar a tela de um nó HTML específico:

  1. Selecione um elemento no painel Elementos.

    Exemplo de nó

    Figura 3. Neste exemplo, o objetivo é fazer uma captura de tela do cabeçalho azul que contém o texto Tools. Esse nó já está selecionado na Árvore DOM do painel Elementos.

  2. Abra o Command Menu.

  3. Comece a digitar node e selecione Capture node screenshot. O DevTools faz o download de uma captura de tela do nó selecionado.

    Resultado do comando "Capture node screenshot"

    Figura 4. O resultado do comando Capture node screenshot

Destaque da grade CSS

Para visualizar a grade CSS que está afetando um elemento, passe o cursor sobre um elemento na Árvore DOM do painel Elementos. Uma borda tracejada aparece ao redor de cada um dos itens da grade. Isso só funciona quando o item selecionado ou o pai do item selecionado tem um display:grid aplicado a ele.

Como destacar uma grade CSS

Figura 5. Como destacar uma grade CSS

Confira o vídeo abaixo para aprender os conceitos básicos da grade CSS em menos de dois minutos.

Uma nova API para consultar objetos de heap

Chame queryObjects(Constructor) no Console para retornar uma matriz de objetos que foram criados com o construtor especificado. Exemplo:

  • queryObjects(Promise). Retorna todas as promessas.
  • queryObjects(HTMLElement). Retorna todos os elementos HTML.
  • queryObjects(foo), em que foo é um nome de função. Retorna todos os objetos que foram instanciados via new foo().

O escopo de queryObjects() é o contexto de execução selecionado no Console. Consulte Como selecionar o contexto de execução.

Novos filtros do console

O Console agora oferece suporte a filtros negativos e de URL.

Filtros negativos

Digite -<text> na caixa Filtro para filtrar qualquer mensagem do Console que inclua <text>.

Um exemplo de três mensagens que serão filtradas

Figura 6. A primeira instrução registra one, two, three e four no Console. two está oculto porque -two foi inserido na caixa Filtro.

O DevTools filtra uma mensagem se <text> for encontrado:

  • No texto da mensagem.
  • No nome do arquivo de origem da mensagem.
  • No texto do stack trace.

O filtro negativo também funciona com expressões regulares, como -/[4-5]*ms/.

Filtros de URL

Digite url:<text> na caixa Filtro para mostrar apenas mensagens originadas de um script cujo URL inclui <text>.

O filtro usa a correspondência difusa. Se <text> aparecer em qualquer lugar no URL, o DevTools mostrará a mensagem.

Exemplo de filtragem de URL

Figura 7. Uso da filtragem de URL para mostrar apenas mensagens originadas de scripts com URL que inclui hymn. Passe o cursor sobre o nome do script para ver que o nome do host inclui esse texto.

Importações HAR no painel "Rede"

Arraste e solte um arquivo HAR no painel Rede para importá-lo.

Como importar um arquivo HAR

Figura 8. Como importar um arquivo HAR

Recursos de cache visualizáveis no painel "Aplicativo"

Clique em uma linha em uma tabela de Armazenamento em cache para acessar o recurso abaixo dela.

Como visualizar um recurso de cache

Figura 9. Como visualizar um recurso de cache

Depuração de cache mais responsiva

No Chrome 61 e anteriores, a depuração de caches criados com a API Cache é difícil. Por exemplo, quando uma página cria um novo cache, você precisa atualizar manualmente a página ou o DevTools para ver o novo cache.

No Chrome 62, a guia Armazenamento em cache agora é atualizada em tempo real sempre que você cria, atualiza ou exclui um cache ou um recurso. Assista o vídeo abaixo para ver um exemplo.

Confira a demonstração do armazenamento em cache para testá-lo.

Cobertura de código no nível do bloco

No Chrome 61 e anteriores, a guia Cobertura marca todo o código de uma função como usado, desde que ela seja chamada.

Exemplo da guia &quot;Cobertura&quot; no Chrome 61

Figura 10. Exemplo da guia Cobertura no Chrome 61. A linha 4 é marcada como usada, embora nunca seja executada

A partir do Chrome 62, a guia Cobertura agora informa qual código dentro de uma função é chamado.

Exemplo da guia &quot;Cobertura&quot; no Chrome 62

Figura 11. Exemplo da guia Cobertura no Chrome 62. A linha 4 está marcada como não utilizada

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