Vários recursos atualizados entraram no Chrome DevTools recentemente alguns, alguns grandes. Vamos começar com as atualizações do painel Elemento e depois abordar o Console, a Linha do tempo e muito mais.
Cópia das regras de estilo desativada
A cópia de regras CSS inteiras no painel "Estilos" agora inclui os estilos que você desativou. Elas existirão na sua área de transferência conforme os comentários. [crbug.com/316532, link em inglês]
Copiar como caminho CSS
"Copiar como caminho CSS" agora está disponível como um item de menu para nós DOM no painel "Elementos" (semelhante ao item de menu "Copiar XPath").
A geração de seletores de CSS não precisa se limitar às suas folhas de estilo/JavaScript. Eles também podem ser alternativas para estratégias de localização nos testes do WebDriver. [crbug.com/277286]
Conferir estilos de elementos do Shadow DOM
Os elementos filhos de uma raiz paralela podem ter os estilos inspecionados. [crbug.com/279390].
O copy() do console funciona com objetos
O método copy() da API Command Line agora funciona com objetos. Teste copy({foo:'bar'}) no painel do console e observe como uma versão stringificada e formatada do objeto agora está na área de transferência. [crbug.com/289348, link em inglês]
Filtro de regex para o console
Filtra as mensagens do console usando expressões regulares no painel do console. crbug.com/318308]
Remova listeners de eventos com facilidade
Teste getEventListeners(document).mousewheel[0]; no painel do console para recuperar o primeiro listener de eventos da roda do mouse no documento. Depois disso, tente usar $_.remove() para remover esse listener de eventos ($_ = valor da expressão avaliada mais recentemente). crbug.com/309524]
Remoção de avisos de CSS
Os avisos "Valor de propriedade CSS inválido" foram removidos. Estamos trabalhando continuamente para tornar a implementação mais robusta contra CSSs reais, incluindo invasões no navegador. crbug.com/309982]
Operações da linha do tempo resumidas em um gráfico de pizza
O painel Linha do tempo agora contém um gráfico de pizza no painel "Detalhes", que mostra visualmente a origem dos custos de renderização. Isso ajuda você a identificar os gargalos rapidamente.
Você descobrirá que grande parte das informações que eram exibidas em pop-ups agora foram promovidas a um painel próprio. Para acessar, inicie uma gravação da linha do tempo e selecione um frame, anote o novo painel "Detalhes", que contém um gráfico de pizza. Na visualização "Frames", você vai receber estatísticas interessantes, como a média de QPS (1000ms/frame duration) dos frames selecionados. [crbug.com/247786, link em inglês]
Detalhes do evento de redimensionamento de imagem
Os eventos de redimensionamento e decodificação de imagens no painel Linha do tempo agora contêm um link para o nó DOM no painel Elementos.
O link de URL da imagem leva você ao recurso correspondente no painel Recursos. crbug.com/244159, link em inglês]
Frames da GPU
Os frames que ocorrem na GPU agora são exibidos no topo, acima dos frames na linha de execução principal. crbug.com/305863]
Interromper em listeners popstate
'popstate' agora está disponível como um ponto de interrupção de listener de eventos na barra lateral do painel "Origens". [crbug.com/88112, link em inglês]
Configurações de renderização disponíveis na gaveta
Abrir a gaveta agora apresenta vários painéis, um deles é o painel de renderização. Use-o para mostrar retângulos de pintura, medidor de QPS etc. Isso é ativado por padrão em Configurações > "Mostrar visualização 'Renderização' na gaveta do console"
Copiar imagem como URL de dados
Agora o conteúdo dos recursos de imagem no painel "Recursos" pode ser copiado como um URI de dados (data:image/png;base64,iVBO...).
Para testar, encontre o recurso de imagem em Frames > [Recurso] > Imagens e clique com o botão direito do mouse na visualização da imagem para acessar o menu de contexto. Depois, selecione "Copiar imagem como URL de dados". crbug.com/321132]
Filtragem de URI de dados
Se você nunca pensou que deveriam pertencer, os URIs de dados agora podem ser filtrados da guia "Rede". Selecione o ícone de filtro
Correção de bugs do Network Timing
Lamentamos se você viu sua imagem levar 300.000 anos para fazer o download. ;) Esses tempos incorretos nos recursos de rede foram corrigidos. crbug.com/309570.
O comportamento de gravação de rede tem mais controle
O comportamento de gravação da rede é um pouco diferente. Primeiro, o botão de gravação age como esperado da linha do tempo ou de um perfil de CPU. E como era de se esperar, se você recarregar a página enquanto o DevTools estiver aberto, a gravação de rede será iniciada automaticamente. Ele será desativado, então ative essa opção se quiser capturar a atividade da rede após o carregamento da página. Isso facilita a visualização da hierarquia, sem que as solicitações de rede interruptivas distorçam os resultados. crbug.com/325878]
Temas do DevTools agora disponíveis por meio de extensões
As folhas de estilo do usuário agora estão disponíveis nos experimentos do DevTools (caixa de seleção: "Permitir temas personalizados de interface"), permitindo que uma extensão do Chrome aplique estilos personalizados ao DevTools. Consulte um exemplo em Extensão de tema do DevTools (crbug. com/318566).
Essa foi sua edição do resumo do DevTools. Se ainda não fez isso, confira a edição de novembro.