Novidades do DevTools (Chrome 75)

Kayce Basques
Kayce Basques
X GitHub Falha

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

Versão em vídeo desta página

Valores predefinidos significativos ao preencher automaticamente as 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 visualizar o tipo de mudança que o valor terá no nó.

O antigo comportamento de preenchimento automático.

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

O novo comportamento de preenchimento automático.

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

Problema relevante do Chromium: #931145

Limpar dados do site do menu de comandos

Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o menu de comando e, em seguida, execute o comando Clear Site Data para limpar todos os dados relacionados à página, incluindo: Service workers, localStorage, sessionStorage, IndexedDB, IndexedDB, Web1}Cache, Cache, Cache, Cache do site do site, Clear Site Data, Service workers, localStorage

O comando "Limpar dados do site".

Figura 3. O comando Clear Site Data.

Já faz algum tempo que a limpeza de dados do site está disponível em Aplicativo > Limpar armazenamento. O novo recurso do Chrome 75 é a possibilidade de executar o comando no menu de comandos.

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

Guia "Application" com "Clear Storage" selecionado.

Figura 4. Aplicativo > Limpar armazenamento.

Problema relevante do Chromium: #942503

Ver todos os bancos de dados IndexedDB

Anteriormente, Application > IndexedDB só permitia inspecionar bancos de dados do IndexedDB a partir da origem principal. Por exemplo, se você tiver um <iframe> na sua página e esse <iframe> estiver usando o IndexedDB, não será possível ver os bancos de dados dele. No Chrome 75, o DevTools mostra os bancos de dados do IndexedDB 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 está visível.

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

Figura 6. O novo comportamento. Os bancos de dados da demonstração ficam 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. O 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 descompacta. Antes, essa informação só estava disponível com o uso de linhas de solicitação grandes. Agora é possível acessar essas informações passando o cursor sobre a coluna Tamanho.

Passe o cursor do mouse sobre a coluna Tamanho para ver o tamanho descompactado de um recurso.

Figura 7. Passe o cursor do mouse sobre a coluna Tamanho para ver o tamanho descompactado de um recurso.

Problema relevante do Chromium: #805429

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

Por um tempo, o DevTools permitiu especificar exatamente quando ele deve pausar em um ponto de interrupção como este: no início da linha, antes que document.querySelector('#dante') seja chamado ou antes que addEventListener('click', logWarning) seja chamado. Se você ativar os três, essencialmente criará 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 inline tem a própria entrada no painel Breakpoints.

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

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

O novo comportamento. Há três entradas no painel &quot;Breakpoints&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 IndexedDB.

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.

Uma dica detalhada.

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

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

Uma dica mínima.

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

Problema relevante do Chromium: #948417

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

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

Recentemente, tivemos muito trabalho para tornar a interface do DevTools mais navegável pelo teclado. Confira Navegar no Chrome DevTools com tecnologia assistiva de 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 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   Mais   > 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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59