Novidades do DevTools (Chrome 75)

Kayce Basques

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

Versão em vídeo desta página

Valores predefinidos significativos ao preencher automaticamente funções CSS

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

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

Figura 2. O novo comportamento de preenchimento automático. As ferramentas do desenvolvedor estão fazendo preenchimento automático para filter: blur(1px) e a mudança está visível na viewport.

Problema relevante do Chromium: #931145

Remover dados do site do Command Menu

Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comando e executar o comando Clear Site Data para limpar todos os dados relacionados à página, incluindo: Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache e Application Cache.

Figura 3. O comando Limpar dados do site.

A opção de limpar dados do site já está disponível em App > Limpar armazenamento há algum tempo. O novo recurso no Chrome 75 é capaz de executar o comando no menu de comandos.

Se você não quiser excluir todos os dados do site, é possível controlar quais dados são excluídos em Aplicativo > Limpar armazenamento.

Figura 4. Aplicativo > Limpar armazenamento.

Problema relevante do Chromium: #942503

Conferir todos os bancos de dados IndexedDB

Antes, Application > IndexedDB só permitia inspecionar bancos de dados IndexedDB da origem principal. Por exemplo, se você tivesse um <iframe> na página e esse <iframe> estivesse usando IndexedDB, não seria possível acessar os bancos de dados. A partir do Chrome 75, o DevTools mostra bancos de dados IndexedDB para todas as origens.

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

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

Problema relevante do Chromium: #943770

Conferir o tamanho descompactado de um recurso ao passar o cursor

Suponha que você esteja inspecionando a atividade de rede. Seu site usa a 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 descompactar. Antes, essas informações só estavam disponíveis ao usar linhas de solicitação grandes. Agora você pode acessar essas informações passando o cursor sobre a coluna Tamanho.

Figura 7. Passe o cursor sobre a coluna "Tamanho" para conferir o tamanho não compactado de um recurso.

Problema relevante do Chromium: #805429

Pontos de interrupção inline 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);

Já faz um tempo que o DevTools permite especificar quando exatamente ele precisa ser pausado em um ponto de interrupção como este: no início da linha, antes de document.querySelector('#dante') ou addEventListener('click', logWarning) ser chamado. Se você ativar os três, estará criando três pontos de interrupção. Anteriormente, o painel Breakpoints não oferecia a capacidade de gerenciar esses três pontos de interrupção individualmente. A partir do Chrome 75, cada ponto de interrupção inline recebe sua própria entrada no painel Breakpoints.

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

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 e #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 de ferramenta detalhada mostrando cor, fonte, margem e contraste.

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

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

Problema relevante do Chromium: #948417

Configuração para alternar o recuo da guia no editor do painel "Sources"

O teste de acessibilidade revelou que havia uma armadilha de guias no Editor. Depois que um usuário de teclado acesse o Editor, ele não tem como sair dele porque a tecla Tab é usada para recuo. Para substituir o comportamento padrão e usar a guia para mover o foco, ative Configurações > Preferências > Origens > Ativar a movimentação do foco da guia.

Recentemente, fizemos muito trabalho para tornar a interface das Ferramentas do desenvolvedor mais navegável pelo teclado. Confira o artigo Navegar no Chrome DevTools com tecnologia adaptativa (em inglês) para saber mais.

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 de Novidades do DevTools no YouTube ou de dicas do DevTools no YouTube.

Novidades no DevTools

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