Atualizações da F12 no Developer Channel

O Internet Explorer Developer Channel apresenta uma série de atualizações interessantes para as ferramentas de desenvolvedor F12, grandes e pequenas. Há downloads disponíveis para clientes do Windows 8.1 e do Windows 7 SP1 que executam o Internet Explorer 11. Experimente os recursos detalhados abaixo e envie comentários por meio do Microsoft Connect.

Quais são as novidades?

Vejamos as novidades gerais da interface de usuário das ferramentas F12, e depois as atualizações por ferramenta.

• Alterações na interface de usuário da F12
• Console
• Explorador do DOM
• Depurador
• Emulação
• Capacidade de Resposta de IU
• Memória

Alterações na interface de usuário da F12

• Novos ícones e notificações

  Os ícones para as ferramentas Memória e Criador de Perfil mudaram.

  Agora há indicadores na barra de ícones para: erros no Console, alterações nas configurações de Emulação e sessões de criação de perfil ativas nas ferramentas Memória, Criador de Perfil e Capacidade de Resposta de IU. A imagem abaixo mostra os novos ícones com notificações nos ícones das ferramentas Console e Memória, indicando que há dois erros de Console exibidos e que uma sessão de criação de perfil da Memória está em andamento.

  

• Navegação de superconjunto F6 dentro de ferramentas

  Usar F6 é como usar a tecla tab para navegar por uma ferramenta, mas ela "tabula" por entre um grupo selecionado dos elementos mais comumente usados em um painel de ferramentas, e não por todos os itens selecionáveis. Isso faz parte de um sistema em geral mais limpo, para usar o teclado para navegar entre as ferramentas e dentro delas.

• Avançar e retroceder entre as ferramentas usadas recentemente usando o teclado

  Use CTRL + [ para retroceder em seu histórico de navegação de ferramentas; CTRL + ] para avançar, tal como as setas voltar e avançar quando estiver navegando.

• Acesso rápido ao modo de documento

  Deseja acessar o Modo de documento sem alternar ferramentas? Adicionamos uma nova lista suspensa na parte superior que lhe dá acesso ao modo de documento de qualquer ferramenta.

  

Mudanças no Console

• Console.timeStamp()

  Quando chamado a partir do Console ou de dentro do código, ele gera para o Console o tempo em milissegundos que a guia atual do navegador está aberta. Se chamado durante a execução de uma sessão de criação de perfil com a ferramenta Capacidade de Resposta de IU, ele cria uma marca de usuário na linha do tempo da sessão com um carimbo de data/hora que tem como base a hora de início da sessão.

• CTRL+L limpa todas as mensagens do console

• Preenchimento automático preciso

  O preenchimento automático do console não inclui mais propriedades indexadoras, levando a uma seleção mais limpa e mais precisa de sugestões de preenchimento automático.

  Foram adicionados $ $$, $x, $0 - US $5 e $_ à lista de preenchimento automático do Console para a conveniência daqueles que os usam e tornar o comportamento do Console mais consistente com outros navegadores.

• Indicador de mensagem obsoleta

  Se você optou por desativar a opção Limpar ao navegar, as mensagens de console mais antigas terão seus ícones esmaecidos para ajudar a distinguir entre mensagens para a página ativa e mensagens de páginas anteriores em seu histórico.

  

Mudanças no Explorador do DOM

• Barras de alteração no painel Computado

  Os usuários das barras de alteração (cores diferentes para propriedades alteradas, propriedades adicionadas e propriedades excluídas) têm desfrutado do painel Estilos. Elas agora aparecem no painel de estilos Computado.

  

Alterações no depurador

• Designar Sourcemaps

  Clique com o botão direito na guia de um documento no Depurador e você poderá especificar um mapa fonte. Isso possibilita usar mapas fonte com o código enviado que tenha tido o comentário do mapa fonte removido.

  

• Preenchimento automático em inspeções

  Agora, ao adicionar uma inspeção, você recebe sugestões de opções de preenchimento automático.

  

• Inspeção de valor de retorno

  Ao quebrar uma função com um valor de retorno, intervenha na função até que você chegue à chave de fechamento. O valor de retorno será exibido na parte Locais do painel Inspeções. Intervenha novamente e o valor será retornado ao código que chamou por ele.

  Para ter uma demonstração rápida, experimente este código no Console:

  function showval() { var x = 0; x++; debugger; return x; } showval();

  Ele vai chamar a função, interromper o debugger, e você pode intervir para ver o valor de retorno.

• Seleção múltipla para pontos de interrupção

  CTRL + clique, SHIFT + clique e CTRL + A funcionam para selecionar vários pontos de interrupção no painel Pontos de Interrupção.

• Continuar e ignorar interrupções

  Pressione F5 para continuar até a próxima interrupção. Mantenha F5 pressionada para continuar passando por várias interrupções até você soltar F5.

• Pontos de interrupção e tracepoints de evento

  Estes funcionam como os pontos de interrupção e tracepoints já presentes nas ferramentas F12, mas em vez de serem acionados quando um bloco específico de código é executado, são acionados quando um evento específico for disparado. Cada um tem um filtro condicional opcional para ajudá-lo a reduzir seus escopos para a instância específica de um evento que você deseja inspecionar. Eles podem ser adicionados usando os ícones Adicionar tracepoint de evento e Adicionar ponto de interrupção de evento, realçados na imagem abaixo.

  

Alterações na ferramenta Capacidade de Resposta de IU

• Sessões de desempenho importar/exportar

  Não é necessário reproduzir seu caso de teste sempre que você desejar analisar dados que ele produz ou compartilhar dados com um colega. Os ícones de importação (pasta) e de exportação (disco) na barra de ícones da ferramenta Capacidade de Resposta de IU permitem que você salve seus instantâneos da memória em um arquivo que possa ser importado posteriormente.

• Visualização da imagem

  Se você já viu uma solicitação HTTP para uma imagem e perguntou-se para qual imagem era, a imagem agora é visualizada nos detalhes do evento.

  

• Filtrando eventos

  O botão Filtrar eventos é pequeno, mas poderoso. Oculto atrás desse botão há um menu que permite filtrar os eventos de várias maneiras, e cada maneira tem um impacto significativo.

  • Filtro por nome de evento

    Filtre por qualquer nome de evento que contenha um correspondente para o texto de filtro.

  • Filtro por atividade da IU

    Usando as caixas de seleção, você pode excluir categorias maiores de eventos para facilitar o enfoque na área que estiver investigando. Por exemplo, se estiver interessado apenas na atividade da rede, você pode filtrar todos os ruídos da IU e da coleta de lixo.

  • Filtro por limite de tempo

    Esse recurso filtra os eventos de nível superior com menos de 1 ms de duração. Em muitos cenários, isso simplifica drasticamente o modo de exibição em cascata e ajuda você a se concentrar em eventos mais impactantes.

  

• Eventos de script do HTML5

  Se você usa ouvintes de consulta de mídia ou Observadores de mutação, agora é possível identificar seus respectivos custos ao executar uma sessão de criação de perfil de desempenho.

  

• Agrupamento de quadro

  O botão entre o menu suspenso Classificar por e o menu Filtrar eventos alterna para Agrupamento de quadro. Isso agrupa eventos de nível superior em sua unidade correspondente de trabalho (ou "quadro") durante os períodos de tempo em que animações/atualizações visuais estiverem ocorrendo. Os quadros são tratados como outros eventos. Desse modo, eles podem ser classificados e filtrados e fornecer um Resumo de tempo inclusivo.

  

• Medidas de usuário

  Se você usa a API performance.mark() para adicionar triângulos à linha do tempo, que indica onde aconteceram eventos específicos, a API performance.measure() estende a utilidade das marcas de desempenho. Use performance.measure() para criar um evento de Medida de usuário englobando o tempo entre dois eventos performance.mark(), clique com botão direito no evento e use a opção Filtro de evento para selecionar apenas os eventos entre as duas marcas.

  

• Colorização para DOM

  Este recurso adiciona colorização a elementos DOM, cadeia de caracteres e números literais. Além de fazer com que o conteúdo dentro de diferentes ferramentas F12 tenham aparência e comportamento parecidos, ele acrescenta um pouco mais de apelo visual à ferramenta Capacidade de Resposta de IU.

• Resumo da seleção

  Quando você selecionar uma parte da linha do tempo, o painel de detalhes do evento mostrará um resumo da seleção. Focalize os segmentos diferentes do gráfico circular para ter uma dica de ferramenta com a categoria de evento do segmento.

  

• Suporte para console.timeStamp()

  Usar o método console.timeStamp() em seu código ou no console durante uma sessão de criação de perfil cria uma marca de usuário na linha do tempo com o horário inicial da sessão de criação de perfil.

Alterações na ferramenta Memória

• Dobra Dominator

  A dobra Dominator ajuda a simplificar o conteúdo de um instantâneo, pois remove objetos das visualizações de nível superior que são componentes lógicos de outro objeto (por exemplo, um <BR> dentro de um <DIV>, um escopo mantido por uma Função) e tendem a trazer detalhes adicionais que não melhoram sua percepção dos dados, mas que podem causar perda de tempo.

  Por exemplo, a imagem abaixo mostra exibições de antes e depois, demonstrando como a dobra Dominator melhora a "história" que a ferramenta está contando. A exibição dobrada mostra 30 elementos HTML <DIV>, que ocupam 15,64 MB de memória e estão mantendo os nós DOM desanexados. Em muitos casos, não é importante saber a composição de um objeto, e sim simplesmente saber que ele é muito grande, ou que está vazando (especialmente ao usar bibliotecas de terceiros).

  

• Colorização do DOM, de cadeia de caracteres e de números literais

  Este recurso adiciona colorização a elementos DOM, cadeia de caracteres e números literais. Além de fazer com que o conteúdo dentro de diferentes ferramentas F12 tenham aparência e comportamento parecidos, ele torna a análise da memória um pouco mais interessante visualmente.

• Filtragem por ciclos de raízes

  Quer poder investigar a composição de um objeto sem se perder inconscientemente em um caminho de referência circular? Este recurso detecta referências filho que são circulares e "corta-as", para que você não se confunda percorrendo-as até o infinito. Além disso, ele anota essas referências para que fique claro quando uma referência foi, de fato, "cortada".

• Sessão de importação/exportação

  Não é necessário reproduzir seu caso de teste sempre que você desejar analisar dados que ele produz ou compartilhar dados com um colega. Os ícones de importação (pasta) e de exportação (disco) na barra de ícones da ferramenta Memória permitem que você salve seus instantâneos da memória em um arquivo que possa ser importado posteriormente.

  

Alterações na ferramenta Emulação

• Configurações de persistência e redefinição

  Um ícone configurações Persistir com Emulação foi adicionado à ferramenta Emulação. Isso manterá as configurações atuais de emulação até que sejam desabilitadas especificamente, permitindo que você use, feche o navegador e retorne com suas configurações de emulação intactas. À sua direita há um ícone configurações Redefinir Emulação que rapidamente redefine a ferramenta de volta aos valores padrão.

  

Tópicos relacionados

Baixar o Internet Explorer Developer Channel para o Windows 8.1

Baixar o Internet Explorer Developer Channel para o Windows 7 SP1