Este foi um mês cheio de recursos no Chrome Canary. Continue lendo 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 para conferências com perfis de rede personalizáveis e como aproveitar ao máximo a interface do DevTools com o novo menu principal e as dicas melhores.
Melhores problemas com o desempenho: detalhes agregados na linha do tempo
Nos sites atuais, usamos cada vez mais beacons, análises, redes sociais, carregamento de fontes e serviços de publicidade de terceiros (às vezes em excesso). Para garantir que isso não aconteça e para dar a você visibilidade do problema, estamos introduzindo detalhes agregados na linha do tempo.
Na guia Detalhes agregados, você pode se concentrar apenas em funções caras ou em toda a árvore de chamadas e, em seguida, detalhar os dados selecionados por domínio, subdomínio ou URLs distintos. Por exemplo, na linha do tempo de um carregamento de página acima, agora é possível atribuir facilmente atrasos 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 encaixe para um novo menu principal dedicado.
Em especial, a base ficou muito mais simples. Em vez de tocar e manter pressionado o ícone anterior, cada posição de encaixe apresenta um ícone próprio.
Além da base, adicionamos acesso rápido à pesquisa de arquivos, 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 os atalhos delas, substituindo as dicas nativas do sistema por dicas personalizadas e consistentes na plataforma.
As novas dicas aparecem muito mais rapidamente e incluem atalhos de teclado (se houver).
Criar perfis de limitação de rede personalizados
Se as opções padrão do Network Throttler forem muito limitadas para seus casos de uso e você precisar de uma opção "Wi-Fi da conferência" ou, por uma questão de nostalgia, quiser ir para a antiga escola e emular uma linha"110 Baud", temos boas notícias. Adicionamos um novo painel de configurações que permite fazer todas essas coisas.
Paletas de cores automáticas, personalizadas e do Material Design
Seja para recriar as cores mágicas ou trabalhar com uma paleta de cores existente, o seletor de cores aprimorado ajuda a escolher uma paleta consistente para seu site.
Ao clicar no pequeno ícone do seletor ao lado da paleta, você pode escolher entre as seguintes opções:
- Cores da página: essa paleta é gerada automaticamente a partir das cores encontradas no seu CSS. Por isso, ela é uma ótima opção se você estiver estendendo um site existente.
- Material Design: a paleta do Material Design (link em inglês) oferece cores incríveis e é a escolha ideal ao iniciar um novo projeto. No momento, você pode encontrar todas as cores primárias, mas vamos incluir todas as tonalidades em breve.
- Personalizado: é seu playground. Escolha uma nova cor no seletor e clique no ícone de adição ao lado da paleta. Reordene-as arrastando-as e clique com o botão direito do mouse para revelar mais opções, como remover.
Conte-nos sua opinião e como podemos ampliar a história de cores.
O melhor do resto
- As solicitações feitas usando a APIfetch() agora são mostradas no painel Rede
- O layout automático do painel garante que, ao redimensionar os painéis do DevTools
, se adaptem às novas restrições de espaço. - Inspecionar elemento e modo de dispositivo tem um conjunto de novos ícones.
- Os atributos no painel DOM agora têm cores diferentes, mesmo quando o nó está em destaque. (Eles eram todos brancos antes.)
- Os elementos ocultos (ativados ao pressionar "h" em um nó DOM selecionado) agora mostram um indicador de círculo cinza à esquerda, e os pontos de interrupção 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 :passar o mouse.
Como sempre, envie sua opinião pelo Twitter ou pelos comentários abaixo e envie bugs para crbug.com/new.
Até o próximo mês!
Paul Bakaus e a equipe do DevTools