Olá, pessoal. Na última edição do resumo do DevTools, 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". Um formato de filtro é este: 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 conforme você digita a 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 Ferramentas do desenvolvedor sempre puderam editar HTMLs normais no painel "Elementos". 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. Várias novas funcionalidades foram adicionadas como resultado disso. crbug.com/356878]
Pesquisa rápida de uma propriedade CSS
Agora é possível 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 essa opção nas experiências das Ferramentas para desenvolvedores. [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 "Estatísticas de resumo do Heap" para testá-lo. [crbug.com/346335]
Conferir a origem original de um console.log, não a versão combinada
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 passagem por fontes com nomes específicos" para que os DevTools o encapsulem e mostrem a verdadeira origem de uma instrução de registro. [crbug.com/231007]
Algumas adições pequenas, mas poderosas
Atualize o painel "Event Listeners" no painel de elementos depois de adicionar ou remover dinamicamente listeners de eventos JavaScript. [crbug.com/341044]
Use
Ctrl+para ganhar foco 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 fixar na janela principal (direita ou inferior) e desafixar para uma janela separada. [crbug.com/134282]
"wheel" agora é oferecido como um ponto de interrupção do listener de eventos, além dos eventos normais de clique, movimento do mouse, pressionamento do mouse etc. [crbug.com/347562]
Isso é tudo por enquanto. Agradecemos a atenção.