Olá, pessoal. Na edição anterior do DevTools Digest, analisamos as poderosas pilhas de chamadas assíncronas e algumas outras. Nesta edição, vamos conferir uma filtragem aprimorada do painel de rede (com preenchimento automático), recursos de edição com conteúdo do Shadow DOM, atualizações do CodeMirror 4 e muito mais.
Filtragem do painel de rede
Agora é possível filtrar recursos por determinados campos, como "Domínio". Este é um formato de filtro: Domain:website.com. Além da filtragem, você também recebe sugestões de preenchimento automático para valores de filtro válidos, que são atualizados em tempo real à medida que você digita sua consulta. Isso pode ser útil quando você precisa encontrar todos os recursos fornecidos por um domínio específico. [crbubg.com/258421]
Editar conteúdo do shadow DOM
As DevTools sempre puderam editar HTMLs normais no painel "Elements". Agora, esses recursos se estendem aos elementos que fazem parte de um DOM shadow. [crbug.com/348991]
Fazer upgrade para o CodeMirror 4.0
O CodeMirror, o editor de texto baseado em JavaScript usado como parte do painel de fontes, foi atualizado para a versão 4. Com isso, várias funcionalidades novas foram adicionadas. crbug.com/356878]
Pesquisa rápida para uma propriedade CSS
Agora você pode pesquisar nomes de propriedades, valores ou seletores de regras na nova caixa de pesquisa do painel "Estilo". Os resultados são destacados em tempo real conforme você digita a consulta. [crbug.com/278852]
Carimbos de data/hora ao lado das mensagens do console
Ao registrar mensagens em uma sucessão rápida, pode ser útil saber o horário exato em que uma mensagem foi registrada. Você pode ativar isso usando os experimentos do DevTools. [crbug.com/131714]
Detalhamento das estatísticas de memória para snapshots de heap
Ao visualizar um instantâneo de heap gravado, observe o gráfico de setores de estatísticas, que mostra uma visão geral visual e codificada por cores sobre qual aspecto do JavaScript está consumindo mais memória. Atualmente, esse é um recurso experimental. Ative as "Estatísticas do resumo do Heap" para testá-lo. [crbug.com/346335]
Conferir a origem original de um console.log, não a versão envolta
Você provavelmente tem uma função de wrapper console.log, mas, infelizmente, no console, todas as mensagens vêm de algo como util.js:46. Agora você pode usar o DevTools para resolver seus locais originais. Insira o arquivo que envolve as mensagens de registro do console na caixa de entrada "Pular a depuração de origens com nomes específicos" para que as ferramentas de análise de código o encapsulem e mostrem a origem real de uma instrução de registro. [crbug.com/231007]
Algumas adições pequenas, mas poderosas
Atualize o painel "Event Listeners" no painel "Elements" depois de adicionar ou remover dinamicamente listeners de eventos JavaScript. [crbug.com/341044]
Use
Ctrl+para focar na entrada do console. Isso pode ser útil para um fluxo de trabalho exclusivo para teclado nas Ferramentas do desenvolvedor. [crbug.com/144943]As sugestões de preenchimento automático de estilo de borda para valores (pontilhada, tracejada, dupla, entalhada) foram atualizadas para corresponder à especificação. [crbug.com/349998]
O botão Restaurar padrões e atualizar **foi adicionado ao painel de configurações e faz exatamente o que diz. [crbug.com/135451]
Atualmente, esse é um recurso experimental. Você pode testar a opção Anexar à esquerda para descobrir se ela é adequada para seu fluxo de trabalho. Os outros modos de layout são acoplar à janela principal (direita ou inferior) e desacoplar para uma janela separada. [crbug.com/134282]
"wheel" agora é oferecido como um ponto de interrupção de listener de eventos, além dos eventos normais de clique, mousemove, mousedown etc. [crbug.com/347562]
Isso é tudo por enquanto. Valeu por ler!