Novidades do DevTools (Chrome 66)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos e as principais mudanças do DevTools no Chrome 66 incluem:

Continue lendo ou assista à versão em vídeo das notas da versão abaixo.

Ignorar script no painel Network

A coluna Iniciador no painel Rede informa por que um recurso foi solicitado. Por exemplo, se o JavaScript fizer com que uma imagem seja buscada, a coluna Iniciador mostrará a linha de código JavaScript que causou a solicitação.

Antes, se o framework agrupasse solicitações de rede em um wrapper, a coluna Initiador não seria tão útil. Todas as solicitações de rede apontaram para a mesma linha de código do wrapper.

Nesse cenário, o que você realmente precisa é ver o código do aplicativo que causa a solicitação. Isso agora é possível:

  1. Passe o cursor sobre a coluna Iniciador. A pilha de chamadas que gerou a solicitação aparece em um pop-up.
  2. Clique com o botão direito do mouse na chamada que você deseja ocultar dos resultados do iniciador.
  3. Selecione Adicionar script à lista de ignorados. A coluna Iniciador agora oculta todas as chamadas do script que você ignorou.

Ignorando "requests.js".

Figura 1. Ignorando requests.js

Gerencie os scripts ignorados na guia Lista de ignorados em Configurações.

Consulte Ignorar um script ou padrão de scripts para saber mais.

Estilos de formatação nas guias "Preview" e "Response"

A guia Visualização no painel Rede agora formata os recursos por padrão quando detecta que eles foram reduzidos.

A guia "Visualização" modifica o conteúdo da analytics.js por padrão.

Figura 2. A guia Visualização mostra o conteúdo de analytics.js por padrão.

Para visualizar a versão não reduzida de um recurso, use a guia Resposta. Também é possível usar o novo botão Formatar para recursos de formatação manual na guia Resposta.

Ajustar manualmente o conteúdo da analytics.js usando o botão "Formatar".

Figura 3. Como aplicar um estilo manual ao conteúdo de analytics.js usando o botão Format

Visualização de conteúdo HTML na guia Visualizar

Anteriormente, a guia Visualização no painel Rede mostrava o código de um recurso HTML em determinadas situações, enquanto renderizava a visualização do HTML em outras. Agora, a guia Visualização sempre faz uma renderização básica do HTML. Ele não foi projetado para ser um navegador completo e, por isso, pode não exibir HTML exatamente como esperado. Para conferir o código HTML, clique na guia Response ou clique com o botão direito do mouse em um recurso e selecione Open in Sources painel.

Como visualizar HTML na guia Visualizar.

Figura 4. Como visualizar o HTML na guia Visualização

Ajuste de zoom automaticamente no Modo dispositivo

No Device Mode, abra o menu suspenso Zoom e selecione Ajustar automaticamente o zoom para redimensionar automaticamente a janela de visualização sempre que você mudar a orientação do dispositivo.

As substituições locais agora funcionam com alguns estilos definidos em HTML

Quando o DevTools lançava Local Overrides no Chrome 65, uma limitação era que não era possível rastrear mudanças em estilos definidos no HTML. Por exemplo, na Figura 7, há uma regra de estilo no head do documento que declara font-weight: bold para elementos h1.

Exemplo de estilos definidos no HTML

Figura 5. Exemplo de estilos definidos no HTML

No Chrome 65, se você mudasse a declaração font-weight pelo painel Style do DevTools, as Substituição Local não rastreariam a mudança. Em outras palavras, na próxima atualização, o estilo será revertido para font-weight: bold. Mas no Chrome 66, mudanças como essa agora persistem nos carregamentos de página.

Dica bônus: ignore scripts de framework para tornar os pontos de interrupção do listener de eventos mais úteis

Quando criei o vídeo Introdução à depuração do JavaScript, alguns espectadores comentaram que os pontos de interrupção de listener de eventos não são úteis para apps criados com base em frameworks, porque eles geralmente são agrupados no código do framework. Por exemplo, na Figura 8, configurei um ponto de interrupção click no DevTools. Quando clico no botão na demonstração, o DevTools pausa automaticamente na primeira linha do código do listener. Nesse caso, ela é pausada no código do wrapper do Vue.js na linha 1802, o que não é tão útil.

O ponto de interrupção de clique é pausado no código do wrapper do Vue.js.

Figura 6. O ponto de interrupção click é pausado no código do wrapper do Vue.js.

Como o script Vue.js está em um arquivo separado, posso ignorar esse script do painel Call Stack para tornar esse ponto de interrupção click mais útil.

Ignorar o script Vue.js no painel "Pilha de chamadas".

Figura 7. Ignorar o script Vue.js do painel Pilha de chamadas.

Na próxima vez que eu clicar no botão e acionar o ponto de interrupção click, ele executará o código Vue.js sem pausá-lo e, em seguida, pausará na primeira linha do código no listener do app, que é onde eu realmente queria pausar o tempo todo.

O ponto de interrupção de clique agora é pausado no código do listener do app.

Figura 8. O ponto de interrupção click agora é pausado no código do listener do app.

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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59