Foi um mês cheio de recursos no Chrome Canary. Leia 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 de conferências com perfis de rede personalizáveis e como aproveitar mais a interface do DevTools com o novo menu principal e melhores dicas de ferramentas.
Melhores problemas de desempenho de culpa: 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 ancoragem 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 de ferramentas nativas do sistema por dicas de ferramentas personalizadas e consistentes com a plataforma.
As novas dicas de ferramentas 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 Network Throttler forem muito restritivas para seus casos de uso e você precisar de uma opção "WiFi de conferência" ou, por nostalgia, quer usar a maneira antiga e emular uma linha de 110 Baud, tenho boas notícias para você. Adicionamos um novo painel de configurações que permite fazer qualquer uma dessas coisas.
Paletas de cores automáticas, do Material e personalizadas
Quer você queira recriar as cores da magia ou trabalhar com uma paleta de cores existente, o seletor de cores aprimorado ajuda a escolher uma paleta de cores 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 encontradas no CSS. Ela é uma ótima opção se você estiver ampliando um site existente.
- Material Design: a paleta do Material Design oferece cores bonitas e é a escolha ideal para iniciar um novo projeto. No momento, você encontra todas as cores primárias, mas em breve vamos adicionar todos os tons.
- Personalizado: é o seu próprio espaço. Para adicionar novas cores, escolha uma no seletor e clique no ícone de adição ao lado da paleta. Reorganize arrastando os itens e clique com o botão direito do mouse para revelar mais opções, como "Remover".
Diga o que você achou e como podemos ampliar a história das cores.
O melhor do resto
- As solicitações feitas usando a API fetch() agora são mostradas no painel de 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. - O Modo de dispositivo e Inspect Element 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