Novidades do DevTools (Chrome 62)

Kayce Basques
Kayce Basques
X GitHub Falha

Novos recursos e mudanças nas Ferramentas do desenvolvedor 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 capturas de tela

Agora é possível fazer uma captura de tela de uma parte da viewport ou de um nó HTML específico.

Capturas de tela de uma parte da viewport

Para fazer uma captura de tela de uma parte da viewport:

  1. Clique em Inspecionar Inspecionar ou pressione Command+Shift+C (Mac) ou Control+Shift+C (Windows, Linux) para entrar no modo de inspeção de elementos.
  2. Mantenha pressionada a tecla Command (Mac) ou Control (Windows, Linux) e selecione a parte da viewport que você quer capturar.
  3. Solte o mouse. O DevTools faz o download de uma captura de tela da parte selecionada.

Fazer uma captura de tela de uma parte da viewport

Figura 2. Fazer uma captura de tela de uma parte da viewport

Capturas de tela de nós HTML específicos

Para fazer uma captura de tela de um nó HTML específico:

  1. Selecione um elemento no painel Elementos.

    Exemplo de um 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 Elements.

  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.

    O resultado do comando "Capture node screenshot"

    Figura 4. O resultado do comando Capture node screenshot

Realce de grade CSS

Para conferir a grade CSS que está afetando um elemento, passe o cursor sobre um elemento na árvore DOM do painel Elements. 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 display:grid aplicado a ele.

Como destacar uma grade CSS

Figura 5. Como destacar uma grade CSS

Confira o vídeo abaixo para aprender as noções básicas da grade CSS em menos de dois minutos.

Uma nova API para consultar objetos de heap

Chame queryObjects(Constructor) do 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 é o nome de uma função. Retorna todos os objetos que foram instanciados por 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>.

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 aproximada. Se <text> aparecer em qualquer lugar no URL, o DevTools vai mostrar a mensagem.

Exemplo de filtragem de URL

Figura 7. Usar a filtragem de URL para mostrar apenas mensagens originadas de scripts cujo URL inclua hymn. Ao passar o cursor sobre o nome do script, você pode ver que o nome do host inclui este texto

Importações de HAR no painel "Network"

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 com visualização no painel "Application"

Clique em uma linha em uma tabela Armazenamento de cache para conferir uma prévia do recurso abaixo da tabela.

Como visualizar um recurso de cache

Figura 9. Como visualizar um recurso de cache

Depuração de cache mais responsivo

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

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

Consulte a demonstração do armazenamento em cache para testar.

Cobertura de código no nível de bloco

No Chrome 61 e versões anteriores, a guia Cobertura marca todo o código em uma função como usado, desde que a função 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, mesmo que ela nunca seja executada.

A partir do Chrome 62, a guia Cobertura informa qual código em 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 usada

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como 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.

Novidades no DevTools

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