Esta página foi traduzida pela API Cloud Translation.

Novidades no DevTools (Chrome 123)

Sofia Emelianova

Encontre um easter egg

Para comemorar o Dia da Mentira deste ano, a equipe do DevTools escondeu um easter egg em algum lugar do DevTools.

Para encontrar, procure um emoji 💫 colorido.

Atualizações do painel "Elementos"

Essa versão traz várias atualizações ao painel Elementos.

Emular uma página em foco em Elementos > Estilos

A guia Elementos > Estilos agora tem a opção check_box Emular uma página em foco no botão Alternar o estado dos elementos (:hov). Antes, essa opção só estava disponível no painel Rendering.

Se você mudar o foco da página para o DevTools, alguns elementos de sobreposição serão ocultados automaticamente se forem acionados pelo foco. Por exemplo, listas suspensas, menus ou seletores de data. A opção Emular uma página em foco permite depurar esse elemento como se ele estivesse em foco.

O antes e depois da emulação de uma página em foco na guia "Estilos".

Problema do Chromium: 1468393.

Seletor de cores, relógio de ângulo e editor de easing em substitutos de var()

Para simplificar a edição de CSS, a guia Elementos > Estilos agora permite usar o seletor de cores, o Relógio de ângulo e o Editor de easing em substitutos do var().

O antes e o depois da renderização do seletor de cores, do relógio de ângulo e das ferramentas do Easing Editor em substitutos de var().

Problema do Chromium: 1520417.

A ferramenta de comprimento do CSS foi descontinuada

A ferramenta de criação de comprimento CSS foi descontinuada devido ao feedback de que ela atrasa o fluxo de trabalho e não agrega muito valor.

Não é mais possível arrastar para ajustar o valor ou selecionar um tipo de unidade no menu suspenso. Em vez disso, clique duas vezes no valor e digite um novo.

Para ativar a ferramenta de tamanho novamente, desmarque as configurações Configurações > Experimentos > check_box Suspender o uso da ferramenta de criação de CSS <length> na guia "Estilos".

Se você ainda quiser usar essa ferramenta, a equipe do DevTools quer saber sua opinião e como a ferramenta de comprimento ajuda você no fluxo de trabalho. Deixe seu feedback em crbug/1522657 (link em inglês).

O experimento de descontinuação é desativado.

Para facilitar a pesquisa, o Flame Chart na faixa Desempenho > Principal agora mostra um pop-up acima do evento correspondente quando você alterna pelos resultados da pesquisa.

O antes e o depois de mostrar um pop-up sobre o resultado da pesquisa selecionado.

Problema do Chromium: 1523279

Atualizações do painel Network

Esta versão traz algumas atualizações para o painel Network.

Botão "Limpar" e filtro de pesquisa em Rede > guia EventStream

A guia Rede > EventStream recebe:

Um botão Bloquear Limpar que limpa os eventos capturados na tabela.
Um filtro de pesquisa que entende expressões regulares.

O antes e depois de adicionar um botão "Limpar" e um filtro de pesquisa.

A equipe do DevTools gostaria de agradecer a Charles Vazac por ter criado esse recurso.

Além disso, a guia EventStream agora também captura eventos que os servidores enviam por meio de fetch/XHR, não apenas pela API EventSource. Faça um teste nesta página de demonstração.

Problema do Chromium: 1488863, 40659493.

Dicas com motivos de isenção para cookies de terceiros em Rede > Cookies

A guia Rede > Cookies agora mostra dicas com motivos de isenção ao lado de cookies que, de outra forma, deveriam ter sido bloqueados pela descontinuação dos cookies de terceiros.

O antes e o depois de mostrar uma dica com um motivo de isenção para um cookie de terceiros.

Cookies de terceiros podem ser permitidos pelos seguintes motivos:

Política do Chrome Enterprise
API Storage Access ou API Storage Access de nível superior
O teste de descontinuação dos cookies de terceiros ou o período de carência dele
Heurística de eliminação do uso de cookies de terceiros
Preferência do usuário

Problema do Chromium: 41491846.

Ativar e desativar todos os pontos de interrupção em "Origens"

A seção Sources > Breakpoints retorna as opções Enable e Desativar todos os pontos de interrupção ao menu suspenso. Antes, essas opções eram ignoradas pela reformulação dos pontos de interrupção.

Para ativar ou desativar todos os pontos de interrupção, clique com o botão direito do mouse em um ponto de interrupção em Sources > Breakpoints e selecione a opção correspondente.

Problema do Chromium: 1522037.

Conferir scripts carregados no DevTools para Node.js

O DevTools para Node.js agora mostra os scripts carregados na árvore de navegação em Sources > Scripts.

O antes e o depois de adicionar a guia Scripts com uma árvore de scripts carregados.

Problema do Chromium: 1518364

Lighthouse 11.5.0

O painel Lighthouse agora executa o Lighthouse 11.5.0. Confira a lista completa de mudanças.

Entre as mudanças notáveis está uma nova auditoria que estima as causas raiz das mudanças de layout. Essa auditoria substitui a auditoria de elementos de mudança de layout, que listava apenas os elementos afetados pelas mudanças.

Uma nova auditoria que estima as causas raiz das mudanças de layout.

Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

Os leitores de tela anunciam agora:
- O texto do link Saiba mais ao lado dos tipos de seletor no painel Gravador.
- Quando nenhum experimento corresponde ao filtro em Configurações Configurações > Experimentos.
- A confirmação da ação ao remover, confirmar ou restaurar um atalho em configurações Configurações > Atalhos.
A tabela em settings Settings > Locations agora é renderizada corretamente como uma tabela para ferramentas de acessibilidade.

Problemas do Chromium: 1516957, 324282443, 324467508, 324930007.

Destaques diversos

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

As fontes no DevTools são atualizadas para corresponder ao Chrome (1523538).
Desempenho: correção de exibição de captura de tela ao passar o cursor sobre a linha do tempo (1519469).
Fontes: a altura da linha no Editor foi aumentada para melhorar a legibilidade do código (1523640).
Rede > Respostas: foram corrigidos vários problemas de exibição com diferentes formatos e codificações (1523128, 1509336, 1523128, 41481944, 1509336).

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