Ferramentas de IE9
1. Ferramenta de CSS
A ferramenta de CSS nos permite manipular os distintos arquivos ou fragmentos de folhas de estilos CSS que fazem parte da página que estamos visualizando. Como nas demais abas, há uma barra específica com os seguintes elementos:
- O ícone em forma de seta nos permite ativar a ferramenta “select element by click”, da que falamos em um artigo anterior. Esta ferramenta facilita selecionar qualquer elemento da página simplesmente fazendo click sobre ele.
- A seguinte opção nos permite limpar a cache do navegador, do mesmo modo que faríamos desde o submenu Cache, opção Clear browser cache.
- O seguinte ícone nos facilita salvar todas as modificações que tenhamos feito sobre os arquivos CSS de página, em um arquivo local. Do contrario, as perderemos tão logo refresquemos a página.
- O último elemento é um combo que nos permite selecionar entre as distintas folhas de estilo envolvidas na maquetação da página web. Na lista aparecem também as folhas de estilos dos iFrame carregados na página, convenientemente identificados, posto que as entradas na lista correspondentes a eles aparecerão com seu nome entre colchetes.
Na Figura 1 podemos ver o aspecto desta ferramenta, junto com o resto de elementos que a compõem.
Debaixo desta barra específica podemos encontrar, como na aba de HTML, o painel de conteúdo primário, que mostrará a informação correspondente à folha de estilos escolhida no combo. Neste painel serão carregadas distintas entradas para cada regra, saindo delas as propriedades que definam. Para ativar/desativar uma regra, bastará manipular o checkbox correspondente; cada modificação terá imediato reflexo na página carregada. No caso das propriedades, se poderá não só ativar/desativar, como também modificar seus valores clicando sobre elas.
Também, desde esta janela, teremos acesso a um menu contextual (botão direito do mouse para fazê-lo aparecer) que nos facilita acrescentar novas regras e propriedades, assim como eliminar ambas.
2. Ferramenta Console
A ferramenta de Console é um simples console de Javascript, no que podemos ver distintos erros e informações que vão gerando os distintos scripts que foram carregados com a página web. Existem também una serie de comandos que podemos utilizar nos nossos scripts para enviar a ela nossa própria informação de depuração, evitando ter que fazer debugging.
As mensagens mostradas nesta tela são de tres tipos: avisos, erros e informação. Na Figura 2 se pode ver um exemplo disto, assim como a estrutura desta ferramenta.
Por último, na parte inferior dispomos de uma zona para poder executar rapidamente scripts personalizados. 3. Ferramenta de Script Na aba Script podemos encontrar um depurador de Javascript tão ligeiro quanto útil. Mediante esta aba poderemos, fundamentalmente, depurar o código JS mediante pontos de ruptura e observar o valor das variáveis de entorno em tais circunstâncias.
Como nas demais abas, existe uma barra específica com ícones que dão acesso a funcionalidade relacionada com o depurador. Da esquerda para a direita estes ícones são:
- O ícone em forma de seta nos permite ativar a ferramenta “select element by click”, da que falamos em um artigo anterior. Esta ferramenta facilita selecionar qualquer elemento da página simplesmente clicando sobre ele.
- A seguinte opção nos permite limpar a caché do navegador, como faríamos a partir do submenu Caché, opção Clear browser caché.
- Este ícone permite “continuar” a execução do código Javascript, una vez que tenha detido devido a um ponto de ruptura.
- O ícone seguinte indica ao depurador que deve deter a execução antes de que seja executado o comando seguinte do script.
- O seguinte ícone detém a execução no ponto em que se produz um erro. Está ativado por padrão.
- O seguinte ícone indica ao depurador que execute a linha seguinte e se detenha, inclusive se essa linha se encontra dentro de um novo método.
- O ícone a seguir também executa a linha seguinte, mas caso se trate de um novo método, não entra dentro dele.
- O último icone permite sair do método atual e voltar ao método que o invocou, para seguir com a depuração.
Na barra específica de ícones podemos encontrar dois elementos extras. O primeiro deles é o botão “Start Debugging”, que ativa a sessão de depuração. Uma vez que o tenhamos pressionado, devemos refrescar a página para que se possa realizar a depuração através de todos os seus scripts, incluídos os que se carregam no principio.
O outro elemento é um combo que permite selecionar os distintos fragmentos de Javascript que fazem parte da página. Permite, ademais, controlar que conteúdo é carregado no painel primário.
Na Figura 3 podemos ver estes elementos descritos, assim como o resto que descreveremos a continuação e que conformam esta potente ferramenta.
Imediatamente debaixo da barra de ícones específica, como nas demais abas, se encontra o painel primário de conteúdo. Neste painel poderemos ver o código Javascript correspondente á opção escolhida no combo. Também a partir dele poderemos inserir os distintos pontos de ruptura que queremos utilizar na sessão de depuração.
Para acrescentar um ponto de ruptura temos dois modos de fazê-lo. O primeiro consiste em clicar sobre o número da linha que queremos depurar, na parte esquerda da janela. Assim que cliquemos, veremos aparecer um ponto vermelho que representa o ponto de ruptura. Clicando sobre ele de novo faremos com que desapareça, e se clicamos com o botão direito do mouse veremos um menu contextual que nos permite desativá-lo, eliminá-lo ou dotá-lo de uma condição. Esta última opção consiste em estabelecer uma condição lógica para que o depurador se detenha em tal ponto de ruptura. Se não funcionar, o depurador continuará a execução sem parar nele.
Na janela direita da aba de Script podemos distinguir o menu de escolha de propriedades e a janela de propriedades que mostra a informação correspondente. Quanto ao menu, temos cinco opções:
- Console: a partir desta console podemos executar linhas de script escrita rapidamente capturar mensagens que os scripts tenham enviado mediante a API console.log. É o mesmo console que vimos no ponto anterior.
- Breakpoints: esta janela nos mostra todos os pontos de ruptura que definimos para a página. Dela podemos desativá-los, eliminá-los, dar- lhes uma condição lógica para sua execução ou acessar o ponto de código em que se encontram.
- Locals: mostra variáveis locais ao âmbito da função atual. Mostra o nome, tipo e valor de tais variáveis.
- Watch: muestra variáveis em qualquer âmbito, desde que as tenhamos acrescentado previamente. Como a janela anterior, mostra o nome, tipo e valor de cada variável. Também podemos acrescentar variáveis a esta janela a partir do painel primário, utilizando o menu contextual.
- Call Stack: mostra a pilha de chamadas, sendo a atual a que se encontra na parte superior. Clicando duas vezes em cada função podemos ir ao ponto do código fonte em que está definida.
4. Conclusões
Pudemos ver outras das ferramentas de Developer Tools. Neste artigo descobrimos como ativar, desativar e acrescentar novas folhas CSS; como obter informação de depuração através do Console de Javascript, e como poder depurar nossos scripts de forma fácil e potente.