Novidades do DevTools (Chrome 75)

Kayce Basques
Kayce Basques
X GitHub Falha

Olá! Estas são as novidades do 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, aceitam 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 visualizar o tipo de alteração que o valor terá no nó.

O comportamento antigo de preenchimento automático.

Figura 1. O comportamento antigo de preenchimento automático. O DevTools está sendo preenchido automaticamente até filter: blur e não alteração visível na janela de visualização.

O novo comportamento de preenchimento automático.

Figura 2. O novo comportamento de preenchimento automático. O DevTools está sendo preenchido automaticamente para filter: blur(1px) e a alteração fica visível na janela de visualização.

Problema relevante do Chromium: #931145

Limpar dados do site no menu de comando

Pressione Control+Shift+P ou Pressione Command + Shift + P (Mac) para abrir o menu de comando e execute o 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 do aplicativo.

O comando "Limpar dados do site".

Figura 3. O comando Limpar dados do site.

A limpeza dos dados do site está disponível em Aplicativo > Limpar o armazenamento por um tempo. A nova no Chrome 75 é capaz de executar os comandos do menu de comando.

Se não quiser excluir todos os dados do site, controle quais deles serão excluídos Aplicativo > Limpar armazenamento.

"Aplicativo" guia com "Limpar armazenamento" selecionados.

Figura 4. Aplicativo > Limpar armazenamento.

Problema relevante do Chromium: #942503

Ver todos os bancos de dados do IndexedDB

Anteriormente, Aplicativo > O IndexedDB só permitiu que você inspecionasse bancos de dados IndexedDB do origem principal. Por exemplo, se você tiver um <iframe> na sua página, e esse <iframe> estiver usando IndexedDB, você não conseguirá acessar os bancos de dados dele. A partir do Chrome 75, o DevTools mostra o IndexedDB bancos de dados para todas as origens.

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

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

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

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 compactação de texto para reduzir o tamanho da transferência de recursos. Você quer ver qual é o tamanho dos recursos da página após o navegador descompacta. Anteriormente, esta informação só estava disponível ao usar grandes solicitações de linhas. Agora você pode acessar essas informações passando o cursor sobre a coluna Tamanho.

Passe o cursor sobre a coluna &quot;Tamanho&quot; para ver o tamanho descompactado de um recurso.

Figura 7. Passe o cursor sobre a coluna "Tamanho" para ver o tamanho descompactado 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 algum tempo que o DevTools permite que você especifique quando exatamente ele deve ser pausado em um ponto de interrupção assim: no início da linha, antes de document.querySelector('#dante') ser chamado, ou antes de addEventListener('click', logWarning) ser chamado. Se você ativar todas as três, criando três pontos de interrupção. Antes, 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 in-line recebe sua própria entrada no Painel Pontos de interrupção.

O comportamento antigo. Há apenas uma entrada no painel &quot;Pontos de interrupção&quot;.

Figura 8. O comportamento antigo. Há apenas uma entrada no painel Breakpoints.

O novo comportamento. Há três entradas no painel &quot;Pontos de interrupção&quot;.

Figura 9. O novo comportamento. Há três entradas no painel Breakpoints.

Problema relevante do Chromium: 927961

Contagens de recursos IndexedDB e Cache

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

Total de entradas em um banco de dados do IndexedDB.

Figura 10. Total de entradas em um banco de dados do 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.

Uma dica detalhada.

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

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

Uma dica mínima.

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 teclado o usuário abriu o Editor, não tinha como sair dela porque a tecla Tab estava usada para recuo. Para substituir o comportamento padrão e usar Tab para mover o foco, ative Configurações > Preferências > Fontes > Ativar o foco dos movimentos de guia.

Temos trabalhado muito recentemente para tornar a interface do DevTools mais navegável pelo teclado. Confira Navegar no Chrome DevTools com tecnologia adaptativa do Rob para saber mais.

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 dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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