Full-stack developer Emerson Rocha .::. CMS Joomla!, PHP, JavaScript/NodeJS, Infraestrutura

Algo que me aconsece com certa frequência quando vou dar alguma consultoria e o cliente ou está vendo minha tela por Skype ou assistência remota, ou então eu, por assistência remota vou no próprio computador do desenvolvedor é que o uso do console do navegador acaba "roubando" a supresa mais do que o que eu realmente deveria fazer. Explico: alguém te paga para resolver algo em PHP e quando você vai testar a interface ficam impressionados com a forma como daria pra fazer. Este artigo além do google vai servir para centralizar superficialmente um pouco desse conhecimento e servir para referência quando isso acontecer novamente.

Neste artigo, vou revisar o básico, que em geral todo mundo sabe, e aproveitar para falar do consoles, algo que não é tão comum, mesmo o pessoal que já trabalha há anos, saberem de uma e outra funcionalidade básica. E, para ter certeza, logo ao final tem uma gravação em vídeo a respeito.

Perceba que procurei focar a parte de Javascript em seletores CSS, e não é por acaso: é para deixar claro que, para quem é desenvolvedor front-end, faz diferença aprender isso. Outro ponto é que como dou uma visão geral entre diferentes navegadores, tenho certeza que a maior parte dos leitores desse site tenderão a nem conhecer que alguns deles existem, ainda que seja por não terem tido uma real necessidade de usá-los até então.

O básico do uso de consoles para agilizar a produção e debug de interface

Este tópico é extremamente parecido em todos os navegadores, e usarei o combo mais típico para este exemplo.

Usando o navegador Mozila Firefox e, depois de instalar a extensão Firebug, vá ao site especifico e pressione a tecla F12. Aparecerá uma janena anexada a parte inferior do navegador, que pode ser desanexada se pressionada quiser.  Você pode selecionar um elemento para inspeção de dois modos:

  • Mesmo que não tenha o Firebug aberto, porém instalado e habilitado, ao pressionar o botão direito e clicar em "inspecionar elemento" ou equivalente
  • Clicar no botão (1) da imagem abaixo.

Ao selecionar um elemento, verá que o console apresentará a aba HTML e, na lateral direita, os estilos especificos deste elemento

Firefox: inspeção de elemento 1

Observe (4) que, se você clicar em uma propriedade, e alterar seu valor, poderá ver em tempo real ela se alterando no seu site, o que torna tarefas de debug extremamente ágeis se comparadas ao velho e bom salva e dá F5.

Firefox: inspeção de elemento 2

É possível clicar em um atributo e desativá-lo (5). Alguns outros colsoles podem exigir que você clique com o botão direito para adicionar um elemento, e no caso do Firebug também pode ser feito ao clicar no final de um elemento prévio e apertar a tecla tab. Observe que o nagegador vai lhe ajudar com um auto completar básico, o que ajuda em especial o pessoal que não é tão familiar com CSS ou com Inglês, e minimizar erros de tipografia.

Outra questão é que no Firebug, você verá que a pilha de estilos é de cima para baixo, e isso não é uma convensão extremamente padrão. O Internet Explorer, por exemplo, é de baixo para cima. Como o CSS trabalha com herança, ao alterar um estilo, ou mesmo clicar como em (5) para que ele seja ignorado, um estilo mais distante na pilha de herança pode ser ativado. Para saber quais estilos estão ou não ativos, basta perceber os elementos que estão riscados no centro, como o display: block de ul.menu a que é sobrescrito pelo elemento mais próximo ao selecionado neste exemplo.

Firefox: inspeção de elemento 3

Outro tela bem interessante e bem conhecida é a aba rede. Em geral, a maioria das pessoas usa ela, apenas, para descobrir se um elemento foi carregado, ou então para ver o tempo de carregamento de cada elemento e do todo. Esta aba é extremamente interessante para saber o desempenho do seu site, bem como agilizar quando algo estiver muito errado, como quando durante o desenvolvimetno um endereço para um arquivo está trocado.

Procure reparar sempre nas solicitações que aparecem em vermelho, pois indicam que o elemento não foi encontrado. Mesmo que esse tipo de erro não acarrete em um problema prático no seu site, ter referencias a elementos que não são carregados é uma perda de eficiencia e de banda em tantas conecções quanto o erro aparecer.

Ainda na aba de rede, porém sem uma grande explicação aqui, você podever os elementos por subgrupo especifico. Uma pergunta comum é "para que serve a sub tab XHR do console?" e a resposta é que ela lista as requisicoes asincronas do seu site. Vale a pena também ela para ter certeza que todas as requisisões estão corretas e, se pelo menos for aparecer em um fórum e precisar pedir ajuda, pelo menos já ir sabendo qual o problema.

Outras informações importantes podem ser obtidas desta aba, como por exemplo até saber se seu servidor não está informando demais. Tome cuidado caso seu servidor tenda a não ter um suporte muito bom para ver se o seu site não fica a todo momento, inclusive, informando qual a versão do Apache e do PHP que ele executa. Bots automaticos podem ver isso de forma bem fácil e explorar tais falhas, mas esse é um assunto para outro artigo...

Firefox: console de rede

Usar seletores de Javascript para otimizar o desenvovlimento de CSS

Bem, é isso mesmo que você ouviu: saber um pouco mais de javascript, e de como usar os consoles dos navegadores, pode agilizar no desenvolvimento CSS. Se além do básico que mostrei, você souber isso que vou passar agora, vai ver que tenderá a ter uma ajuda extra ao usar seletores sofisticados de CSS3, e não só dele. Neste artigo, está fora do escopo explicar como você pode fazer para adicionar eventos a cada elemento, mas em momento oportuno farei isso. O ponto central deste é você entender pelo menos o extremamente básico de como pode selecionar um elemento unico ou um conjunto de elementos para agilizar também no desenvolvimento de UI. Mesmo que eu não explique agora, verá que esse conceito de seletores é util quando tiver que usar javascript em algum momento, mesmo que seja para fazer uma gambiarra.

Algo que posso adiantar é que, há uma diferença entre eletores que retornam um elemento, e os que retornam um conjunto de elementos. Isso quer dizer que o mesmo pedaço de código que funcionar com o retorno de um elemento, poredá ser feito com um conjunto desde que você coloque esse conjunto em um Loop, que além do modo básico em Javascript, pode ser feito com um modo mais simplificado em bibliotecas como Mootools e Javascript.

Neste artigo, vou focar no navegador Mozila Firefox, porém o mesmos conceitos se aplicam aos demais navegadores, que darei uma visão geral aqui.

Mozila Firefox

O Mozila Firefox tem uma opção nativa e um plugin muito popular, o Firebug. No caso do firebug, para acessá-lo, basta fazer o mesmo que disse na introdução básica deste artigo.

Seletor básico de ID, apenas um elemento

Para selecionar um elemento com ID especifico, você pode fazer usando javascript puro. Os exemplos que vou dar, partem do principio que você está no meu site (duh!). Você pode acompanhar nas imagens o resultado.

  • document.getElementById('fititnt'); //Modo nativo do Javascript de selecionar um elemento de ID especifico. Sempre irá funcionar se tiver Javascript ativado, mesmo sem usar frameworks
  • $('fititnt');// Atalho para o comando acima, que só funcionar se tiver um framework de Javascript instalado, ou em certos consoles que disponibilizam esse método se ele não estiver definido. Evite usar ele em código real que for fazer.
  • document.id('fititnt');//Modo Mootools que deve ser usado em vez de $('fititnt') , para aumentar a portabilidade do seu código.

Firefox: Seletor basico de ID

Seletores de multiplos elementos

O Javascript puro disponibiliza alguns métodos de retornar um conjunto de elementos que obedecem uma regra especifica, e em geral todos os frameworks estendem isso de modo a facilitar a visa do desenvolvedor. Abaixo, dois exemplos simples;

  • document.getElementsByTagName('a');//Javascript puro para selecionar todas os links, ou seja, os elementos com nome de tag "a"
  • $$('a');//Modo mootools de fazer o mesmo

 

Firefox: Seletor de multiplos elementos

Seletores de CSS3

Frameworks como o Mootols, permitem que você também selecione um conjunto de elementos conforme definições de CSS, como o CSS3. E é aqui que está um dos pulos do gato: um desenvolvedor de interface pode usar esse modo para ver em tempo real se um estilo CSS que ele quer implementar vai mesmo acertar o elemeto que ele quer. Veja que, ao usar o $$('header'), como a página de testes contem apenas um elemento com esta tagname, é retornado um conjunto com apenas um elemento, mas não um elemento sozinho. Assim como eu falei anteriormente, caso queira usar esse seletor para adicionar um evento, terá que interagir com um loop, mesmo que esse loop só seja feito uma vez. Ou então use o velho e bom modo de retornar o primeiro elemento adicionaod ao final um [0], ou seja um $$('header') retorna um array, mas um $$('header')[0] retorna um elemento, que pode servir para, por exemplo, $$('header')[0].style.display='none'. Lindo, não? Ok, vamos voltar ao lado prático do CSS

  • $$('header');// Mootools: retorna todos os elementos de tagname header
  • $$('header a')// Mootools:retorna todos os elementos de tagname a dentro de elementos de tagname header
  • $$('header a[href$="sobre.html"]');// Mootools:retorna todos os elementos de tagname a dentro de elementos de tagname header que possuem um atributo href cujo valor termine com "sobre.html"

Agora vem a pergunta: se conseguiu selecionar usando javascript, como converter esse código para CSS? Simples. veja:

 ////$$('header a[href$="sobre.html"]');//Seletor Mootools header a[href$="sobre.html"] { //Seletor CSS equivalente // seu codigo aqui }

Caso você não esteja familiarizado com o potencial de seletores de CSS3, ou mesmo os "velhos seletores", recomendo os seguintes links

Firefox: Seletores de CSS3

Auto completar

E como não podia faltar, os consoles ajudam a auto completar com as possibilidades de javascript que você pode executar. Isso pode ser útl quando for trabalhar com Javascript.

Firefox: auto completar do console

Ferramenta nativa no Firefox: console (Ctrl + Shift + K, Firefox > Desenvolvedor Web > Console da Web)

Além da extensão firebug, desde a versão 10 do Mozila Firefox, tem-se a disposição um console nativo. Houve certas criticas e comentários de pessoas alegando que por que foi feito isso se este navegador já tinha a extensão Firebug? A resposta é que este console roda de forma nativa, isto é, além de ter sido compilado junto com o navegador e isso representar ganho de performance comparado ao firebug que, a grosso modo, é um grupo de CSS e HTML que, via javascript, renderiza e faz o que você vê, e esse tipo de renderização vem com um custo de performance. Ou vão dizer que nunca reclamaram de seu navegador quando o firebug está ligado ficar mais lento?

Algo que convido, em especial desenvolvedores javascript, a usar esse console é que, em geral, ele exibe mais alertas de erro que o próprio Firebug, o que pode ser bem útil quando a situação fica mais complicada.

Uma dica válida para quem quer multiplas linhas, é pressionar Shift + Enter para quebrar para a próxima linha sem executar o comando imediatamente. Ou então use o Scratchpad.

Firefox: console nativo padrão

Ferramenta nativa no Firefox: console (Ctrl + Shift + I, Firefox > Desenvolvedor Web > Inspecionar)

E se fizeram um console, por que não também um inspecionador nativo? Isso mesmo, agora o Firefox conta com um modo nativo de inspecionar elementos. Vale a pena testar, ainda que a título de conhecimento.

Firefox: inspecionador nativo do firefox

Ferramenta nativa no Firefox: Scratchpad (Shift + F4, Firefox > Desenvolvedor Web > Scratchpad)

Junto ao console nativo do Firefox, é possível usar o Scratchpad, que ajuda caso queira executar códigos mais complexos.

Firefox: scratchpad

Outras extensões para o Firefox

Bem, o que eu tinha para falar sobre o Firefox neste post acabou. É valido lembrar que existem mais algumas ferramentas para lidar com CSS e Javascript como extensão para o firefox, ou como extensão especifica para o Firebug no Firefox. O Firefox tem um tataravô distante, o Netscape, que foi o marco inicial do Javascript, e que incitou o JScript da Microsoft. O pessoal mais oldschool certamente vai lembrar do Venkman, que pode ser um pouco "denso" para alguém novo nos dias de hoje, mas para desenvolvedores Web, uma forte recomendação minha, além do próprio Firebug, é o Web Developer.

Google Chrome (F12 ou Ctrl + Shift + I, Google Chome > Ferramentas > Console de Javascript)

Basicamente, todos os conceitos que se fora explicados usando o Firefox se aplicam com um equivalente direto no Google Chrome. Então,

Curiosidade: pode ser novidade para você é que foi justamente a popularidade do Firebug que forçou outros navegadores usados a terem um equivalente e, como a maioria deles não tinha um suporte tão bom ou pelo menos não eram tão populares no desenvolvimento de extensões, para atrairem o foco dos desenvolvedores de sites, resolveram criar um equivalente direto do Firebug. Alguns anos mais tarde, o Firefox que era/é melhor opção para desenvolvedores tornouse o unico a não ter essas ferramentas nativas, que agora voltou a ter.

Google Chrome: console

Opera (Ctrl + Shift + I, 

O navegador Opera tem também um equivalente como os outros, que inclusive tem um nome especial, o Dragonfly. Vale a pena usá-lo, ainda que seja apenas para conhecê-lo.

Opera: console "Dragonfly"

Internet Explorer (F12, Internet Explorer > F12 Developer Tools)

Até mesmo o Internet Explorer tem um equivalente aos demais voltado aos desenvolvedores. Ele não é tão sofisticado quanto os demais, porém tem uma vantagem que, por razões que outros concordam comigo é extremamente pertinente, ele tem: a possibilidade de alterar a engine de renderização para a de uma versão anterior. Isso quer dizer que, tendo a versão mais recente do IE. poderá ver desde ela até o Internet Explorer 7, algo que evita o antigo problema de se ter mais de uma versão de navegador instalada na máquina, algo que é especialmente traumático com o IE, pois por padrão ele não faz isso de forma suave. Vale a pena lembrar que esse modo de emulação de versões anteriores é bem semelhante, mas não é 100% iguail. Isso quer dizer que pode sim, acontecer de ao emular o IE7, se for usar um IE7 nativo o resultado seja diferente, mas, bem, são casos incomuns, e a provabilidade de caso seja um cliente seu apontando esse erro e você emular a versão de IE dele divergir, é bem mais provável que seja um problema especifico no navegador do cliente, como o clássico "então limpe o cache", do que realmente ter encontrado uma diferença de renderização.

Internet Explorer: console

Considerações finais sobre os Inspetores e Consoles dos diferentes navegadores

Por mais que você tenha um navegador principal no qual tenha intimidade, eu por exemplo tenho o Firefox para desenvolvimento geral e o Google Chrome quando é algo ligado a javascript, vale a pena eventualmente usar outros navegadores não só para testar divergências no código, mas também porque diferentes navegadores tendem a reportar um mesmo erro de forma diferente. Já passei por várias situações em que algo não era óbvio no Firefox e no Chrome, mas, ao usar o IE o erro era explicito e agilizou para descobrir aonde ele estava. Outro ponto, especificamente no Firefox, é que o console nativo do Firefox, é mais verborrágico ao descrever o que se passa, e isso pode ser interessante em situações em que a coisa ficar complicada.

Cada navegador tem uma engine (Gecko, Webkit, Presto e Trident...)

Com a enorme quantidade de navegadores que existem, seria inviável que todos eles fossem totalmente diferentes um do outro, e é nesse ponto que a engine entra. Imagine a engine como o motor e o chassi de um veículo, e todo o resto, a interface e outros pormenores, são o navegador propriamente dito. Com isso, navegadores com o mesma base, ainda que esta base tenha versões diferentes, terão um comportamento parecido ou iguai. E é nesse ponto que você poderá ter uma idéia de que, se seu projeto funciona bem no Google Chrome, a tendência natural é que ele renderize bem também no Safari, e no navegador padrão do iPhone.

A lista abaixo exibe alguns dos navegadores mais comuns hoje em dia, agrupados pela engine.

  • Gecko: Firefox, Firefox mobile, Skyfire (mobile), (...)
  • Webkit: Google Chrome, Safari, webOS (Palm), NintendoDS (navegador interno), Konqueror, Epiphany (...)
  • Presto: Opera, Nintendo DS Browser, Internet Channel (Wii)
  • Trident: Internet Explorer, Real Player (navegador interno),  (...)

Uma lista mais completa, você pode ver em http://en.wikipedia.org/wiki/List_of_web_browsers

Vídeo explicativo envolvendo o assunto abordado neste artigo


fititnt.org is not affiliated with or endorsed by the Joomla Project or Open Source Matters. The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries
HTML5 Valid