Resumo do DevTools - Reordenação de guias, Console em 2 e listeners de eventos de framework

Paul bakaus
Paul Bakaus

Reorganize as guias do DevTools da melhor forma para você. Veja exatamente onde os eventos da estrutura estavam vinculados e bloqueie solicitações de rede para conferir quais scripts de terceiros atrasam você.

Melhor navegação no painel: console sobre o 2, reordenação de guias e sublinhados legais

Depois de investigar quais áreas do DevTools são mais usadas, ficou claro que o painel do Console em tela cheia não merecia a última posição na barra de guias principal. Como o segundo painel mais usado, agora é a segunda guia. Isso é especialmente importante em resoluções mais baixas, quando não é possível mostrar todas as guias de uma vez.

Mas, olha, nós entendemos. A ordem clássica faz parte da sua memória muscular e você ficará tonto por um tempo. Ou talvez, ofegante, você simplesmente odeia o console de tela cheia! Não se preocupe, nós temos a solução. Agora as guias podem ser reordenadas arrastando-as desta forma:

As mudanças feitas na barra de guias persistem e ela funciona com guias nativas e guias fornecidas por extensões. E, como bônus, colocamos um sublinhado suave e animado. Porque somos bons assim.

Suporte a listeners de eventos de framework

Eventos criados por frameworks do JS, como jQuery, às vezes têm sido um problema ao trabalhar com o DevTools. Isso ocorre porque a maioria das estruturas envolve os eventos DOM nativos na API de eventos personalizados. Assim, observar o listener de eventos não revela muito sobre o que está acontecendo:

Listeners de framework desativados

Mas com a nova opção "Framework Listeners" na guia "Listener de eventos", o DevTools fica ciente da parte de encapsulamento da estrutura e a resolve automaticamente. Os eventos vinculados por frameworks se parecem e se comportam exatamente como os correspondentes nativos, mostrando onde eles estão realmente vinculados:

Listeners de framework ativados

Os outros melhores

  • Os formatadores de objetos personalizados permitem que linguagens transcompiladas, como CoffeeScript, formatem melhor os objetos no Console do DevTools.
  • A linha do tempo tem uma nova caixa de diálogo com uma aparência melhor durante a gravação que mostra rapidamente o status, o tempo e o uso do buffer.

    Dica sobre o cronograma.
  • Na mesma linha, o painel Network mostra uma dica útil quando estiver vazio agora:

    Dica de rede.
  • Agora você pode filtrar por conteúdo misto no painel Network usando a entrada de filtro e defini-la como mixed-content:displayed


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 de DevTools