Foi um mês cheio de recursos no Chrome Canary. Continue a leitura para saber quais scripts de terceiros causam problemas de desempenho no seu site com os detalhes agregados na linha do tempo, como escolher cores consistentes com a nova paleta de cores, como simular o Wi-Fi da conferência com perfis de rede personalizáveis e como aproveitar melhor a interface do DevTools com o novo menu principal e melhores dicas de ferramentas.
Melhor culpa de problemas de desempenho: detalhes agregados na Linha do tempo
Nos sites atuais, usamos cada vez mais beacons, análises, serviços de mídias sociais, carregamento de fontes e publicidade de terceiros, às vezes um pouco demais. Para evitar isso e dar visibilidade ao problema, estamos introduzindo detalhes agregados na linha do tempo.
Na guia Detalhes agregados, você pode se concentrar apenas em funções custosas ou na árvore de chamadas inteira e, em seguida, detalhar os dados selecionados por domínio, subdomínio ou URLs distintos. Por exemplo, na linha do tempo acima de um carregamento de página, agora é possível atribuir facilmente lentidão a scripts de terceiros provenientes de domínios como facebook.net ou twitter.com.
Novo menu principal dedicado
Para organizar a barra de ferramentas principal, movemos a gaveta, as configurações e os ícones de acoplamento para um novo menu principal dedicado.
A ancoragem ficou muito mais simples. Em vez de pressionar o ícone anterior por muito tempo, cada posição de encaixe tem o próprio ícone.
Além da ancoragem, adicionamos a pesquisa de arquivos de acesso rápido, atalhos e ajuda, que leva à nossa nova página inicial.
Descubra o DevTools com dicas aprimoradas
Temos muitos botões no DevTools, e sabemos que nem todos são autoexplicativos. Agora ficou mais fácil descobrir ações e atalhos, substituindo as dicas nativas do sistema por dicas personalizadas e consistentes com a plataforma.
As novas dicas aparecem muito mais rapidamente e incluem atalhos de teclado (se houver um).
Criar perfis de limitação de rede personalizados
Se as opções padrão do limitador de rede forem muito restritivas para seus casos de uso e você precisar de uma opção de "WiFi de conferência" ou, por nostalgia, quer voltar à velha escola e emular uma linha de 110 Baud, tenho boas notícias para você. Adicionamos um novo painel de configurações que permite fazer tudo isso.
Paletas de cores automáticas, do Material e personalizadas
Seja para recriar as cores mágicas ou trabalhar com uma paleta de cores existente, o seletor de cores aprimorado ajudará você a escolher uma paleta consistente para seu site.
Ao clicar no pequeno ícone de troca ao lado da paleta, você pode escolher entre as seguintes opções:
- Cores da página: essa paleta é gerada automaticamente com base nas cores que encontramos no seu CSS, o que a torna uma ótima opção para expandir um site existente.
- Material Design: a paleta do Material Design oferece cores bonitas e é a escolha ideal para começar um novo projeto. No momento, você encontra todas as cores primárias, mas em breve vamos adicionar todos os tons.
- Personalizado: seu próprio playground. Para adicionar novas cores, escolha uma no seletor e clique no ícone de adição ao lado da paleta. Reordene-as arrastando-as e clicando com o botão direito do mouse para revelar mais opções, como remover.
Diga o que você pensa e como podemos ampliar a história das cores.
Os melhores
- As solicitações feitas usando a APIfetch() agora aparecem no painel Rede
- O layout automático de painéis garante que, quando você redimensionar os painéis da
Ferramentas do desenvolvedor
, eles se adaptarão às novas restrições de espaço. - A opção Inspecionar elementos e o Modo dispositivo tem um conjunto de novos ícones.
- Os atributos no painel DOM agora têm cores diferentes, mesmo quando o nó está destacado. (Antes, eles eram todos brancos.)
- Os elementos ocultos (ativados pressionando "h" em um nó DOM selecionado) agora mostram um indicador de círculo cinza à esquerda, e os pontos de interrupção do DOM fazem o mesmo com um círculo azul. Isso é análogo aos indicadores laranja que já temos para forçar um estado de elemento como :hover.
Como sempre, deixe sua opinião no Twitter ou nos comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools