Novidades do DevTools (Chrome 65)

Kayce Basques

Os novos recursos do DevTools no Chrome 65 incluem:

• Substituições locais
• Novas ferramentas de acessibilidade
• A guia Mudanças
• Novas auditorias de SEO e desempenho
• Várias gravações no painel Performance
• Depuração confiável de código com workers e código assíncrono

Leia ou assista a versão em vídeo das notas da versão abaixo.

Substituições locais

Com as substituições locais, você pode fazer mudanças no DevTools e manter essas mudanças em todos os carregamentos de página. Antes, as mudanças feitas no DevTools eram perdidas quando você recarregava a página. Os substituições locais funcionam para a maioria dos tipos de arquivo, com algumas exceções. Consulte Limitações.

Figura 1. Persistir uma mudança de CSS em carregamentos de página com Substituições locais

Como funciona:

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

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ções de configuração.

4. Selecione o diretório em que você quer salvar as mudanças.

5. Na parte de cima da janela de visualização, clique em Permitir para dar ao DevTools 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 Fontes.
• Se você editar o CSS no painel Estilos e a origem desse CSS for um arquivo HTML, o DevTools não vai salvar a mudança. Em vez disso, edite o arquivo HTML no painel Fontes.

Recursos relacionados

• Espaços de trabalho. O DevTools mapeia automaticamente os recursos de rede para um repositório local. Sempre que você faz uma mudança no DevTools, ela também é salva no seu repositório local.

A guia "Mudanças"

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

Figura 3. A guia Mudanças

Novas ferramentas de acessibilidade

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

Painel de acessibilidade

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

Figura 4. O painel Acessibilidade mostra os atributos ARIA e as propriedades calculadas do elemento selecionado no momento na Árvore do DOM do painel Elementos, além da 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 taxa de contraste dos elementos de texto torna seu site mais acessível para usuários com deficiência visual ou daltonismo. Consulte Cor e contraste para saber mais sobre como a proporção de contraste afeta a acessibilidade.

Melhorar o contraste de cores dos elementos de texto torna seu site mais fácil de usar para todos os usuários. Em outras palavras, se o texto for cinza com um plano de fundo branco, será difícil para qualquer pessoa 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 à taxa de contraste recomendada avançada (AAA). Se ele tivesse apenas uma marca de seleção, isso significaria que ele atende à proporção de contraste mínima recomendada (AA).

Clique em Mostrar mais para expandir a seção Taxa de contraste. 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.

Figura 6. A seção Taxa de contraste expandida

Recursos relacionados

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 o A11ycast abaixo para saber como usar o painel Auditorias e testar a acessibilidade.

Novas auditorias

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

Novas auditorias de SEO

Garantir que suas páginas passem em cada uma das auditorias na nova categoria SEO pode ajudar a melhorar sua classificação nos mecanismos de pesquisa.

Figura 7. A nova categoria de auditorias de SEO

Novas auditorias de performance

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
• Sem redirecionamentos de página
• O documento usa plug-ins
• Compactar CSS
• Compactar JavaScript

A performance é importante! Depois que a Mynet melhorou a velocidade de carregamento da 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 souber por onde começar, tente o painel Auditorias. Você fornece um URL, e ele gera um relatório detalhado sobre várias maneiras de melhorar essa página. Começar.

Outras atualizações

• Novas auditorias manuais de acessibilidade
• Atualizações na auditoria do WebP para incluir outros formatos de imagem da próxima 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 considerada na pontuação de acessibilidade.
• A performance agora é a seção principal dos relatórios

Depuração confiável de código com workers e código assíncrono

O Chrome 65 traz atualizações para o botão Depurar com depuração gradual ao depurar com depuração gradual código que passa mensagens entre linhas de execução e código assíncrono. Se você quiser o comportamento de depuração anterior, use o novo botão Etapa .

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

Quando você entra em um código que passa mensagens entre linhas de execução, o DevTools mostra o que acontece em cada uma delas.

Por exemplo, o app na Figura 8 transmite uma mensagem entre a linha de execução principal e a linha de execução do worker. Depois de entrar na chamada postMessage() na linha de execução principal, o DevTools faz uma pausa no manipulador onmessage na linha de execução do worker. O próprio manipulador onmessage envia uma mensagem de volta para a linha de execução principal. Ao entrar na chamada that, o DevTools é pausado novamente na linha de execução principal.

Figura 8. Entrando no código de transmissão de mensagens no Chrome 65

Quando você entrava em um código como esse em versões anteriores do Chrome, o navegador só mostrava o lado da linha de execução principal do código, como você pode ver na Figura 9.

Figura 9. Como entrar no código de transmissão de mensagens no Chrome 63

Entrar no código assíncrono

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

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

Figura 10. Entrar em código assíncrono no Chrome 65

Quando você entrava em um código como esse no Chrome 63, o DevTools pausava o código à medida que ele era executado em ordem cronológica, como você pode ver na Figura 11.

Figura 11. Entrar em código assíncrono no Chrome 63

Várias gravações no painel "Performance"

O painel Performance 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 de desempenho de execução para se familiarizar com o painel Desempenho.

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

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

A versão 1.0 do Puppeteer, uma ferramenta de automação de navegador mantida pela equipe do Chrome DevTools, já está disponível. É possível usar o Puppeteer para automatizar muitas tarefas que antes estavam disponíveis apenas no DevTools, como capturar 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();
})();

Ela também tem APIs para muitas tarefas de automação geralmente úteis, como gerar 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.

Você também pode usar o Puppeteer para expor recursos do DevTools durante a navegação sem abrir explicitamente o DevTools. Consulte Usar recursos do DevTools sem abrir o DevTools para ver um exemplo.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada aos DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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