Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Latest commit

 

History

History
145 lines (109 loc) · 11.8 KB

index.md

File metadata and controls

145 lines (109 loc) · 11.8 KB
Raw
layout title authors date updated description hero alt tags
layouts/blog-post.njk
O que há de novo no DevTools (Chrome 100)
jecelynyeen
2022-03-08
2022-03-08
Visualize e edite @supports em rules, renomeie e personalize o seletor de gravação e muito mais.
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ZKwQHEcXXjFvH7hF6UJk.jpg
new-in-devtools
devtools
chrome-100

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

{% Partial 'devtools/banner.md' %}

{% YouTube id='DAD72grzDDc' %}

Chrome 100 {: #m100 }

Aqui está a 100ª versão do Chrome! O Chrome DevTools continuará a fornecer ferramentas confiáveis para os desenvolvedores criarem na web. Reserve um momento para clicar na guia O que há de novo para comemorar os marcos.

Como de costume, você pode assistir ao último vídeo What's New in DevTools clicando na imagem.

{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/u8sn7ubuxjJoyPgbfNJs.mp4", class="screenshot", autoplay=true, controls=true, loop=true, muted=true %}

Visualize e edite @supports em rules no painel Estilos {: #supports }

Agora você pode visualizar e editar as at-rules do CSS @supports no painel Estilos. Essas alterações facilitam a experiência com as rules em tempo real.

Abra esta página de demonstração, inspecione o elemento <div class=”box”>, visualize as rules do @supports no painel Estilos. Clique na declaração da rule para editá-la.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vnokX5Hswmbvlb5weusO.png", alt="Visualize e edite @supports em rules", width="800", height="502" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/5c17e46caa5be1d8c769146baecc91e0d740f7fd #}

Issues relacionadas: 1222574, 1222573

Melhorias no painel Gravação {: #recorder }

Suporte a seletores comuns por padrão {: #selector }

Ao determinar um seletor exclusivo durante a gravação, o painel Gravação agora seleciona automaticamente elementos com os seguintes atributos:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

Os atributos acima são seletores comuns usados na automação de teste.

Por exemplo, inicie uma nova gravação com esta página de demonstração. Preencha um endereço de e-mail e observe o valor do seletor.

Como o elemento email tem data-testid definido, ele é usado como seletor automaticamente em vez dos atributos id ou class.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4diI81kpscXznWLrB6a9.png", alt="Suporte a seletores comuns por padrão", width="800", height="585" %}

Personalize o seletor de gravação {: #customize-selector }

Você pode personalizar o seletor de uma gravação se não estiver usando os seletores comuns.

Por exemplo, esta página de demonstração usa o atributo data-automate como seletor. iniciar uma nova gravação e digite data-automate como atributo seletor. Preencha um endereço de e-mail e observe o valor do seletor ([data-automate=email-address]).

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PPPt9tOC2ZEz1l9F9AK.png", alt="Personalização do seletor de gravação", width="800", height="524" %}

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/X8r52vWEu6aC8QHFuknp.png", alt="O resultado da seleção do seletor personalizado", width="800", height="579" %}

Renomeação de gravação {: #recorder-rename }

Agora você pode renomear uma gravação no painel Gravador com o botão de edição (ícone de lápis) ao lado do título da gravação.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/Pn9Xsrq9lnStmtjpe0jt.png", alt="Renomeação de gravação", width="800", height="502" %}

Visualização de propriedades de classe/função ao passar o mouse {: #properties }

Agora você pode passar o mouse sobre uma classe ou função no painel Sources durante a depuração para visualizar as suas propriedades. Anteriormente, ele mostrava apenas o nome da função e um link para sua localização no código-fonte.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/BZzL6QMheyd31VGqhA8W.png", alt="Visualização de propriedades de classe/função ao passar o mouse", width="800", height="502" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0a585b3883ad39f2f83fa5ab9c7731270d3a2974 ​#} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/96fb7872ce01eb3fde267e39987a82ce3d3f3e21 #}

Issue relacionada: 1049947

Quadros parcialmente apresentados no painel Desempenho {: #perf }

A gravação de desempenho agora exibe uma nova categoria de quadro "Quadros parcialmente apresentados" na linha do tempo Frames.

Anteriormente, a linha do tempo Frames visualizava todos os frames com atraso na main-thread como "frames descartados". No entanto, há casos em que alguns quadros ainda podem produzir atualizações visuais (por exemplo, rolagem) conduzidas pela compositor thread.

Isso leva à confusão do usuário porque as capturas de tela desses “quadros descartados” ainda refletem atualizações visuais.

O novo "Quadros parcialmente apresentados" visa indicar de forma mais intuitiva que, embora alguns conteúdos não sejam apresentados em tempo hábil no quadro, o problema não é tão grave a ponto de bloquear totalmente as atualizações visuais.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QcqjnFhMz1Bxd5dkmduj.png", alt="Quadros parcialmente apresentados no painel Desempenho", width="800", height="531" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/a06c2e7c1abeb92be9cfc6b3bf9d6edf6d742e01 #}

Issue relacionada: 1261130

Destaques diversos {: #misc }

Estas são algumas correções dignas de nota nesta versão:

  • Strings de agente do usuário do iPhone atualizadas para dispositivos emulados. Todas as versões do iPhone após a 5 têm uma string user-agent com o iPhone OS 13_2_3. (1289553)
  • Agora você pode salvar snippet diretamente como um arquivo JavaScript. Anteriormente, você precisava anexar a extensão de arquivo .js manualmente. (1137218)
  • O painel Sources agora exibe corretamente os nomes das variáveis de escopo ao depurar com o mapa de origem. Anteriormente, o painel Sources exibia nomes de variáveis de escopo reduzidos, apesar do source map ser fornecido. (1294682)
  • O painel Sources agora restaura a posição de rolagem corretamente no carregamento da página. Anteriormente, a posição não era restaurada corretamente causando transtornos na depuração. (1294422)

{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}