6 strumenti per Firefox utili allo sviluppatore web

Oggi vi voglio presentare alcuni utili strumenti da usare in accoppiata con Firefox che possono tornare molto utili agli sviluppatori web  non solo. Add-on che permettono di risparmiare parecchio tempo in fase di sviluppo e di progettazione di siti e applicazioni web semplificando in modo ulteriore azioni semplici ma che nella maggior parte dei casi richiederebbero l’utilizzo di almeno un programma esterno. Vediamoli assieme.

Screengrab

Screengrab permette, come dice già il nome, di catturare una videata o parti di essa e salvarne il contenuto in un file immagine o sulla clipboard per agire poi con altri programmi sui dati. Comodo vero? Pensate di dover mandare una schermata ad un vostro cliente o solo un particolare per una preview per esempio (A volte mi viene da pensare se fosse possibile fare tutto cio' in 3D, prenderei un master in AutoCad solo per questo:)). Normalmente si ricorrerebbe ad un Print Screen con conseguente incolla in un programma di grafica (Gimp, Photoshop…), crop dell’area interessata e salvataggio dell’immagine finale. Il tempo perso solo ad attendere l’avvio del programma di grafica non è giustificato. Con Screengrabber basta selezionare l’area da salvare e generare il file immagine. Comodo vero?

FireShot

FireShot è un altro addon che basa il suo lavoro sulla generazione di screenshot (pagina intera o area visibile), tuttavia per differenziarsi dagli altri add-on dello stesso campo offre tutta una serie di strumenti per l’editing dell’immagine e per la generazione di note di testo da “appiccicare” al contenuto della pagina. Quante volte via mail non siete riusciti a comunicare qualcosa al primo tentativo, magari per colpa del vostro interlocutore? Bene, FireShot vi permetterà di annotare del testo direttamente sull’immagine del sito in cui indicate per esempio delle modifiche di uno specifico particolare. Anche in questo caso il tempo risparmiato è palese, non solo per il fatto di non dover utilizzare programmi esterni ma anche per il fatto di comunicare in modo più efficacie cose altrimenti facilmente fraintendibili.

ColorZilla

Restando sempre in ambito grafico è doveroso citare ColorZilla che permette di leggere il colore utilizzato in un punto qualsiasi del browser oltre a misurare la distanza tra due punti e zoommare la pagina che si sta visualizzando. Anche in questo caso il lavoro che si risparmia è molto quando non si conoscono tutti i codici dei colori a memoria e si riconoscono tutte le sfumature dei vari colori…invece che fare il print screen della pagina e importarla in un programma di grafica (vedi sopra) per poi usare lo strumento più opportuno per selezionare il colore bastano un paio di click per avere il codice corrispondente.

FireBug

Passando al lato sviluppo dei progetti web non poteva non essere presente FireBug un add-on indispensabile già dopo solo pochi giorni di utilizzo. FireBug mette a disposizione dello sviluppatore tutta una serie di strumenti che permettono l’edit, il debug ed il controllo in modo live di CSS, HTML e JavaScript all’interno di una pagina web. Tutte le varie funzioni che l’add-on mette a disposizione vanno studiate un po’ a fondo per essere produttivi, i vantaggi non tarderanno ad arrivare durante il lavoro di tutti i giorni!

Web Developer Toolbar

La Web Developer Toolbar è un altra arma al servizio dello sviluppatore web che aggiunge un menù ed una toolbar al browser piena zeppa di funzioni utili durante il normale lavoro di tutti i giorni. Le funzionalità sono molteplici e permettono di spaziare dalla gestione completa dei CSS  alla pulizia della cache, dalla gestione delle immagini a quella delle informazioni sulle pagine…insomma molte cose in pochissimo spazio. Vi consiglio caldamente di provare anche questo add-on. O la usate già la toolbar?

CookiePie

Cookipie non è direttamente coinvolta nello sviluppo web nel vero senso della parola ma torna comunque utile nel momento in cui ci si trova a dover testare i diversi modi di accesso di un’applicazione magari con dati di accesso diversi. Senza di essa si è obbligati ad accedere  solamente con un’unica utenza alla volta nello stesso browser, i cookie sono alla base di questo comportamento. Con CookiePie è possibile eseguire l’accesso ad un’applicazione (frontend, backend) in una tab “bloccando” i dati in un cookie apposito ed aprire nella tab a fianco la stessa applicazione ma con credenziali diverse che si baseranno su un altro cookie. In questo modo si possono confrontare per esempio comportamenti anomali di un’applicazione su profili diversi. Non la trovate utile?

Spero di esservi stato utile con questa breve presentazione, sicuramente esistono altri add-on molto utili che ho trascurato e che magari non conosco. Siete i benvenuti per la segnalazione di estensioni che riteniate degne di nota. I commenti vi aspettano!

10 thoughts on “6 strumenti per Firefox utili allo sviluppatore web

  1. Pingback: diggita.it

  2. @Arianna
    Semplice ma efficace. Ultimamente mi capita di usare parecchio FireShot aggiungendo note al volo sulle immagini per far capire più velocemente di che si parla, chi le riceve pare apprezzare…

  3. No, io fireshot non lo vedo tanto essenziale perché avendo un macbook trovo più facile fare screenshot anche parziali con le funzioni offerte da leopard.

    Comunque sono d’accordo: una volta installati, di questi tools non se ne può fare più a meno! :)

  4. Io ho dovuto toglierli , qualcuno di loro andava i conflitto con altri già presenti , forse ne ho troppi , sapete come si può risolvere o sapere quale va in conflitto con quale?

    Grazie

    Viking

  5. @Viking
    Credo che troppi addon di sicuro possano creare problemi, se non altro di lentezza, a FF. Senza maggiori informazioni io andrei per esclusione, eliminandoli uno alla volta e valutando la stabilità del sistema.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>