Novidades do DevTools (Chrome 117)

Melhorias no painel "Rede"

Substituir conteúdo da Web localmente ainda mais rápido

O recurso substituições locais agora está simplificado. Assim, você pode simular facilmente cabeçalhos de resposta e conteúdo da Web de recursos remotos no painel Rede sem precisar acessá-los.

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.

Se você tiver substituições locais configuradas, mas desativadas, o DevTools as ativará. Se você ainda não tiver configurado, o DevTools vai pedir na barra de ações na parte de cima. Selecione uma pasta para armazenar as substituições e permita que o DevTools acesse essa pasta.

Depois que as substituições são configuradas, as DevTools levam você a Fontes > Substituições > Editor para permitir que você substitua o conteúdo da Web.

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

Problemas do Chromium: 1465785, 1470532, 1469359.

Substituir o conteúdo de solicitações XHR e 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.

No momento, 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). Agora, o DevTools 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 você a se concentrar no código que cria e filtrar solicitações irrelevantes enviadas por extensões instaladas no Chrome, o painel Rede recebe um novo filtro.

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

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 rápido.

Você também pode 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 pretty-print 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 você a formate.

Problema do Chromium: 406900.

Performance: veja as mudanças na prioridade de busca para eventos de rede

Agora, o painel Performance mostra dois campos de prioridade no Resumo de um evento na faixa Rede: Prioridade inicial e Prioridade (final), em vez de apenas Prioridade. Com esse campo adicional, agora é possível saber se a prioridade de busca do evento muda e ajustar a ordem dos downloads. Para mais informações, consulte Otimizar o carregamento de recursos com a API Fetch Priority.

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

Problemas do Chromium: 1463901, 1380964.

Configurações de fontes ativadas por padrão: recolhimento de código e exibição automática de arquivos

A opção Configurações > Preferências > Dobramento de código agora está ativada por padrão. Essa opção permite recolher blocos de código.

Para recolher 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 . Clique em {...} para abrir o bloco novamente.

Além disso, a opção Configurações > Preferências > Mostrar arquivos automaticamente na barra lateral também está ativada por padrão.

Essa configuração faz com que a árvore de arquivos em Fontes > Página selecione o arquivo aberto no Editor ao mudar de guia.

Problemas do Chromium: 1459193, 1336599.

Depuração aprimorada de problemas com cookies de terceiros

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

Já é possível testar o comportamento do Chrome após a descontinuação gradual 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.

Independente da forma como você executa o Chrome (com ou sem a flag), a guia Problemas agora tem a 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 mudança interruptiva sobre a descontinuação.
• Problemas relacionados a cookies de terceiros.

Se você quiser ver avisos sobre a descontinuação gradual como usuário do Chrome, marque essa caixa de seleção.

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

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

Problemas do Chromium: 1458839, 1462693, 1466310.

Depurar a pré-carga no painel "Aplicativo"

A equipe do Chrome está trazendo de volta a pré-renderização completa de páginas futuras que um usuário provavelmente vai acessar. Para ajudar você a depurar isso, o DevTools adiciona a seção Pré-carregamento ao painel Aplicativo. O novo pré-busca e pré-renderização (conhecidos coletivamente como "pré-carregamento de navegação") usam a API Speculation Rules em vez das dicas de recursos baseadas em links.

Na página de demonstração de pré-renderização, na seção Application > Preloading, é possível inspecionar:

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

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

Problema do Chromium: 1410709.

Novas cores

Você já deve ter notado que o DevTools agora tem uma aparência atualizada que se alinha melhor com o Chrome. Um dos fatores que contribuem para isso é o novo esquema de cores.

Esta versão (117) traz mais melhorias na UX do DevTools, tanto as já mencionadas quanto as listadas abaixo, incluindo vários textos de interface aprimorados.

Problema do Chromium: 1456677.

Lighthouse 10.4.0

O painel Lighthouse agora executa o Lighthouse 10.4.0. Principalmente, essa versão adiciona novas auditorias de acessibilidade para o seguinte:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Exemplo:

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

Problema do Chromium: 772558.

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

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

Saiba como criar, executar e testar a extensão e contribua.

Problema do Chromium: 1410709.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Aninhamento de CSS: o painel Elementos agora mostra toda a cadeia de seletores para filhos aninhados (1172985).
• Application > Manifest agora tem uma seção Window Controls Overlay que verifica se um valor display_override está presente no manifesto e fornece links para a documentação relevante.
• A árvore Origens > Página agora faz o seguinte, incluindo, mas não se limitando a (1442863):
  • As pastas ficam cinzas se todo o conteúdo delas estiver na lista de ignorados.
  • Colore as pastas de laranja se todo o conteúdo delas for de um mapa de origem.
• Performance: as Configurações de captura agora são ocultadas automaticamente quando você inicia a gravação (1455498).
• Fontes > Editor restaurou o comportamento Ctrl + Seta (Win) e Opt + Seta (MacOS) (1468208).
• A opção Animações > Pausar tudo agora mantém o estado em todos os carregamentos de página (1446046).
• Application > Storage > Cache storage foi movido para Application > Storage > Cache section (1462622).
• Alguns textos e dicas da interface foram melhorados: Dica de simultaneidade de hardware, Textos do filtro de rede e uma opção do menu principal, uso de maiúsculas na Visualização em árvore do aplicativo, Rede > Textos de cabeçalhos, Fontes > Textos de substituições e sistema de arquivos.

Novos recursos experimentais

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

Os usuários do seu site podem começar a ativar o novo recurso de mídia CSS prefers-reduced-transparency experimental nos dispositivos deles para indicar a preferência por reduzir os efeitos transparentes. Considere levar essa preferência em conta para aumentar a acessibilidade do seu site. Para ajudar você, a guia Renderização do painel agora pode emular a configuração prefers-reduced-transparency: reduce. Assim, você pode criar um protótipo de solução e testar o comportamento do seu site nesse caso.

Para testar esse recurso no Chrome, ative Recursos experimentais da plataforma da Web em chrome://flags.

Problema do Chromium: 1424879.

Monitor de protocolo avançado

O Chrome DevTools usa o Chrome DevTools Protocol (CDP) para instrumentar, inspecionar, depurar e criar perfis de navegadores Chrome. Se você for um desenvolvedor do Chromium ou do DevTools, o Monitor de protocolo vai permitir que você veja todas as solicitações e respostas do CDP feitas pelo DevTools e envie comandos do CDP.

O monitor de protocolo tem uma nova interface para facilitar a criação e o envio de comandos do CDP. Agora você não precisa procurar comandos e parâmetros na documentação. O DevTools vai sugerir eles para você.

No canto inferior direito da guia Monitor de protocolo, clique em Mostrar editor de comandos do CDP, selecione um destino, comece a digitar um comando, selecione um dos sugeridos, especifique valores de parâmetros, se necessário, e clique em Enviar comando (Ctrl/Cmd + Enter).

Problema do Chromium: 1469345.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

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 aos DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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