Novidades do DevTools (Chrome 117)

Melhorias no painel de rede

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

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

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

Se você tiver substituições locais configuradas, mas desativadas, o DevTools vai ativá-las. 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.

Depois que as substituições forem configuradas, o DevTools vai direcionar você a Sources > Overrides > Editor para permitir a substituição do conteúdo da Web.

Os recursos substituídos são indicados com no painel Network. Passe o cursor sobre o ícone para saber 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 XHR e buscar solicitações, além dos cabeçalhos de resposta. Com essas substituições, você pode simular as respostas da API para depurar a página da Web, mesmo que o back-end e a API ainda não estejam prontos.

No momento, as Ferramentas do desenvolvedor oferecem suporte a substituições de conteúdo para os seguintes tipos de solicitação: imagens (por exemplo, avif, png), fontes, fetch e XHR, scripts (css e js) e documentos (html). As ferramentas do desenvolvedor agora esmaecem a opção Substituir conteúdo para tipos sem suporte.

Problemas do Chromium: 792101, 1469776.

Ocultar solicitações de extensão do Chrome

Para ajudar você a se concentrar no código que você criou 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 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 texto legível por humanos ao lado dos códigos de status HTTP para que você possa descobrir o que aconteceu com a solicitação mais rapidamente.

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 impressão bonita 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.

Desempenho: confira as mudanças na prioridade de busca para eventos de rede

O painel Performance agora mostra dois campos de prioridade no Resumo de um evento na faixa Rede: Prioridade inicial e Prioridade (final), em vez de apenas a 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.

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

Problemas do Chromium: 1463901, 1380964.

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

A opção Settings > Preferences > Code folding agora está ativada por padrão. Essa opção permite dobrar blocos de código.

Para ocultar 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 retração . Clique em {...} para abrir o bloco novamente.

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

Essa configuração faz com que a árvore de arquivos em Origens > Página selecione o arquivo aberto no Editor quando você alterna as guias.

Problemas do Chromium: 1459193, 1336599.

Melhoria na depuração de problemas com cookies de terceiros

Para ajudar a criar uma Web mais privada e em paralelo com as 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 com anúncios de uma forma que vai deixar os cookies de terceiros obsoletos. O Sandbox de privacidade tem um cronograma de desativação gradual para que você se adapte às mudanças com facilidade.

Já é possível testar o comportamento do Chrome após a desativação gradual de 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 flag), a caixa de seleção Incluir problemas de cookies de terceiros na guia Problemas agora está ativada por padrão para todos os novos usuários do Chrome e, como resultado, informa:

• Um aviso de mudança interruptiva sobre a desativação futura.
• Problemas relacionados a cookies de terceiros.

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

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

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

Problemas do Chromium: 1458839, 1462693, 1466310.

Depurar o pré-carregamento no painel "Application"

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 depurar isso, o DevTools adiciona a seção Preloading ao painel Application. O novo pré-carregamento e a 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, na seção Application > Preloading, é possível inspecionar:

• Regras de especulação, que lista todos os conjuntos de regras encontrados na página atual.
• Preloads, que lista todos os URLs pré-carregados e pré-renderizados dos conjuntos de regras.
• Esta página, que lista o status de pré-renderização 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

Talvez você já tenha notado que o DevTools agora tem uma aparência atualizada que se alinha melhor com o Chrome. Um dos fatores que contribui para isso é o novo esquema de cores.

Esta versão (117) traz mais melhorias de UX para as Ferramentas do desenvolvedor, já mencionadas e listadas, incluindo vários textos de IU aprimorados.

Problema do Chromium: 1456677.

Lighthouse 10.4.0

O painel Lighthouse agora executa o Lighthouse 10.4.0. Mais especificamente, esta versão adiciona novas auditorias de acessibilidade para:

• 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 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 os recursos de depuração no DevTools para programas C++ compilados para WebAssembly. Para saber mais, consulte Depurar o WebAssembly C/C++.

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

Problema do Chromium: 1410709.

Destaques diversos

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

• Aninhamento de CSS: o painel Elementos agora mostra toda a cadeia de seletores dos filhos aninhados (1172985).
• A seção 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):
  • Desativa as pastas se todo o conteúdo delas estiver na lista de ignorados.
  • Colore as pastas em laranja se todo o conteúdo delas for de um mapa de origem.
• Performance: as Configurações de captura agora são ocultas automaticamente quando você inicia a gravação (1455498).
• Sources > Editor restaurou o comportamento de Ctrl + Seta (Win) e Opt + Seta (MacOs) (1468208).
• A opção Animations > Pause all agora mantém o estado em todos os carregamentos de página (1446046).
• Aplicativo > Armazenamento > Armazenamento de cache movido para a Aplicativo > Armazenamento > Seção de cache (1462622).
• Alguns textos e dicas de ferramentas da interface foram aprimorados: Dica de ferramentas de simultaneidade de hardware, Textos de filtro de rede e uma opção de menu principal, maiúsculas no Visualização de árvore de aplicativos, Rede > Textos de cabeçalhos, Origens > Substituições e textos do 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 experimental de prefers-reduced-transparency CSS media nos dispositivos para indicar a preferência de redução de efeitos transparentes. Considere essa preferência para aumentar a acessibilidade do seu site. Para ajudar você, a guia da gaveta Rendering 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 a opção Recursos experimentais da plataforma da Web em chrome://flags.

Problema do Chromium: 1424879.

Monitor de protocolo aprimorado

O Chrome DevTools usa o Chrome DevTools Protocol (CDP) para instrumentar, inspecionar, depurar e criar perfis de navegadores Chrome. Se você é um desenvolvedor do Chromium ou do DevTools, o Protocol Monitor 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 mais procurar comandos e os respectivos parâmetros na documentação. O DevTools vai sugerir isso para você.

No canto inferior direito da guia da gaveta Protocol monitor, clique em Show CDP command editor, selecione um destino, comece a digitar um comando, selecione um dos sugeridos, se necessário, e especifique os valores dos parâmetros. Em seguida, clique em Send command (Ctrl/Cmd + Enter).

Problema do Chromium: 1469345.

Fazer o download dos canais de visualização

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

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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