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 ao vídeo das notas da versão abaixo.

Ignorar script no painel "Rede"

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 Initiator mostrará a linha de código JavaScript que causou a solicitação.

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

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

  1. Passe o cursor sobre a coluna Initiator. A pilha de chamadas que causou a solicitação aparece em um pop-up.
  2. Clique com o botão direito do mouse na chamada que você quer ocultar dos resultados do iniciador.
  3. Selecione Adicionar script à lista de ignorados. A coluna Initiator 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 sobre como ignorar scripts.

Definição de impressão nas guias Preview (Visualização) e Response (Resposta)

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

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

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

Para ver a versão não reduzida de um recurso, use a guia Resposta. Também é possível fazer o estilo de formatação dos recursos manualmente na guia Resposta usando o novo botão Formatar.

Impressão manual do conteúdo da analytics.js usando o botão "Formatar".

Figura 3. Estilo de formatação manual do conteúdo de analytics.js usando o botão Formatar.

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

Anteriormente, a guia Visualização no painel Rede mostrava o código de um recurso HTML em algumas situações e renderizava uma visualização do HTML em outras. A guia Visualização agora sempre faz uma renderização básica do HTML. Ele não foi criado para ser um navegador completo, por isso, pode não exibir HTML exatamente como você espera. Se você quiser ver o código HTML, clique na guia Response ou com o botão direito do mouse em um recurso e selecione Open in Sources.

Visualização de HTML na guia Visualizar.

Figura 4. Visualização de HTML na guia Visualização

Ajuste automático de zoom no Modo dispositivo

No Modo dispositivo, abra o menu suspenso Zoom e selecione Ajustar zoom automaticamente 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çou o recurso Local Overrides no Chrome 65, uma limitação era que ele não podia 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.

Um exemplo de estilos definidos em HTML

Figura 5. Um exemplo de estilos definidos em HTML

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

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

Quando criei o vídeo Comece a usar a depuração do JavaScript, alguns espectadores comentaram que os pontos de interrupção do listener de eventos não são úteis para apps criados em frameworks, porque eles costumam estar envolvidos 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 de código do listener. Nesse caso, ele é pausado no código do wrapper do Vue.js na linha 1802, o que não é muito ú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 da 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 no painel Pilha de chamadas

Na próxima vez que eu clicar no botão e acionar o ponto de interrupção click, ele vai executar o código Vue.js sem pausar e depois pausar na primeira linha de código no listener do app, que é onde eu 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 pausa 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é-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