Novidades do DevTools (Chrome 65)

Os novos recursos que chegar�o ao 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
• O 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.