Melhorias nas ferramentas de programador F12 no Internet Explorer 11

Alterações à interface de utilizador F12

Novos ícones e notificaçõesOs ícones das ferramentas Memória e Gerador de Perfis foram alterados.

Existem agora indicadores na barra de ícones para erros na Consola, alterações nas definições de Emulação e para sessões de criação de perfis ativas nas ferramentas Memória, Gerador de Perfis e Capacidade de Resposta da IU. A imagem seguinte mostra os novos ícones com notificações nos ícones da consola e da ferramenta Memória, indicando que existem dois erros da Consola apresentados e que está atualmente em curso uma sessão de criação de perfis de Memória:

Navegação superconjunta F6 nas ferramentasUtilizar F6 é como utilizar a Tecla de Tabulação para navegar numa ferramenta, mas "tabula" através de um conjunto selecionado dos elementos mais utilizados num painel de ferramentas e não através de todos os itens selecionáveis. Isto faz parte de um sistema de limpeza geral para utilizar o teclado para navegar dentro e entre ferramentas.

Deslocar-se para trás e para a frente entre as ferramentas utilizadas recentemente com o teclado Pode utilizar Ctrl + [ para retroceder no histórico de navegação da ferramenta e CTRL + ] para avançar, de forma semelhante às setas para trás e para a frente quando estiver a navegar.

Acesso rápido ao modo de documentoSa nova lista pendente é adicionada na parte superior da interface que lhe permite aceder ao modo de documento a partir de qualquer ferramenta, pelo que não precisa de mudar de ferramentas.

Alterações na consola

Console.timeStamp()Quando é chamado a partir da Consola ou no código, Console.timeStamp() produz para a Consola o número de milissegundos que o separador atual do browser foi aberto. Se for chamada ao executar uma sessão de criação de perfis com a ferramenta de Capacidade de Resposta da IU, cria uma marca de utilizador na linha cronológica da sessão juntamente com um carimbo de data/hora com base na hora desde o início da sessão.

Ctrl + L limpa a consola de todas as mensagens

Conclusão automática exataA conclusão automática da Consola já não inclui propriedades do indexador. Isto resulta numa seleção mais limpa e precisa de sugestões de preenchimento automático.

$, $$, $x, $0-$5 e $_ foram adicionados à lista de preenchimento automático da Consola por conveniência e para tornar o comportamento da Consola mais consistente com outros browsers.

Indicador de mensagem obsoletaSe tiver optado por desativar a opção Limpar na navegação, as mensagens mais antigas da consola têm os ícones a cinzento para ajudar a distinguir entre mensagens da página ativa e mensagens de páginas anteriores no seu histórico.

Alterações ao Explorador do DOM

Alterar barras no painel CalculadoAs barras de alteração (cores diferentes para propriedades alteradas, propriedades adicionadas e propriedades eliminadas) que os utilizadores têm vindo a desfrutar do painel Estilos aparecem agora no painel Estilos calculados.

Alterações ao depurador

Designação de mapas de origem Clique com o botão direito do rato no separador de um documento no Depurador e pode especificar um mapa de origem. Isto permite utilizar mapas de origem juntamente com o código enviado que removeu o comentário do mapa de origem.

Preenchimento automático no WatchesNow, ao adicionar um relógio, são-lhe sugeridas opções de preenchimento automático.

Inspeção do valor devolvidoQuando quebra numa função com um valor devolvido, entre na função até chegar à chaveta de fecho. O valor devolvido será apresentado na secção Locais do painel Relógios. Passo novamente e o valor será devolvido ao código que o chamou.

Para uma demonstração rápida, experimente este código na Consola:

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

Irá chamar a função , interromper no depurador e pode aceder à mesma para ver o valor devolvido.

Seleção múltipla para pontos de interrupçãoCtrl + clique, Shift + clique e Ctrl + A podem ser utilizados para selecionar vários pontos de interrupção no painel Pontos de interrupção.

Continue e ignore as quebrasPress F5 para continuar para a próxima pausa. Mantenha premida a tecla F5 para continuar a ultrapassar múltiplas quebras até libertar F5.

Pontos de interrupção de eventos e pontos de rastreioO seu trabalho é semelhante aos pontos de interrupção e pontos de rastreio 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 é acionado. Cada um tem um filtro condicional opcional para o ajudar a restringir o âmbito à instância específica de um evento que pretende inspecionar. Podem ser adicionados com os ícones Adicionar ponto de rastreio de eventos e Adicionar ponto de interrupção de evento realçados na imagem seguinte:

Alterações da ferramenta de Capacidade de Resposta da IU

Sessões de desempenho de importação/exportação Não deve ter de reproduzir o seu caso de teste sempre que quiser analisar os dados que produz ou partilhar esses dados com um colega. Os ícones importar (pasta) e exportar (disco) na barra de ícones da ferramenta de Capacidade de Resposta da IU permitem-lhe guardar os instantâneos de memória num ficheiro que pode ser importado mais tarde.

Pré-visualização da imagemSe tiver visto um pedido HTTP para uma imagem e se tiver perguntado qual era a imagem, a imagem será agora pré-visualizada nos detalhes do evento.

Filtrar eventosO botão Filtrar eventos é pequeno, mas poderoso. Oculto atrás desse botão está um menu que lhe permite filtrar eventos de várias formas e cada forma tem um impacto significativo:

• Filtro de nome de evento: filtre por qualquer nome de evento que contenha uma correspondência para o texto do filtro.

• Filtro de atividade da IU: ao utilizar as caixas de verificação, pode excluir grandes categorias de eventos para facilitar a concentração na área que está a investigar. Por exemplo, se só estiver interessado na atividade de rede, pode filtrar todo o ruído da IU e da libertação da memória.

• Filtro de limiar de tempo: esta funcionalidade filtra eventos de nível superior com menos de um milissegundo de duração. Em muitos cenários, isto simplifica significativamente a vista de cascata e ajuda-o a concentrar-se em eventos mais impactantes.
  

Eventos de scripting HTML5Se utilizar serviços de escuta de consultas de multimédia ou MutationObservers, pode agora identificar os respetivos custos quando executa uma sessão de criação de perfis de desempenho.

Agrupamento de moldurasO botão entre a lista pendente Ordenar por e o menu Filtrar eventos ativa o agrupamento Moldura. Isto agrupa eventos de nível superior na unidade de trabalho correspondente (ou "frame") durante períodos de tempo em que estavam a ocorrer animações ou atualizações visuais. Os fotogramas são tratados como outros eventos, pelo que podem ser ordenados e filtrados e fornecem um resumo de tempo inclusivo.

Medidas do utilizadorSe utilizar a API performance.mark() para adicionar triângulos à linha cronológica para indicar onde ocorreram eventos específicos, a API performance.measure() expande a utilidade das marcas de desempenho. Utilize performance.measure() para criar um evento de medida utilizador que abranja o tempo entre dois eventos performance.mark(), clique com o botão direito do rato no evento e, em seguida, utilize a opção Filtrar para evento para selecionar apenas os eventos entre as duas marcas.

Colorização para DOMEssa funcionalidade adiciona coloração a elementos DOM, literais de cadeias e literais numéricos. Além de fazer com que o conteúdo dentro das diferentes ferramentas F12 pareça e se comporte de forma mais semelhante, adiciona mais interesse visual à ferramenta de Capacidade de Resposta da IU.

Resumo de seleçãoQuando seleciona uma parte da linha cronológica, o painel Detalhes do evento mostrará um resumo da seleção. Paire o cursor sobre diferentes segmentos do gráfico circular para obter uma descrição com a categoria de eventos do segmento.

Suporte para console.timeStamp()Utilizar o método console.timeStamp() no seu código ou na consola durante uma sessão de criação de perfis cria uma marca de utilizador na linha cronológica que tem o tempo desde o início da sessão de criação de perfis.

Alterações à ferramenta de memória

A dobragem dominadoraDominador ajuda a simplificar o conteúdo de um instantâneo ao remover objetos das vistas de nível superior que são componentes logicamente de outro objeto (por exemplo, um <BR> dentro de uma <> DIV>, um Âmbito mantido por uma Função) e tendem a ser detalhes adicionais que não melhoram as suas informações sobre os dados, mas pode perder o seu tempo. 

Por exemplo, a imagem seguinte mostra as vistas antes e depois, demonstrando como a dobragem dominadora melhora a "história" que a ferramenta está a contar. A vista dobrada mostra 30 elementos de <DIV>, que representam 15,64 megabytes (MB) de memória e estão a manter-se em nós DOM desanexados. Em muitos casos, não é importante saber a composição de um objeto, tanto quanto simplesmente saber que é demasiado grande ou que está a vazar (especialmente quando utiliza bibliotecas de terceiros).

Colorização de DOM, Cadeia & Literais de númeroSe esta funcionalidade adiciona coloração a elementos DOM, literais de cadeias e literais numéricos. Além de fazer com que o conteúdo dentro das diferentes ferramentas F12 pareça e se comporte de forma mais semelhante, torna a análise de memória mais visualmente interessante.

Filtragem do ciclo de raízesSe não conseguir investigar a composição de um objeto sem perder-se inconscientemente num caminho de referência circular? Esta funcionalidade deteta referências subordinadas que são circulares e as "corta" para que não se confunda ao atravessá-las até ao infinito. Além disso, anota estas referências para que fique claro quando uma referência foi "cortada".

Sessão de importação/exportação Não deve ter de reproduzir o seu caso de teste sempre que quiser analisar os dados que produz ou partilhar esses dados com um colega. Os ícones de importação (pasta) e exportação (disco) na barra de ícones da ferramenta Memória permitem-lhe guardar os instantâneos de memória num ficheiro que pode ser importado mais tarde.

Alterações da ferramenta de emulação

Definições persistência e reposição Um ícone de definições de Emulação Persistente é adicionado à ferramenta emulação. Isto irá manter as definições de emulação atuais até que sejam especificamente desativadas. Isto permite-lhe trabalhar, fechar o browser e, em seguida, voltar com as definições de emulação intactas. À direita deste ícone encontra-se um ícone repor definições de Emulação, que repõe rapidamente a ferramenta para valores predefinidos.