Θα παραθέσω σήμερα 5 πρόσθετα για τον Firefox για όσους φίλους ή web hosting πελάτες της dnHost ασχολούνται με την ανάπτυξη websites με CSS.
Aς αρχισουμε λοιπόν.
1) Firebug
Σε πολλούς γνωστό το Firebug, βοηθάει με πολλούς τρόπους. Χρησιμεύει στην αποσφαλμάτωση CSS και Javascript (debugging) γιατί ως γνωστόν, κανείς δεν είναι άσφαλτος!
- Η καρτέλα HTML σας βοηθάει στην επιθεώρηση των στοιχείων της σελίδας (inspect elements) και στον έλεγχο των CSS atributes τους. Μπορείτε να δουλέψετε στον κώδικα CSS σε πραγματικό χρόνο και να προσθέσετε, να αλλάξετε ή να διαγράψετε διάφορα στοιχεία στην HTML.
- Η καρτέλα “console” χρησιμεύει στην αποσφαλμάτωση λαθών στην Javascript.
- Η καρτέλα “net” σας επιτρέπει να δείτε κάθε αίτημα που στέλνεται από τους browsers προς τον server που κάνει το web hosting του site σας. Θα σας βοηθήσει να ανιχνεύσετε δυσλειτουργίες στον server ή απλά σε λάθη όπως να ξεχάσετε κάποια κάθετο στο url όταν καλείτε μια εικόνα ή άλλο στοιχείο.
2) YSlow (Add-on του Firebug)
Το Firebug μπορεί να δεχτεί και το ίδιο πρόσθετα όπως το YSlow που αναπτύχθηκε από την Yahoo και μετράει την ταχύτητα του website σας. Με το YSlow μπορείτε να βρείτε πως θα βελτιώσετε την ταχύτητα της ιστοσελίδας σας ή να βρείτε τι φταίει αν κάτι δεν πάει καλά.
3) Web Developer Toolbar
Η εργαλειοθήκη Web Developer Toolbar είναι επίσης πολύ απαραίτητη, με πολλά εργαλεία όπως:
- Χάρακας που δείχνει το μήκος και το ύψος κάθε στοιχείου του website.
- Οδηγός χάραξης οριζόντιων ή κάθετων γραμμών για να ελέγξετε αν το layout σας είναι σωστά ευθυγραμμισμένο.
- Έλεγχος εμφάνισης ενός website σε διαφορετικές οθόνες.
- Τοπικός έλεγχος και πιστοποίηση έγκυρου κώδικα HTML και CSS, που γίνεται με απευθείας σύνδεση με τη σελίδα ελέγχου της W3C.
- Απενεργοποίηση των CSS ή της Javascript.
Εγκατάσταση του Web Developer Toolbar
4) ColorZilla
Το ColorZilla είναι ένα εργαλείο για να δουλέψετε πάνω στα χρώματα. Έχετε ένα εργαλείο συλλογής χρωμάτων (eyedropper) που σας βοηθά να πάρετε τον κωδικό του χρώματος οποιουδήποτε στοιχείου στο website σας. Με το ColorZilla μπορείτε:
- Να χειριστείτε χρώματα RGB ή HEX.
- Να έχετε παλέττα για να προσαρμόσετε ή να διορθώσετε χρώματα.
- Να εστιάσετε για να σημαδέψετε καλύτερα το στόχο σας αν είναι ένα πολύ μικρό στοιχείο (πχ κείμενο ή πολύ μικρά γραφικά).
Εγκατάσταση του ColorZilla στον Firefox σας
5) ReCSS (Javascript για Επαναφόρτωση CSS)
Ένα επίσης χρήσιμο εργαλείο που σας επιτρέπει να επαναφορτώσετε (reload) το CSS αρχείο σας, χωρίς να πρέπει να ξαναφορτώσετε και την HTML. Xρήσιμο όταν εφαρμόζετε αλλαγές στα CSS σε μεγάλα sites και δουλεύει με κάθε browser.
6) Dust me selectors
Σας έτυχε ποτέ να έχετε ένα τεράστιο αρχείο CSS στο οποίο έχετε κάνει τόσες πολλές αλλαγές, τις οποίες δε θυμάστε κάν; Πιθανότατα κάποιοι selectors να μη χρησιμοποιούνται πια και το Dust-me selectors ελέγχει αν υπάρχουν CSS selectors που δε χρησιμοποιούνται στις σελίδες σας ώστε να τους διαγράψετε.
Προσοχή:
Αν χρησιμοποιείτε Reset CSS styles στον κώδικά σας πολλοί selectors θα παρουσιαστούν ως αχρησιμοποίητοι. Κάντε comment αυτές τις γραμμές στο CSS αρχείο σας όταν χρησιμοποιείτε το εργαλείο dust-me selectors.
Εγκατάσταση του Dust-me Selectors
Θα περιμένω και τις δικές προτάσεις ή τη γνώμη σας για τα προτεινόμενα add-ons.
