Há variadas ferramentas para integrar no browser com o intuito de facilitar o trabalho de desenvolvimento Web. Estas são conhecidas como extensões ou add-ons, e embora não apenas para desenvolvimento Web, muitas delas foram criadas especificamente para isso. Há uma grande variedade disponível, como por exemplo ferramentas de diagnóstico para CSS, HTML e Javascript.

Vamos então explorar 15 extensões para Desenvolvimento Web. Irá encontrar ferramentas para Firefox, Chrome e Internet Explorer. Quer esteja a fazer correcção de erros, inspeccionar código HTML ou descobrir qual é a cor de um elemento que uma página tem, irá descobrir aqui ferramentas para executar as suas tarefas.

Web Developer

Esta extensão adiciona uma barra de menu ao browser, com várias funcionalidades para desenvolvimento Web. Tem serviço de validação de sintaxe Web, como o validador CSS W3C. Tem suporte para Firefox, Flock, Seamonkey e Chrome, em qualquer sistema operativo.

Console2

Console2 substitui a consola JavaScript com uma consola da próxima geração. É compatível com Firefox, Thunderbird e SeaMonkey.

YSlow

Esta extensão foi criada pelos programadores Yahoo, que integra com Firebug para analisar performances, detectar e corrigir engarrafamentos no código, entre outros.

Barra de Ferramentas Web Developer para Internet Explorer

Se pretende um addon parecido com Firebug, mas para Internet Explorer, com possibilidade de correcção de erros, inspeccionar código e aplicações com o browser. Integra a barra de ferramentas na base do browser, dando-lhe acesso a todas as funcionalidades com um simples clique.

Fiddler Web Debugger

Uma extensão para Internet que entre outras coisas analisa o tráfego HTTP da sua página. Se sempre quis saber o que acontece exactamente quando um cliente acede a uma página Web, Fiddler irá ajudá-lo garantidamente. Tem estatísticas HTML que expõe todos os componentes e todos os ficheiros necessários para gerar uma página, dando-lhe detalhes como o total de pedidos de página, tamanho total e quando expira a cache.

DebugBar

Mais uma boa ferramenta de detecção de erros, desta feita para Internet Explorer. Com ela é possível enviar screenshots por e-mail, escolher cor , ver o código original ou o interpretado (no caso de usar JavaScript para manipular os estilos de um objecto DOM, irá ver o código HTML interpretado por esta manipulação) e uma consola API ( depois de instalar o companion.js) para ajudar a obter informação através de uma linha de comandos.

Greasemonkey

É uma extensão para Firefox que lhe permite alterar o design e funções de uma página, para seu próprio proveito. Existe uma grande comunidade Greasemonkey, que conta já com centenas de scripts disponíveis para download.

HttpWatch

Um detector de erros que tem também como funcionalidade estatísticas sobre o tráfego no seu website, semelhante com Fiddler. Tem uma interface mais intuitiva e menos intimidativo que o Fiddler, tornando assim a sua utilização mais fácil e rápida.

Web Accesssibility Toolbar

Uma extensão para Internet Explorer e Opera que lhe dá rápido acesso a algumas ferramentas através de uma barra de ferramentas integrada no browser, com inúmeras funcionalidades, desde analisar a acessibilidade ao conteúdo até um campo de pesquisa de estruturas no código.

Fangs

Fangs integra-se no Firefox e simula o que um leitor do website vê quando o visita, dando-lhe a possibilidade de rapidamente ver o output de alterações que tenha feito.

Venkman JavaScript Debugger

Uma ferramenta de detecção de erros para Firefox, Netscape e SeaMonkey. É robusto para fazer detecção de erros em javaScript e tem uma linha de comandos para interagir com o detector de erros.

Firebug

É uma extensão para Firefox ( Há uma versão compatível com Google Chrome aqui ) que lhe permite fazer correcção de erros em HTML, CSS, JavaScript e DOM (Document Object Model). Embora tenha algumas funcionalidades reconhecidas, é conhecido por revolucionar a maneira como os programadores corrigem erros em código JavaScript.

Como exemplo, antes da existência do Firebug, usaria-se a função alert() para ver o que continha uma variável ou ver em que linha o código parava. Com Firebug é-lhe indicado especificamente qual é o erro e onde está.

ColorZilla

Uma extensão simples e muito útil para Firefox, se sempre quis saber qual e cor usada num website, esta extensão ajuda-o a determinar com exactidão qual a cor, dando-lhe os valores hexadecimais, RGB, tom e saturação.

FireShot

Esta extensão integra-se com Firefox e Internet Explorer e permite-lhe fazer capturas de imagens do ecrã, editar, criar anotações ou mesmo organizar e exportá-las de forma simples e rápida.

FireFTP

FireFTP é uma extensão para Firefox grátis, multi-plataforma para navegar em FTP. Oferece várias vantagens em relação ás aplicações nativas, como por exemplo ser independente de sistema operativo. Incrivelmente esta extensão gratuita integra todas as funcionalidades que seria de esperar numa aplicação nativa, como suporte para os protocolos SSL, TLS e SFTP, sincronização com ficheiros remotos e locais e comparação de directórios para ver o que lhe está a faltar no servidor.

Até Já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jucara Lisboa Ferreira
    19 de outubro de 2010

    Olá Diogo o seus post são excelentes e muito interessantes, para eu que sou leiga no assunto. Continue colocando coisas novas que continuarei a te seguir. Jucara, brasileira.



  2. Júnior Gonçalves
    20 de outubro de 2010

    Há tantas ferramentas disponiveis que fica difícil saber pra onde ir, estou gostando dessas lista justamente por isso.

    Parabéns pelo blog!!!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz