Encontrar o 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
Esta versão traz várias atualizações para o painel Elementos.
Emular uma página em foco em "Elementos" > "Estilos"
A guia Elementos > Estilos agora tem a opção Emular uma página em foco no botão Alternar estado dos elementos (:hov). Antes, essa opção só estava disponível no painel Renderização.
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 um elemento como se ele estivesse em foco.
Problema do Chromium: 1468393.
Seletor de cores, relógio de ângulo e editor de suavização em substituições de var()
Para simplificar a edição de CSS, a guia Elementos > Estilos agora permite usar o Seletor de cores, o Relógio de ângulos e o Editor de suavização em substituições var().
Problema do Chromium: 1520417.
A ferramenta de comprimento do CSS está descontinuada
A ferramenta de criação de comprimento de CSS foi descontinuada devido ao feedback de que ela diminui 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 reativar a ferramenta de comprimento, limpe Configurações > Experimentos > Descontinuar a ferramenta de criação de CSS <length> na guia "Estilos".
Se você ainda quiser usar essa ferramenta, a equipe do DevTools gostaria de saber sua opinião e como a ferramenta de comprimento ajuda no seu fluxo de trabalho. Deixe seu feedback em crbug/1522657.
Popover para o resultado da pesquisa selecionado em "Performance" > "Faixa principal"
Para facilitar a pesquisa, o gráfico de chamas na faixa Performance > Principal agora mostra um popover na parte de cima do evento correspondente quando você navega pelos resultados da pesquisa.
Problema do Chromium: 1523279.
Atualizações do painel "Network"
Esta versão traz algumas atualizações para o painel Rede.
Botão "Limpar" e filtro de pesquisa na guia "Rede" > "EventStream"
A guia Rede > EventStream recebe:
- Um botão Limpar que limpa os eventos capturados na tabela.
- Um filtro de pesquisa que entende expressões regulares.
A equipe do DevTools agradece a Charles Vazac por lançar esse recurso.
Além disso, a guia EventStream agora também captura eventos que os servidores enviam por busca/XHR, não apenas a API EventSource. 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 dos cookies que deveriam ter sido bloqueados pela descontinuação de cookies de terceiros.
Os 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
- Teste de descontinuação gradual de cookies de terceiros ou o período de carência
- Heurística de descontinuação gradual de cookies de terceiros
- Preferência do usuário
Problema do Chromium: 41491846.
Ativar e desativar todos os pontos de interrupção em "Fontes"
A seção Fontes > Pontos de interrupção traz de volta as opções Ativar e Desativar todos os pontos de interrupção ao menu suspenso. Antes, essas opções não eram incluídas no redesign 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 Fontes > Pontos de interrupção e selecione a opção correspondente.
Problema do Chromium: 1522037.
Ver scripts carregados no DevTools para Node.js
As DevTools para Node.js agora mostram scripts carregados na árvore de navegação em Fontes > Scripts.
Problema do Chromium: