Internet Explorer 9: Developer Tools

Hoje resolvi falar sobre o Developer Tools, introduzido inicialmente como uma ferramenta separada do Internet Explorer 6 mas que desde a versão 7 do browser já vem incorporada na instalação básica.

O Developer Tools pode ser encontradao no menu de opções do browser. Também pode ser acessado através da tecla de atalho F12.

A ferramenta possue opções para limpar o cache específico de um domínio, alterar definições do modo de renderização, informações sobre as imagens e cookies. Também tem ferramentas como color picker, régua, alteração da UserAgent string e muito mais.

Esta última versão apresenta 5 abas, sendo algumas delas novidades para o IE9.

 

HTML

A aba de HTML é mostrado em uma estrutura tipo árvore os elementos DOM atualmente carregados na página. Mostra o estado atual da página e não o documento recebido do servidor (que pode ter sido alterado via script).

Através do botão de seta localizado logo na parte superior esquerda da aba é possível selecionar elementos diretamente na página. Com isso se evita de ter que ficar procurando os elementos diretamente na árvore mostrada.

Na parte lateral encontramos as opções Style, Trace Styles, Layout e Attributes.

Style: Podemos ver os estilos aplicados ao elemento selecionado através de arquivo CSS ou in-line. Podemos fazer alterações dos valores diretamente nesta janela e ver como ficou na mesma hora.

Trace Styles: Semelhante ao anterior mas mostra apenas os estilos que estão sendo considerados e não os que foram sobreescritos por outro CSS ou propriedade.

Layout: Mostrar de que forma o posicionamento e tamanho do elemento está sendo afetado. Alguns desses valores podem até ser alterado ali mesmo, mas nem sempre esta opção está liberada.

Attributes: Aqui encontramos todos as propriedades do objeto DOM. Pode-se incluir, alterar, excluir e visualizar todas as suas propriedades. Também pode-se visualizar as propriedades Read-Only do mesmo.

 

CSS

Nesta aba podemos ver todos os estilos CSS aplicados a página. Eles ficam separados por arquivos e podemos desabilitar um seletor inteiro ou estilos individuais de um seletor.

 

Console

A aba console foi promovida de um pequeno espaço da aba Script do IE8.

Agora neste local é possível executar scripts diretamente e inspecionar objetos.

Ao digitar o nome de um objeto no console e pressionar Enter são apresentadas algumas de suas propriedades. Pode-se ver todos os detalhes do mesmo adicionando o objeto ao inspecionador pressionando o link watch.

 

Script

Com 5 opções diferentes de visualização a aba script é desenhada especialmente para visualização e depuração de scripts da página. Mostra os arquivos javascripts separados e podemos até pesquisar dentro deles.

Console: Tem a mesma função da aba console comentada anteriormente, inclusive os comando executados aparecem em ambas.

Breakpoints: Todos os breakpoints adicionados ao código javascript aparecerão aqui.

Locals: Objetos javascript carregados no contexto atual aparecerão neste local, podemos percorrer suas propriedades e até altera-las.

Watch: Quando você adiciona um objeto javascript ao inspecionador é aqui que ele aparecerá. Quando seu valor for alterado o mesmo aparecerá em vermelho.

Call stack: Muito importante quando se está depurando script é saber quem invocou determinado método. Com o Call Stack podemos saber os passos que o código deu até chegar até determinado ponto, seja um breakpoint ou um erro.

 

Profiler

As vezes precisamos saber a causa de um comportamento inesperado em nossa aplicação, mas não sabemos o que fez ocorrer ou quantas vezes ocorreu.

São nestes casos que podemos usar os Profilers. Neles são registrados todos os scripts que executam em um determinado momento e com isso podemos verificar a ordem de chamadas javascript feitas em um determinado período.

Você já pensou em tentar rastrear os eventos que ocorrem quando se passa o mouse por cima do mapa do Google Maps? Pois bem, com o Profiler executando podemos ver todas as execuções que ocorrem, sem falar que podemos ver não só a quantidade e tempo gasto em cada método como também a ordem de execução.

 

Network

Nova no IE9, a aba Network traz funcionalidades já presentes no Firebug e que muitos (inclusive eu) recorriam a outros programas, como o Fiddler, para capturar o tráfego de internet de determinadas páginas.

Torna-se incrivelmente útil quando precisamos verificar o tráfego de arquivos de determinada página, tamanho de chamadas Ajax, situação de cabeçalhos HTTP para averiguar headers que estão presentes ou faltando.

O recurso ainda traz dados detalhados de cada requisição, como os cabeçalhos HTTP enviados e recebidos, corpo da requisição e resposta e ainda um gráfico de onde foi gasto todo o tempo da mesma.

Bom, acho que era isso por enquanto. Este artigo foi iniciado pouco antes do PDC10 e do Plaform Preview 6 ser lançado, então ocorreram algumas melhorias na engine do Browser mas poucas diferenças nas abas (só notei a opção de identação de scripts).

Enjoy

Internet Explorer 9 Beta lançado

É, eu sei. Isso já é notícia velha, mas mesmo assim se faz necessário alguns comentários da minha parte.

A versão Beta do IE9 foi lançada oficialmente em um evento em São Fancisco no último dia 15 de novembro setembro. A versão conta com várias funcionalidades nunca vistas em browser da Microsoft, mas praticamente nada que os concorrentes não tivessem.

Aqui você encontra o site que testa várias das melhorias do IE9 como suporte as novas tags HTML5 canvas e video.

O IE9 tem interface minimalista, ocupa bem menos espaço na parte superior e tem um visual mais translúcido. Você pode finalmente destacar as abas do browser como no Chrome e o Firefox. É compatível com o ECMAScript 5 (nome de verdade do javascript novo) e com o CSS3. Também terá modos de compatibilidade como no IE8 fazendo com que sites antigos continuem funcionando sem alteração (na teoria).

Essa nova versão foi lançada junto com um site que apresenta as diversas funcionalidades do browser. Você pode conferir aqui, mesmo que ainda não tenha baixado o IE9.

Bom, agora que já falei sobre tudo que ele tem de parecido com os outros, vamos a novidade.

Site Pinning

O IE9 é o primeiro browser (que eu saiba) que usa a funcionalidade Site Pinning. Com isso é possível destacar as abas e coloca-las diretamente na barra de tarefas (Disponível no Windows 7). Isso faz com que o site crie um ícone personalizado e que tenha um grupo especial para o Aero Peek.

Você também pode incluir meta tags para que apareçam como tarefas ao clicar com o botão direito do mouse sobre ele, além de poder criar uma lista personalizada. Também é possível alterar o overlay do ícone na barra de tarefas para notificar o usuário mesmo que o site não esteja visível. Pode-se colocar botões de ação diretamente no preview do Aero Peek bem como personalizar os botões de avançar e voltar do browser.

Só pra isso já daria pra preperar um post especial, mas pra quem já quiser indo aprender pode consultar a página do MSDN que já se encontra disponível para ajudar na implementação de tudo isso.

Eu fiz a minha parte, já que o Google ainda não tem as Tasks criadas eu fiz um bookmarklet que adiciona os principais serviços do Google em um site Pinned. Basta criar um link favorito com este link, no meu caso eu só arrastei o link para os favoritos e funcionou. Depois Abra a página já em modo Pinned e clique no novo favorito.

Só lembrando que o IE9 ainda está em versão Beta e várias dessas funcionalidades podem ser alteradas.

Enjoy