Novidades do DevTools (Chrome 65)

Kayce Basques
Kayce Basques
X GitHub Falha

Os novos recursos do DevTools no Chrome 65 incluem:

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

Substituições locais

As substituições locais permitem fazer mudanças no DevTools e mantê-las nos carregamentos de página. Antes, todas as alterações feitas no DevTools eram perdidas quando você recarregasse a página. As substituições locais funcionam para a maioria dos tipos de arquivo, com algumas exceções. Consulte Limitações.

Manter uma mudança de CSS nos carregamentos de página com substituições locais

Figura 1. Manter uma mudança de CSS nos carregamentos de página com substituições locais

Como funciona:

  • Você especifica um diretório em que o DevTools deve salvar as alterações.
  • Quando você faz mudanças no DevTools, ele salva uma cópia do arquivo modificado no seu diretório.
  • Quando você atualiza a página, o DevTools exibe o arquivo local modificado, em vez do recurso da rede.

Para configurar substituições locais:

  1. Abra o painel Origens.

  2. Abra a guia Substituições.

    A guia "Substituições"

    Figura 2. A guia Substituições

  3. Clique em Substituição de configurações.

  4. Selecione em qual diretório você quer salvar as alterações.

  5. Na parte de cima da janela de visualização, clique em Permitir para que o DevTools tenha acesso de leitura e gravação ao diretório.

  6. Faça suas alterações.

Limitações

  • O DevTools não salva as mudanças feitas na Árvore DOM do painel Elementos. Edite o HTML no painel Origens.
  • Se você editar o CSS no painel Estilos e a origem desse CSS for um arquivo HTML, o DevTools não salvará a mudança. Edite o arquivo HTML no painel Origens.
  • Espaços de trabalho. O DevTools mapeia automaticamente recursos de rede para um repositório local. Sempre que você fizer uma mudança no DevTools, ela também será salva no repositório local.

A guia "Mudanças"

Acompanhe as mudanças feitas localmente no DevTools com a nova guia Mudanças.

A guia "Mudanças"

Figura 3. Guia Alterações

Novas ferramentas de acessibilidade

Use o novo painel Acessibilidade para inspecionar as propriedades de acessibilidade de um elemento e inspecione a taxa de contraste dos elementos de texto no Seletor de cores para garantir que eles sejam acessíveis a usuários com deficiência visual ou da percepção de cores.

Painel de acessibilidade

Use o painel Acessibilidade no painel Elementos para investigar as propriedades de acessibilidade do elemento selecionado no momento.

O painel "Acessibilidade"

Figura 4. O painel Acessibilidade mostra os atributos ARIA e as propriedades computadas para o elemento selecionado no momento na Árvore DOM no painel Elementos, bem como a posição dele na árvore de acessibilidade.

Confira o A11ycast de Rob Dodson sobre rotulagem abaixo para ver o painel Acessibilidade em ação.

Taxa de contraste no seletor de cores

O seletor de cores agora mostra a taxa de contraste dos elementos de texto. Aumentar a proporção de contraste dos elementos de texto torna seu site mais acessível para usuários com deficiências visuais ou de visão de cores. Consulte Cor e contraste para saber mais sobre como a taxa de contraste afeta a acessibilidade.

Melhorar o contraste de cores dos elementos de texto torna seu site mais utilizável para todos os usuários. Em outras palavras, se o texto estiver cinza com um fundo branco, ele será difícil de ler.

Inspecionando a taxa de contraste do elemento H1 destacado.

Figura 5. Inspecionando a taxa de contraste do elemento h1 destacado

Na Figura 5, as duas marcas de seleção ao lado de 4.61 significam que esse elemento atende à proporção de contraste recomendada aprimorada (AAA, na sigla em inglês). Se tivesse apenas uma marca de seleção, isso significa que atendeu à proporção de contraste mínima recomendada (AA).

Clique em Show More Mostrar mais para expandir a seção Contrast Ratio. A linha branca na caixa Espectro de cores representa o limite entre as cores que atendem à taxa de contraste recomendada e as que não atendem. Por exemplo, como a cor cinza na Figura 6 atende às recomendações, isso significa que todas as cores abaixo da linha branca também atendem às recomendações.

A seção "Taxa de contraste" expandida.

Figura 6. Seção expandida Taxa de contraste

O painel Auditorias tem uma auditoria de acessibilidade automatizada para garantir que todos os elementos de texto em uma página tenham uma taxa de contraste suficiente.

Consulte Executar o Lighthouse no Chrome DevTools ou assista ao A11ycast abaixo para saber como usar o painel Auditorias para testar a acessibilidade.

Novas auditorias

O Chrome 65 vem com uma nova categoria de auditorias de SEO e muitas auditorias de desempenho novas.

Novas auditorias de SEO

Garantir que suas páginas sejam aprovadas em todas as auditorias da nova categoria SEO pode ajudar a melhorar a classificação do seu mecanismo de pesquisa.

A nova categoria de auditorias de SEO.

Figura 7. A nova categoria de auditorias SEO

Novas auditorias de desempenho

O Chrome 65 também vem com muitas novas auditorias de desempenho:

  • O tempo de inicialização do JavaScript é alto
  • Usa uma política de cache ineficiente em recursos estáticos
  • Evita redirecionamentos de página
  • O documento usa plug-ins
  • Compactar CSS
  • Minificar JavaScript

O desempenho importa! Depois que a Mynet melhorou a velocidade de carregamento de página em quatro vezes, os usuários passaram 43% mais tempo no site, visualizaram 34% mais páginas, as taxas de rejeição caíram 24% e a receita aumentou 25% por visualização de página de artigo. Saiba mais

Dica: Se você quiser melhorar o desempenho de carregamento das suas páginas, mas não sabe por onde começar, consulte o painel Auditorias. Você fornece um URL a ela e recebe um relatório detalhado sobre muitas maneiras diferentes de melhorar a página. Começar.

Outras atualizações

Acompanhamento de código confiável com workers e código assíncrono

O Chrome 65 traz atualizações para o botão Step Into Entrar ao acessar códigos que transmitem mensagens entre linhas de execução e códigos assíncronos. Se você quiser usar o comportamento da etapa anterior, use o novo botão da nova Etapa Step.

Entrar no código que transmite mensagens entre linhas de execução

Ao entrar no código que transmite mensagens entre linhas de execução, o DevTools agora mostra o que acontece em cada linha de execução.

Por exemplo, o app na Figura 8 transmite uma mensagem entre a linha de execução principal e a linha de execução de worker. Depois de entrar na chamada postMessage() na linha de execução principal, o DevTools pausa no gerenciador onmessage da linha de execução de worker. O próprio gerenciador onmessage publica uma mensagem de volta para a linha de execução principal. Entrar nessa chamada pausa o DevTools de volta na linha de execução principal.

Inserindo o código de transmissão de mensagens no Chrome 65.

Figura 8. Como passar a usar o código de transmissão de mensagens no Chrome 65

Quando você entrou em código como esse em versões anteriores do Chrome, o Chrome mostrou apenas o lado da linha de execução principal do código, como pode ser visto na Figura 9.

Inserindo o código de transmissão de mensagens no Chrome 63.

Figura 9. Como passar a usar o código de transmissão de mensagens no Chrome 63

Como entrar no código assíncrono

Ao entrar no código assíncrono, o DevTools agora pressupõe que você quer pausar o código assíncrono que será executado.

Por exemplo, na Figura 10, depois de entrar no setTimeout(), o DevTools executa todo o código que leva até esse ponto em segundo plano e, em seguida, pausa a função transmitida para setTimeout().

Passando para o código assíncrono no Chrome 65.

Figura 10. Uso de código assíncrono no Chrome 65

Quando você entrou em um código como esse no Chrome 63, o DevTools pausou no código enquanto ele era executado cronologicamente, como você pode ver na Figura 11.

Passando para o código assíncrono no Chrome 63.

Figura 11. Uso de código assíncrono no Chrome 63

Várias gravações no painel de desempenho

O painel Desempenho agora permite salvar temporariamente até cinco gravações. As gravações são excluídas quando você fecha a janela do DevTools. Consulte Introdução à análise do desempenho do ambiente de execução para conhecer o painel Desempenho.

Selecionar entre várias gravações no painel "Desempenho".

Figura 12. Como selecionar entre várias gravações no painel Performance

Bônus: automatize as ações do DevTools com o Puppeteer 1.0

A versão 1.0 do Puppeteer, uma ferramenta de automação do navegador mantida pela equipe do Chrome DevTools, foi lançada. É possível usar o Puppeteer para automatizar várias tarefas que antes só estavam disponíveis pelo DevTools, como as capturas de tela:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Ele também tem APIs para muitas tarefas de automação geralmente úteis, como a geração de PDFs:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Consulte o Guia de início rápido para saber mais.

Também é possível usar o Puppeteer para expor recursos do DevTools durante a navegação, sem nunca abri-lo explicitamente. Consulte Como usar recursos do DevTools sem abrir o DevTools para conferir um exemplo.

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