Novidades do DevTools (Chrome 65)

Kayce Basques

Os novos recursos que chegarão ao 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 Substituições.

   

   Figura 2. A 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 visualização, clique em Permitir para dar acesso de leitura e gravação do DevTools ao diretório.

6. Faça suas alterações.

Limitações

• O DevTools não salva 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ê fizer uma mudança no DevTools, ela também será salva no repositório local.

Guia "Mudanças"

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

Figura 3. Na 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 possam ser acessados por usuários com deficiência visual ou pela 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.

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 taxa de contraste dos elementos de texto torna seu site mais acessível a usuários com dificuldades de visão subnormal ou deficiências 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. 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 (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 Show More 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 ao A11ycast abaixo para saber como usar o painel Auditorias para testar a acessibilidade.

Novas auditorias

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

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 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 é 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 o desempenho 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 diferentes 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

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 ao entrar em códigos que transmitem 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 .

Entrar no 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 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. 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 só mostrava o lado da linha de execução principal do código, como mostrado na Figura 9.

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

Como entrar no 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 a 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ê 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.

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. Como selecionar entre 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 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();
})();

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 Como usar recursos do DevTools sem abrir o DevTools para conferir um exemplo.

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu 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.
• Para informar um problema do DevTools, use more_vert em Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet em @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.