Recentemente, vários recursos atualizados foram adicionados às Ferramentas do desenvolvedor do Chrome, alguns pequenos e outros grandes. Vamos começar com as atualizações do painel de elementos e depois falar sobre o console, a linha do tempo e muito mais.
As regras de estilo desativadas são copiadas como comentários.
A cópia de regras CSS inteiras no painel "Estilos" agora inclui estilos desativados, que vão existir na sua área de transferência como comentários. [crbug.com/316532]
Copiar como caminho CSS
A opção "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 folhas de estilo/JavaScript. Ela também pode ser uma alternativa para estratégias de localizador em testes do WebDriver. [crbug.com/277286]
Conferir os estilos dos elementos do shadow DOM
Os estilos dos elementos filhos de uma raiz de sombra agora podem ser inspecionados. [crbug.com/279390]
A função copy() do console funciona para objetos
O método copy() da API Command Line agora funciona para objetos. Tente usar copy({foo:'bar'}) no painel do console e observe como uma versão formatada e convertida em string do objeto agora está na sua área de transferência. [crbug.com/289348]
Filtro de expressão regular para o console
Filtrar mensagens do console usando expressões regulares no painel do console. crbug.com/318308]
Remover listeners de eventos com facilidade
Tente usar getEventListeners(document).mousewheel[0]; no painel do console para recuperar o primeiro listener de evento da roda do mouse no documento. Continuando com isso, tente $_.remove() para remover esse listener de eventos ($_ = valor da expressão avaliada mais recentemente). crbug.com/309524]
Remoção de avisos do CSS
Os avisos do tipo Valor de propriedade CSS inválido que você pode ter visto foram removidos. Há esforços contínuos para tornar a implementação mais robusta contra CSS do mundo real, incluindo hacks de navegador. crbug.com/309982]
Operações da linha do tempo resumidas em um gráfico de pizza
O painel "Timeline" agora contém um gráfico de pizza no painel "Details", que mostra visualmente a origem dos custos de renderização. Isso ajuda a identificar os gargalos rapidamente.
Muitas das informações que costumavam ser exibidas em pop-ups foram promovidas para um painel próprio. Para conferir, inicie uma gravação da linha do tempo e selecione um frame. Observe o novo painel "Detalhes", que contém um gráfico de pizza. Na visualização "Frames", você vai encontrar estatísticas interessantes, como a taxa de frames média (1000ms/frame duration) para os frames selecionados. [crbug.com/247786]
Detalhes do evento de redimensionamento de imagem
Os eventos de redimensionamento e decodificação de imagens no painel da Linha do tempo agora contêm um link para o nó DOM no painel "Elementos".
O link do URL da imagem leva você ao recurso correspondente no painel de recursos. crbug.com/244159]
Frames da GPU
Os frames que ocorrem na GPU agora são mostrados na parte de cima, acima dos frames na linha de execução principal. crbug.com/305863]
Interrupção em listeners de popstate
'popstate' agora está disponível como um ponto de interrupção do listener de eventos no painel de navegação do painel "Origens". [crbug.com/88112]
Configurações de renderização disponíveis na gaveta
A abertura da 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. Ele é ativado por padrão em "Configurações > Mostrar a visualização "Rendering" na gaveta do console".
Copiar imagem como URL de dados
O conteúdo dos recursos de imagem no painel "Resources" agora pode ser copiado como um URI de dados (data:image/png;base64,iVBO...).
Para testar isso, encontre o recurso de imagem em Frames > [Resource] > Images e clique com o botão direito do mouse na visualização da imagem para acessar o menu de contexto e selecione "Copiar imagem como URL de dados". crbug.com/321132]
Filtragem de URI de dados
Agora é possível filtrar URIs de dados na guia "Rede". Selecione o ícone de filtro
Correção de bugs de sincronização de rede
Se você notou que sua imagem levou 300.000 anos para ser transferida, pedimos desculpas. ;) Esses tempos incorretos para recursos de rede foram corrigidos. crbug.com/309570]
O comportamento de gravação de rede tem mais controle
O comportamento da rede de gravação é um pouco diferente. Primeiro, o botão de gravação funciona como você esperaria da linha do tempo ou de um perfil de CPU. Se você atualizar a página enquanto o DevTools está aberto, a gravação de rede vai começar automaticamente. Ela será desativada. Se você quiser capturar a atividade de rede após o carregamento da página, ative-a. Isso facilita a visualização da hierarquia sem que as solicitações de rede mais recentes distorçam os resultados. crbug.com/325878]
Os temas do DevTools agora estão disponíveis nas extensões
As folhas de estilo do usuário agora estão disponíveis nos experimentos do DevTools (caixa de seleção: "Permitir temas de IU personalizados"), o que permite que uma extensão do Chrome aplique estilos personalizados ao DevTools. Consulte Exemplo de extensão de tema do DevTools para conferir um exemplo. crbug.com/318566]
É isso por hoje. Confira a edição de novembro do resumo do DevTools.