Novidades do DevTools (Chrome 65)

Kayce Basques

Os novos recursos que chegam ao Chrome DevTools no Chrome 65 incluem:

• Substituições locais
• Novas ferramentas de acessibilidade
• Guia Mudanças
• Novas auditorias de SEO e desempenho
• Várias gravações no painel Performance
• Passo a passo confiável com workers e código assíncrono

Continue lendo ou assista a 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 manter essas mudanças nas cargas de página. Antes, todas as mudanças feitas no DevTools eram perdidas quando você atualizava a página. As Substituições locais funcionam para a maioria dos tipos de arquivo, com algumas exceções. Consulte as limitações.

Figura 1. Como 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 precisa salvar as mudanças.
• Quando você faz alterações no DevTools, ele salva uma cópia do arquivo modificado no seu diretório.
• Quando você recarrega a página, o DevTools serve o arquivo local modificado em vez do recurso de rede.

Para configurar as substituições locais:

1. Abra o painel Origens.

2. Abra a guia Modificações.

   

   Figura 2. Guia Substituições

3. Clique em Configurações de substituição.

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

5. Na parte de cima da viewport, clique em Permitir para dar acesso de leitura e gravação do DevTools ao diretório.

6. Faça suas alterações.

Limitações

• As DevTools não salvam as mudanças feitas na árvore do DOM do painel Elements. Edite o HTML no painel Origens.
• Se você editar o CSS no painel Styles e a origem desse CSS for um arquivo HTML, o DevTools não vai salvar a mudança. Edite o arquivo HTML no painel Origens.

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 repositório local.

Guia "Mudanças"

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

Figura 3. 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 sejam acessíveis para usuários com deficiência visual ou deficiência de visão de cores.

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 computadas do elemento selecionado na árvore DOM no 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 a usuários com deficiência visual ou de visão de cores. 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 utilizável para todos os usuários. Em outras palavras, se o texto for cinza com um plano de fundo branco, será difícil de ler.

Figura 5. Inspeção da proporção 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 (AAA). Se ele tiver apenas uma marca de seleção, isso significa que ele atendeu à proporção mínima de contraste recomendada (AA).

Clique em 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 à proporção de contraste recomendada e as que não atendem. Por exemplo, como a cor cinza na Figura 6 atende às recomendações, todas as cores abaixo da linha branca também atendem a elas.

Figura 6. Seção Contrast Ratio expandida

Recursos relacionados

O painel Audits 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 Audits para testar a acessibilidade.

Novas auditorias

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

Novas auditorias de SEO

Garantir que suas páginas passem em cada uma das auditorias na nova categoria SEO pode ajudar a melhorar suas classificações 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
• Evita redirecionamentos de página
• O documento usa plug-ins
• Compactar CSS
• Compactar JavaScript

O desempenho é 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 do artigo. Saiba mais.

Dica: Se você quer melhorar a performance de carregamento das suas páginas, mas não sabe por onde começar, tente usar o painel Audits. Você fornece um URL, e ele mostra 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 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 vai mais contar para a pontuação de acessibilidade.
• A performance agora é a seção principal nos relatórios

Etapas de código confiáveis com workers e código assíncrono

O Chrome 65 traz atualizações para o botão Step Into ao entrar em código que transmite mensagens entre linhas de execução e código assíncrono. Se você quiser o comportamento de escalonamento anterior, use o novo botão Step .

Como acessar o código que transmite mensagens entre linhas de execução

Quando você entra em um 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 de worker. Depois de entrar na chamada postMessage() na linha de execução principal, as Ferramentas do desenvolvedor são pausadas no gerenciador onmessage na linha de execução do worker. O gerenciador onmessage envia uma mensagem de volta para a linha de execução principal. A entrada na chamada essa pausa as Ferramentas do desenvolvedor na linha de execução principal.

Figura 8. Como acessar o 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, ele mostrava apenas o lado da linha de execução principal do código, como na Figura 9.

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

Como acessar o código assíncrono

Ao entrar em código assíncrono, o DevTools agora assume 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 que leva até esse ponto em segundo plano e, em seguida, pausa na função que é transmitida para setTimeout().

Figura 10. Como acessar o código assíncrono no Chrome 65

Quando você entrava em um código como esse no Chrome 63, o DevTools pausava no código conforme ele era executado cronologicamente, como mostrado na Figura 11.

Figura 11. Como acessar o 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 Começar a analisar o desempenho de execução para se familiarizar com o painel Performance.

Figura 12. Seleção de várias gravações no painel Performance

Bônus: automatize ações das Ferramentas do desenvolvedor 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, está disponível. É possível usar o Puppeteer para automatizar muitas tarefas que antes só estavam disponíveis nas Ferramentas do desenvolvedor, como a captura de 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 conferir um exemplo.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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 ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.