Veja o que é necessário saber:
- Melhore o gerenciamento do armazenamento com a API Storage Buckets.
- Há melhorias no painel "Performance" do DevTools.
- Preservação da precisão ao copiar e colar HTML usando a nova opção
unsanitized
da API Async Clipboard. - E há muito mais.
Meu nome é Adriana Jara. Vamos conhecer as novidades para os desenvolvedores no Chrome 122.
API Storage Buckets.
A API Storage Buckets oferece mais granularidade para gerenciar melhor o armazenamento permanente.
Tradicionalmente, quando o usuário fica sem espaço de armazenamento no dispositivo, os dados armazenados com APIs como IndexedDB ou localStorage
são perdidos sem que o usuário possa intervir. Uma maneira de tornar o armazenamento persistente é usando o método persist()
da interface do StorageManager. No entanto, esse método de solicitar que o armazenamento seja persistente é tudo ou nada.
A ideia central da API Storage Buckets é permitir que os sites criem vários buckets de armazenamento, em que o navegador pode optar por excluir cada bucket independentemente de outros buckets. Assim, é possível especificar a priorização de remoção para garantir que os dados mais valiosos não sejam excluídos.Cada bucket de armazenamento pode conter dados associados a APIs de armazenamento estabelecidas, como IndexedDB e CacheStorage.
Acesse Nem todo o armazenamento é criado igual: introdução aos buckets de armazenamento para mais detalhes e exemplos de código para começar a usar buckets do Storage.
Melhorias do DevTools no painel de desempenho
No Chrome 122 DevTools, inclua as seguintes melhorias no painel Performance.
Primeiro, o Cronograma na parte de cima do painel Desempenho agora permite definir a navegação estrutural e navegar entre elas. Para definir uma localização atual, selecione um intervalo na Linha do tempo, passe o cursor sobre ele e clique no botão N ms zoom_in correspondente. Você pode criar várias navegações estruturais aninhadas em sequência. Para navegar entre os níveis de zoom, clique na localização atual correspondente na cadeia na parte de cima da linha do tempo. Assista o próximo vídeo para ver a navegação estrutural em ação.
Além disso, agora há iniciadores de eventos na faixa Main. Por padrão, a faixa Desempenho > Principal mostra setas que conectam os iniciadores e os seguintes eventos que eles causaram.
- Invalidação de estilo ou layout -> Recalcular estilos ou Layout
- Solicitar frame de animação -> Frame de animação disparado
- Solicitar callback inativo -> Callback inativo
- Instalar timer -> Timer disparado
- Criar WebSocket -> Enviar... e Receber handshake de WebSocket ou Destruir WebSocket
Para ver as setas, encontre esse evento no rastro e clique nele.
Confira mais atualizações do DevTools em Novidades do Devtools 122 (em inglês).
Opção unsanitized
da API Async Clipboard
Ao copiar e colar usando a API Async Clipboard, a opção unsanitized
para o método read()
permite que apps e sites recebam HTML sem limpeza. A menos que os sites incluam essa propriedade, a leitura do HTML da área de transferência será limpa.
Por padrão, ao ler tipos MIME text/html
usando a API assíncrona, a limpeza é invocada para remover o conteúdo da marcação HTML devido a questões de segurança, e os estilos são inline no HTML resultante.
Isso leva a um payload HTML grande e à perda de fidelidade do conteúdo HTML quando lido por desenvolvedores da Web ou aplicativos para dispositivos móveis.
Confira a diferença na saída no exemplo abaixo.
Entrada:
<style>p { color: blue; }</style><p>Hello, World!</p>'
Limpo (padrão):
<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>
Com a opção unsanitized
:
<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>
Acesse Como desbloquear o acesso à área de transferência para aprender os conceitos básicos da API Clipboard.
E muito mais.
Claro, há muito mais.
- No CSS, as consultas de contêiner com recursos sem suporte nunca são correspondentes. Por exemplo, a consulta a seguir nunca será correspondida devido ao recurso desconhecido:
@container (width > 0px) or (unknown) {}
dataTransfer.clearData() não afeta objetos File, apenas exclui objetos do tipo de texto.
Com o
drawingBufferStorage
do WebGL, você pode evitar cópias extras ao converter a renderização para o formato de pixel de buffer de desenho padrão e desenhar conteúdo com mais de 8 bits de precisão.
Leia mais
Isso aborda apenas alguns destaques importantes. Acesse os links a seguir para ver outras mudanças no Chrome 122.
- Novidades no Chrome DevTools (122)
- Descontinuações e remoções do Chrome 122
- Atualizações do ChromeStatus.com para o Chrome 122
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Inscrições
Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.
Adriana Jara, Soja! Assim que o Chrome 123 for lançado, estarei aqui para contar as novidades do Chrome.