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ê atualizava 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 em carregamentos de página usando substituições locais.

Figura 1. Manter uma alteração de CSS em carregamentos de página usando Substituições locais

Como funciona:

  • Especifique 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ê recarrega a página, o DevTools exibe 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.

    A guia "Substituições"

    Figura 2. A guia Substituições

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

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

  5. Na parte de cima da janela de visualização, clique em Allow para conceder 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 Origens.
  • Se você editar CSS no painel Styles 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 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.

A guia "Mudanças"

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

A guia "Mudanças"

Figura 3. A guia Alterações

Novas ferramentas de acessibilidade

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

Painel de acessibilidade

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

Painel "Acessibilidade"

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

Confira o quadro A11ycast de Rob Dodson sobre a rotulagem abaixo para conferir 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 percepção de cor. Consulte Cor e contraste para saber mais sobre como a taxa de contraste afeta a acessibilidade.

Melhorar o contraste de cor dos elementos de texto torna seu site mais acessível para todos os usuários. Em outras palavras, se seu texto for cinza com um fundo branco, será difícil para qualquer pessoa ler.

Inspeção da taxa de contraste do elemento H1 destacado.

Figura 5. Como inspecionar 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 ele tivesse apenas uma marca de seleção, significa que ela atende à taxa de contraste mínima recomendada (AA).

Clique em Mostrar mais 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.

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

Figura 6. A seção Contrast Ratio expandida

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 aprender a usar o painel Auditorias para testar a acessibilidade.

Novas auditorias

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

Novas auditorias de SEO

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

A nova categoria de SEO de auditorias.

Figura 7. A nova categoria de auditorias de SEO

Novas auditorias de desempenho

O Chrome 65 também inclui 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

Perf é 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, acessaram 34% mais páginas, as taxas de rejeição caíram 24% e a receita aumentou em 25% por visualização 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, use o painel Auditorias. Você fornece um URL a ela, e ele fornece um relatório detalhado sobre várias maneiras diferentes de melhorar a página. Começar.

Outras atualizações

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

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

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

Quando você entra no código que transmite mensagens entre linhas de execução, o DevTools agora 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 de worker. Depois de entrar na chamada postMessage() na linha de execução principal, o DevTools pausa no gerenciador onmessage na linha de execução de worker. O próprio gerenciador onmessage publica uma mensagem de volta na linha de execução principal. Entrar nessa chamada pausa o DevTools de volta na linha de execução principal.

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

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

Quando você entrou 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.

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

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

Como adotar o código assíncrono

Ao entrar no código assíncrono, o DevTools agora supõe que você quer pausar no 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 a esse ponto em segundo plano e depois pausa na função transmitida para setTimeout().

Usar o código assíncrono no Chrome 65.

Figura 10. Usar 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 era executado cronologicamente, como mostrado na Figura 11.

Usar o código assíncrono no Chrome 63.

Figura 11. Uso do 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 do ambiente de execução para se familiarizar com o painel Desempenho.

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

Figura 12. 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 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 somente via 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();
})();

Ele 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.

Também é possível usar o Puppeteer para expor recursos do DevTools durante a navegação sem jamais abri-lo explicitamente. 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

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

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59