Novidades do DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova

Melhorias no painel Network

Modifique o conteúdo da Web localmente com ainda mais rapidez

O recurso de substituições locais agora foi simplificado para que você possa simular facilmente cabeçalhos de resposta e conteúdo da Web de recursos remotos no painel Rede sem precisar acessar eles.

Para substituir o conteúdo da Web, abra o painel Rede, clique com o botão direito do mouse em uma solicitação e selecione Substituir conteúdo.

As opções de substituição no menu suspenso de uma solicitação.

Se você tiver substituições locais configuradas, mas desativadas, o DevTools as ativará. Se você ainda não os configurou, o DevTools exibe a barra de ações na parte superior. Selecione uma pasta para armazenar as substituições e permita o acesso do DevTools a ela.

Selecione uma pasta e permita o acesso a ela na barra de ações na parte de cima.

Depois que as substituições forem configuradas, o DevTools direcionará você para Sources > Substituições > Editor para substituir o conteúdo da Web.

Os recursos substituídos são indicados com Salvo. no painel Network. Passe o cursor sobre o ícone para ver o que foi substituído.

Um ícone de substituição ao lado de uma solicitação no painel Network.

Problemas do Chromium: 1465785, 1470532 e 1469359.

Substituir o conteúdo de XHR e solicitações de busca

Agora é possível substituir o conteúdo de solicitações XHR e de busca, além dos cabeçalhos de resposta. Com essas substituições, é possível simular as respostas da API para depurar sua página da Web, mesmo que o back-end e a API ainda não estejam prontos.

Atualmente, o DevTools oferece suporte a substituições de conteúdo para os seguintes tipos de solicitação: imagens (por exemplo, avif, png), fontes, busca e XHR, scripts (css e js) e documentos (html). O DevTools agora esmaece a opção Substituir conteúdo para tipos não compatíveis.

Problemas do Chromium: 792101, 1469776.

Ocultar solicitações de extensão do Chrome

Para ajudar a se concentrar no código que você cria e filtrar solicitações irrelevantes enviadas por extensões que você pode ter instalado no Chrome, o painel Rede recebe um novo filtro.

Para filtrar todas as solicitações enviadas a URLs do chrome-extension://, marque Caixa de seleção. Ocultar URLs de extensão.

URLs de extensão ocultos na tabela de solicitações.

Problemas do Chromium: 1257885, 1458803.

Códigos de status HTTP legíveis por humanos

O código de status no cabeçalho da solicitação agora mostra um texto legível ao lado dos códigos de status HTTP. Assim, você pode descobrir o que aconteceu com a solicitação mais rapidamente.

O antes e o depois exibem códigos de status HTTP legíveis por humanos.

Também é possível passar o cursor sobre o código de status na tabela de solicitações para ver o mesmo texto.

Problema do Chromium: 1153956.

Respostas de estilo de formatação para subtipos JSON

A guia Resposta de uma solicitação com um subtipo MIME application/[subtype]+json (por exemplo, ld+json, hal+json e outros) agora analisa a resposta corretamente e permite que ela seja aprimorada.

O antes e o depois de analisar um subtipo application/json em uma prévia da resposta da rede.

Problema do Chromium: 406900.

Desempenho: veja as alterações na prioridade de busca para eventos de rede

O painel Desempenho agora mostra dois campos de prioridade no Resumo de um evento no rastreamento Rede: Prioridade inicial e Prioridade (final) em vez de apenas Prioridade. Com esse campo adicional, você pode ver se a prioridade de busca do evento muda e ajustar a ordem dos downloads. Para mais informações, consulte Como otimizar o carregamento de recursos com a API Fetch Priority.

Antes e depois de mostrar mudanças na prioridade de busca.

Além disso, você encontra as mesmas informações na coluna Prioridade do painel Rede, com a configuração Caixa de seleção. Linhas de solicitação grande ativada.

A coluna “Prioridade” no painel “Rede”.

Problemas do Chromium: 1463901, 1380964.

Configurações de origens ativadas por padrão: dobramento de código e revelação automática de arquivos

Em Configurações. Configurações > Preferências > Caixa de seleção. A opção Dobra de código agora está ativada por padrão. Essa opção permite dobrar blocos de código.

Para dobrar um bloco de código, passe o cursor sobre o número da linha ao lado do início do bloco e clique no ícone de recolhimento Recolher.. Clique em {...} para expandir o bloco novamente.

Além disso, as Configurações. Configurações > Preferências > Caixa de seleção. Revelar arquivos automaticamente na barra lateral agora também está ativado por padrão.

Essa configuração define a árvore de arquivos na tabela Sources > Página: selecione o arquivo atual aberto no Editor ao trocar de guia.

Problemas do Chromium: 1459193, 1336599.

Depuração aprimorada de problemas de cookies de terceiros

Para ajudar a criar uma Web com mais privacidade e em paralelo com as atualizações de outros navegadores, o Chrome lançou a iniciativa Sandbox de privacidade. Essa iniciativa melhora fundamentalmente a privacidade na Web e pode manter uma Web saudável com anúncios de uma forma que vai deixar os cookies de terceiros obsoletos. O Sandbox de privacidade tem um cronograma de descontinuação gradual para facilitar a adaptação às mudanças.

Você já pode testar como o Chrome se comporta após a descontinuação dos cookies de terceiros. Para fazer isso, execute o Chrome na linha de comando com a flag --test-third-party-cookies-phaseout. Para saber o que essa flag faz, consulte Depuração de cookies.

Independentemente de como você executa o Chrome (com ou sem a sinalização), a guia Problemas agora tem a caixa de seleção Caixa de seleção. Incluir problemas de cookies de terceiros ativada por padrão para todos os novos usuários do Chrome e, como resultado, informa:

  • Um aviso de alteração interruptiva sobre a descontinuação gradual.
  • Problemas relacionados a cookies de terceiros.

Se você quiser receber avisos de cookie sobre a descontinuação futura de um usuário atual do Chrome, marque esta caixa de seleção.

Para testar isso, inspecione os cookies nesta página de demonstração.

Problemas com cookies de terceiros informados na guia "Problemas".

Além disso, o filtro Caixa de seleção. Cookies de resposta bloqueados no painel Rede foi reformulado para deixar claro que ele mostra apenas os cookies de resposta bloqueados.

A caixa de seleção está marcada e mostra apenas as solicitações com cookies de resposta bloqueados.

Problemas do Chromium: 1458839, 1462693 e 1466310.

Depurar o pré-carregamento no painel "Aplicativo"

A equipe do Chrome está usando a pré-renderização completa de páginas futuras em que um usuário provavelmente vai navegar. Para permitir a depuração, o DevTools adiciona a seção Pré-carregamento ao painel Aplicativo. A nova pré-busca e pré-renderização (coletivamente conhecidas como "pré-carregamento de navegação") usa a API Speculation Rules em vez das dicas de recursos baseadas em links.

Nesta página de demonstração, em Aplicativo > Pré-carregando, você pode inspecionar:

  • Regras de especulação, que lista todos os conjuntos de regras encontrados na página atual.
  • Pré-carrega que lista todos os URLs pré-buscados e pré-renderizados dos conjuntos de regras.
  • Esta página lista o status pré-renderizado da página atual.

Para mais informações, consulte a postagem dedicada à depuração de regras de especulação.

Problema do Chromium: 1410709.

Novas cores

Você já deve ter notado que o DevTools agora tem um visual atualizado que se alinha melhor ao Chrome. Um fator que contribui para isso é o novo esquema de cores.

O antes e o depois de aplicar as novas cores.

Esta versão (117) traz mais melhorias de UX para o DevTools, ambas já mencionadas e listadas mais adiante, incluindo vários textos de interface aprimorados.

Problema do Chromium: 1456677.

Lighthouse versão 10.4.0

O painel Lighthouse agora executa o Lighthouse 10.4.0. O mais importante é que essa versão adiciona novas auditorias de acessibilidade para:

Exemplo:

Falha na verificação da cor dos links que os torna indistinguíveis.

Veja também a lista completa de mudanças. Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

A extensão de depuração C/C++ WebAssembly para DevTools agora é de código aberto

A extensão de depuração C/C++ WebAssembly para DevTools agora é de código aberto e reside no repositório de front-end do DevTools. Essa extensão ativa recursos de depuração no DevTools para programas C++ compilados no WebAssembly. Para saber mais, consulte Depurar o WebAssembly C/C++.

Saiba como criar, executar e testar a extensão e fique à vontade para contribuir.

Problema do Chromium: 1410709.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

Novos recursos experimentais

Nova emulação de renderização: prefers-reduced-transparency

Os usuários do seu site podem ativar o novo recurso de mídia CSS prefers-reduced-transparency experimental nos dispositivos para indicar que preferem reduzir os efeitos transparentes. Considere essa preferência para aumentar a acessibilidade do seu site. Para ajudar você, a guia da gaveta Renderização agora pode emular a configuração prefers-reduced-transparency: reduce. Assim, é possível prototipar uma solução e testar como seu site se comporta nesse caso.

Para testar este recurso no Chrome, ative os recursos experimentais da plataforma da Web em chrome://flags.

Problema do Chromium: 1424879.

Monitor do protocolo aprimorado

O Chrome DevTools usa o protocolo Chrome DevTools (CDP, na sigla em inglês) para instrumentar, inspecionar, depurar e criar o perfil dos navegadores Chrome. Se você é um desenvolvedor do Chromium ou DevTools, o monitor de protocolo oferece uma maneira de visualizar todas as solicitações e respostas do CDP feitas pelo DevTools e enviar comandos do CDP.

O monitor de protocolo recebe uma nova interface para facilitar a construção e o envio de comandos do CDP. Agora você não precisa procurar comandos e seus parâmetros na documentação, o DevTools irá sugeri-los para você.

No canto inferior direito da guia da gaveta Monitor de protocolo, clique em Painel esquerdo aberto. Mostrar editor de comando do CDP, selecione um destino, comece a digitar um comando, selecione uma das sugestões (se necessário), especifique valores de parâmetro e clique em Enviar. Enviar comando (Ctrl/Cmd + Enter).

Especificar e enviar um comando do CDP.

Problema do Chromium: 1469345.

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   Mais > 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.