Novidades do DevTools (Chrome 65)

Os novos recursos do DevTools no Chrome 65 incluem:

• Substituições locais
• Novas ferramentas de acessibilidade
• Guia Alterações
• Novas auditorias de SEO e performance
• Várias gravações no painel Performance
• Código confiável com workers e código assíncrono

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. Locais As substituições funcionam para a maioria dos tipos de arquivo, com algumas exceções. Consulte Limitações.

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 da rede recurso.

Para configurar substituições locais:

1. Abra o painel Origens.

2. Abra 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 superior 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 na Origens.
• Se você editar o CSS no painel Estilos e a origem desse CSS for um arquivo HTML, o DevTools não e salvar a alteração. Edite o arquivo HTML no painel Origens.

Recursos relacionados

• Espaços de trabalho. O DevTools mapeia automaticamente recursos de rede para um repositório local. Sempre que você fizer uma alteração 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.

Figura 3. Na guia Alterações

Novas ferramentas de acessibilidade

Use o novo painel Acessibilidade para inspecionar as propriedades de acessibilidade de um elemento. inspecione a taxa de contraste dos elementos de texto no Seletor de cores para garantir que eles estejam acessíveis a usuários com deficiências visuais ou de visão de cores.

Painel de acessibilidade

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

Figura 4. O painel Acessibilidade mostra os atributos ARIA e as propriedades computadas para o elemento atualmente selecionado na Árvore DOM no painel Elementos, assim como o 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 o contraste proporção de elementos de texto torna seu site mais acessível para usuários com deficiências visuais ou deficiências visuais de percepção de cor. 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 Em outras palavras, se o texto estiver cinza com fundo branco, será difícil de ler.

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 aos requisitos taxa de contraste recomendada (AAA). Se tivesse apenas uma marca de seleção, isso significa que ela atendeu ao proporção de contraste mínima recomendada (AA).

Clique em Show More para expandir a opção Contrast Proporção. 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 A Figura 6 atende às recomendações, isso significa que todas as cores abaixo da linha branca também atendem recomendações.

Figura 6. Seção expandida Taxa de contraste

Recursos relacionados

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

Consulte Executar o Lighthouse no Chrome DevTools ou assista ao A11ycast abaixo para aprender a usar a 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 seu classificação em mecanismos de pesquisa.

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
• Compactar JavaScript

O desempenho importa! Após a Mynet melhorar sua 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 artigo visualização de página. Saiba mais.

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

Outras atualizações

• Novas auditorias de acessibilidade manuais
• Atualizações na auditoria do WebP para incluir outros formatos de imagem de última geração
• Uma reformulação da pontuação de acessibilidade
• Se uma auditoria de acessibilidade não for aplicável a uma página, ela não será mais contabilizada pontuação de acessibilidade
• Desempenho agora é a seção superior dos relatórios

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

O Chrome 65 traz atualizações para o processo Step Into Botão ao entrar que transmite mensagens entre linhas de execução e o código assíncrono. Se quiser que a etapa anterior comportamento, use a nova Etapa .

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

Ao entrar em um código que passa mensagens entre linhas de execução, o DevTools agora mostra o que acontece 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 faz uma pausa na onmessage na linha de execução de worker. O próprio gerenciador onmessage posta uma mensagem de volta para o fio Entrar nessa chamada pausa o DevTools de volta na linha de execução principal.

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

Quando você utilizava um código como este em versões anteriores do Chrome, o navegador mostrava apenas no lado da linha de execução principal do código, como pode ser visto na Figura 9.

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 na código assíncrono que, por fim, é executado.

Por exemplo, na Figura 10, depois de entrar no setTimeout(), o DevTools executa todo o código que levam a esse ponto nos bastidores e, em seguida, pausa na função que é passada ao setTimeout()

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

Quando você entrou em um código como este no Chrome 63, o DevTools pausou no código, cronologicamente em execução, como mostrado na Figura 11.

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ída quando você fecha a janela do DevTools. Consulte Introdução à análise do ambiente de execução Desempenho para se acostumar com o 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, agora está para fora. É possível usar o Puppeteer para automatizar várias tarefas que antes só estavam disponíveis pelo DevTools, como 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 enquanto navega sem nunca explicitamente ao abrir o DevTools. Consulte Como usar recursos do DevTools sem abrir o DevTools para ver 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é-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   > 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.