Olá a todos. Na última edição do resumo do DevTools, conferimos as poderosas pilhas de chamadas assíncronas e outras. Nesta edição, veremos 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 atendidos por um domínio específico. [crbubg.com/258421]
Editar conteúdo do Shadow DOM
O DevTools sempre conseguiu editar o HTML normal no painel Elementos. Esses recursos agora se estendem aos elementos que fazem parte de um Shadow DOM. [crbug.com/348991].
Fazer upgrade para o CodeMirror 4.0
O CodeMirror, o editor de texto baseado em JavaScript usado como parte do painel Origens foi atualizado para a versão 4. Como resultado, foram adicionadas várias funcionalidades novas (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 "Estilos". Os resultados são destacados em tempo real conforme você digita sua consulta. [crbug.com/278852, link em inglês]
Carimbos de data/hora ao lado das mensagens do console
Ao registrar mensagens em uma sucessão rápida, pode ser útil verificar a hora exata em que uma mensagem é registrada. É possível ativar isso nos experimentos do DevTools. [crbug.com/131714, link em inglês]
Detalhamento das estatísticas de memória para snapshots de heap
Ao visualizar um instantâneo da pilha gravado, observe o gráfico de pizza que fornece uma visão geral visual codificada por cores sobre qual aspecto do JavaScript está consumindo mais memória. Atualmente um recurso experimental, ative "Estatísticas de snapshot de heap" para testá-lo. [crbug.com/346335]
Conferir a origem de um console.log, não a versão unida
Você provavelmente tem uma função wrapper console.log, mas, infelizmente, no console todas as suas mensagens vêm de algo como util.js:46. Agora o DevTools pode resolver seus locais originais. Insira o arquivo que une as mensagens de registro do console na caixa de entrada “Skip stepping through sources with particular names” para que o DevTools o oculte e mostre a verdadeira fonte de um log statement. [crbug.com/231007, link em inglês]
Mais algumas adições pequenas, mas poderosas
Atualize o painel "Listeners de eventos" no painel "Elementos" depois de adicionar ou remover listeners de eventos JavaScript de forma dinâmica. [crbug.com/341044, link em inglês]
Use
Ctrl+para focar a entrada do console. Isso pode ser útil para um fluxo de trabalho somente para teclado no DevTools. [crbug.com/144943, link em inglês]As sugestões de preenchimento automático com estilo de borda para valores (pontilhado, tracejado, duplo, sulco) foram atualizadas para corresponder à especificação. [crbug.com/349998]
O botão Restaurar padrões e atualizar **foi adicionado ao painel "Configurações", que faz exatamente o que o nome diz. [crbug.com/135451, link em inglês]
Atualmente, um recurso experimental, é possível testar o dock to left para descobrir a adequação dele ao seu fluxo de trabalho. Os outros modos de layout são fixados na janela principal (à direita ou abaixo) e desencaixados em uma janela separada. [crbug.com/134282, link em inglês]
A "wheel" agora é oferecida como um ponto de interrupção do listener de eventos, além dos eventos comuns de clique, mousemove, mousedown etc. [crbug.com/347562, link em inglês]
Isso é tudo por enquanto. Agradecemos a leitura.