Novidades do DevTools (Chrome 75)

Kayce Basques

Olá! Confira as novidades do Chrome DevTools no Chrome 75.

Versão em vídeo desta página

Valores predefinidos significativos ao usar o preenchimento automático de funções CSS

Algumas propriedades de CSS, como filter, usam funções para valores. Por exemplo, filter: blur(1px) adiciona um desfoque de um pixel a um nó. Ao preencher automaticamente propriedades como filter, o DevTools agora preenche a propriedade com um valor significativo para que você possa visualizar que tipo de mudança o valor terá no nó.

Figura 1. O comportamento antigo do preenchimento automático. O DevTools está preenchendo automaticamente filter: blur e nenhuma mudança é visível na janela de visualização.

Figura 2. O novo comportamento de preenchimento automático. O DevTools está preenchendo automaticamente filter: blur(1px) e a mudança está visível na porta de visualização.

Problema relevante do Chromium: #931145

Remover dados do site no Command Menu

Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comandos e execute o comando Limpar dados do site para limpar todos os dados relacionados à página, incluindo: Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache, e Cache de aplicativo.

Figura 3. O comando Remover dados do site.

A limpeza de dados do site está disponível em Application > Clear Storage há algum tempo. O novo recurso do Chrome 75 permite executar o comando no menu de comandos.

Se você não quiser excluir todos os dados do site, controle quais dados serão excluídos em Application > Clear Storage.

Figura 4. Aplicativo > Limpar armazenamento.

Problema relevante do Chromium: #942503

Ver todos os bancos de dados IndexedDB

Antes, Application > IndexedDB permitia apenas inspecionar bancos de dados IndexedDB da origem principal. Por exemplo, se você tiver um <iframe> na sua página e ele estiver usando IndexedDB, não será possível ver os bancos de dados dele.<iframe> A partir do Chrome 75, o DevTools mostra bancos de dados IndexedDB de todas as origens.

Figura 5. O comportamento antigo. A página está incorporando uma demonstração que usa IndexedDB, mas nenhum banco de dados está visível.

Figura 6. O novo comportamento. Os bancos de dados da demonstração ficam visíveis.

Problema relevante do Chromium: #943770

Ver o tamanho não compactado de um recurso ao passar o cursor

Suponha que você esteja inspecionando a atividade de rede. Seu site usa compactação de texto para reduzir o tamanho da transferência de recursos. Você quer saber o tamanho dos recursos da página depois que o navegador os descompacta. Antes, essas informações só estavam disponíveis ao usar linhas de solicitação grandes. Agora, é possível acessar essas informações passando o cursor sobre a coluna Tamanho.

Figura 7. Passar o cursor sobre a coluna "Tamanho" para ver o tamanho descompactado de um recurso.

Problema relevante do Chromium: #805429

Pontos de interrupção in-line no painel de pontos de interrupção

Suponha que você adicione um ponto de interrupção de linha de código à seguinte linha de código:

document.querySelector('#dante').addEventListener('click', logWarning);

Há algum tempo, as DevTools permitem especificar quando exatamente elas devem pausar em um ponto de interrupção como este: no início da linha, antes de document.querySelector('#dante') ser chamado ou antes de addEventListener('click', logWarning) ser chamado. Se você ativar os três, vai criar três pontos de interrupção. Antes, o painel Pontos de interrupção não permitia gerenciar esses três pontos de interrupção individualmente. No Chrome 75, cada ponto de interrupção inline tem uma entrada própria no painel Pontos de interrupção.

Figura 8. O comportamento antigo. Há apenas uma entrada no painel Pontos de interrupção.

Figura 9. O novo comportamento. Há três entradas no painel Pontos de interrupção.

Problema relevante do Chromium: #927961

Contagens de recursos do IndexedDB e do cache

Os painéis IndexedDB e Cache agora indicam o número total de recursos em um banco de dados ou cache.

Figura 10. Total de entradas em um banco de dados IndexedDB.

Problemas relevantes do Chromium: #941197, #930773, #930865

Configuração para desativar a dica de inspeção detalhada

O Chrome 73 introduziu dicas detalhadas no modo de inspeção.

Figura 11. Uma dica detalhada mostrando cor, fonte, margem e contraste.

Agora é possível desativar essas dicas detalhadas em Configurações > Preferências > Elementos > Mostrar dica detalhada da ferramenta de inspeção.

Figura 12. Uma dica mínima mostrando apenas largura e altura.

Problema relevante do Chromium: #948417

Configuração para ativar/desativar o recuo de tabulação no editor do painel "Fontes"

Os testes de acessibilidade revelaram que havia uma armadilha de tabulação no Editor. Depois que um usuário do teclado entrava na guia Editor, não era possível sair dela porque a tecla Tab era usada para indentação. Para substituir o comportamento padrão e usar a tecla Tab para mover o foco, ative Configurações > Preferências > Fontes > Ativar a tecla Tab para mover o foco.

Recentemente, houve muito trabalho para tornar a interface do usuário do DevTools mais navegável pelo teclado. Confira o artigo de Rob Navegar no Chrome DevTools com tecnologia assistiva para saber mais.

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.