css3.gr

Inspect element. Όσοι από εσάς έχετε ασχοληθεί έστω και λίγο με web design ή/και web development, οι δύο αυτές λέξεις θα σας φανούν γνώριμες. Ο τρόπος με τον οποίο μπορεί πλέον ο οποιοσδήποτε να ερευνήσει τον κώδικα μιας σελίδας με δύο κλικ ίσως να φαίνεται αυτονόητος για πολλούς, τα πράγματα όμως δεν ήταν πάντα έτσι.

Μέχρι πρόσφατα, η διαδικασία αποσφαλμάτωσης των σελίδων ήταν αρκετά επίπονη, αφού τόσο για το markup (HTML) όσο και για την Javascript οι developers/designers θα έπρεπε είτε να μάθουν καλά ένα εξωτερικό εργαλείο και να κάνουν την δουλεία τους εκεί, όπως το Dreamweaver, ή να χρησιμοποιούν κάποιο από τα πολλά extensions του Firefox με τις χιλιάδες επιλογές και τα submenus.

Αυτό όμως ευτυχώς έχει πλέον σταματήσει. Η διαδικασία αποσφαλμάτωσης μιας ιστοσελίδας άρχισε να βελτιώνεται αισθητά, με την κυκλοφορία του Firebug. Το Firebug, που πρόκειται πλέον για ένα από τα πιο διαδεδομένα Firefox extensions, έγινε το δεξί χέρι κάθε δημιουργού ιστοσελίδων, τόσο χάρη στο σχεδιασμό του, όσο και στην πληθώρα των χαρακτηριστικών που ενσωμάτωνε.

Το Firebug εν δράσει.

Έτσι λοιπόν, η παρακολούθηση του κώδικα γίνεται πλέον μέσα στην ίδια σελίδα, αφού το εργαλείο “ζει” στο κάτω μέρος του παραθύρου, και ο προγραμματιστής μπορεί όχι μόνο να μελετήσει τον κώδικα με κάθε λεπτομέρεια, αλλά και να επέμβει σε αυτόν αλλάζοντας το markup, τις CSS ιδιότητες, να παρατηρήσει το DOM model, να προσθέσει breakpoints και να εξετάσει τον Javascript κώδικα. Καθόλου άσχημα για ένα και μόνο extension δεν νομίζετε;

Αργά αλλά σταθερά, το Firebug έγινε μέρος του development process, βοηθώντας όχι μόνο στον έλεγχο εμφάνισης των σελίδων αλλά και στην realtime αλλαγή των ιδιοτήτων πριν γίνει οποιαδήποτε αλλαγή στον κώδικα, σώζοντας έτσι πολύτιμο χρόνο.

Τα καλά νέα όμως δεν σταματούν εδώ. Μετά την επιτυχία του Firebug, οι υπόλοιποι κατασκευαστές browsers (Opera, Webkit, Microsoft), υιοθέτησαν το στυλ του Firebug, φέροντας παρόμοια εργαλεία στους φυλλομετρητές τους. Εδώ αξίζει να σημειώσουμε, πως ενώ το Firebug πρόκειται για ένα extension του Firefox, το Chrome, το Safari, η Opera και ο Internet Explorer 8 φέρουν αυτά τα εργαλεία στο βασικό τους πακέτο, χωρίς να απαιτούν δηλαδή την εγκατάσταση κάποιου plugin.

Κάθε μια από τις υλοποιήσεις του περιβάλλοντος του Firebug στους υπόλοιπους browsers έχει τα δικά της χαρακτηριστικά, παρόλα αυτά όλες έχουν κοινό interface, μηδενίζοντας έτσι τον χρόνο εκμάθησης.

Έτσι λοιπόν, Safari και Chrome που χρησιμοποιούν το Webkit, έχουν τον Web Inspector, που υλοποιεί αρκετά (αν όχι σχεδόν όλα) χαρακτηριστικά του Firebug, και επιπρόσθετα προσφέρει δυνατότητες profiling, δηλαδή μέτρηση χρόνου φόρτωσης και απεικόνισης των σελίδων, αλλά και επεξεργασίας των HTML 5 local και session storage.

Το Web Inspector στο Safari 4.

Το ίδιο εργαλείο στην τελευταία έκδοση του Google Chrome (4).

Η Opera, ενσωμάτωσε από την 9.5 έκδοση και μετά, το εργαλείο ‘Dragonfly’ που αντικατέστησε το προηγούμενο πιο απλό tool. Το Dragonfly έχει και αυτό το ίδιο περιβάλλον με το Firebug καθώς και όλα σχεδόν τα χαρακτηριστικά του, κάνοντας έτσι εύκολη τόσο την αποσφαλμάτωση, όσο και το design σε αυτόν τον browser για όποιον θέλει να δοκιμάσει κάτι εναλλακτικό.

Οι ομοιότητες του Dragonfly της Opera με το Firebug είναι εμφανείς.

Τέλος η Microsoft με τον Internet Explorer 8, έκανε επιτέλους ίσως το πιο σωστό της βήμα εδώ και καιρό στην αγορά των browsers. Ο Internet Explorer 8 διαθέτει και αυτός ένα πλούσιο εργαλείο εμπνευσμένο από την λειτουργικότητα του Firebug, το οποίο εκτός του ότι δεν έχει πολλά να ζηλέψει από τα προηγούμενα που αναφέραμε, δίνει την δυνατότητα στους developers να προσομοιώσουν την εμφάνιση της σελίδας σε περιβάλλον Internet Explorer 7 (και δεν εννοώ το compatibility view), απλά με ένα click. Έτσι ο προγραμματιστής μπορεί να ελέγχει άμεσα την σελίδα και για IE7 χωρίς να ψάχνει για άτομα που δεν έχουν κάνει update ή για σκονισμένα virtual machines.

Τα developer tools του Internet Explorer 8.

Η σύγκλιση των μεγαλύτερων browser vendors σε ένα κοινό interface για το debugging και όχι μόνο των σελίδων έχει βοηθήσει σε πολύ μεγάλο βαθμό όσους ασχολούνται με το sport, γιατί πλέον μπορούν να ρίξουν το βάρος εκεί που πρέπει. Δυστυχώς το αγκάθι του Internet Explorer 6 υπάρχει ακόμη, αλλά μάλλον όχι για πολύ.

Ένα είναι σίγουρο, το web development και debugging στις μέρες μας είναι ξεκάθαρα λιγότερο αγχωτικό από ότι παλαιότερα, και αυτό σημαίνει πολλά.

Αντί επιλόγου, να σημειώσω πως σχετικά με το Firebug, που επάξια θεωρείται το δεξί χέρι του web developer στις μέρες μας, δεν θα πρέπει να δημιουργούνται λανθασμένες απόψεις. Υπάρχουν πράγματα που το Firebug δεν κάνει και στα οποία μπορούν να βοηθήσουν άλλα εργαλεία (HTML validation, measuring, color pickers). Αλλά όταν γενικά στην σελίδα κάτι δεν φαίνεται όπως θα έπρεπε, δύο είναι οι λέξεις: Inspect element.

Στέλιος Πετράκης

Ο Στέλιος Πετράκης (stelabouras) δηλώνει φανατικός gamer και web addict. Εργάζεται ως web developer στην Phaistos Networks, ολοκληρώνει το μεταπτυχιακό του, γράφει posts στο Wiggler.gr, αναπτύσσει και συντηρεί το Slideflickr.com και στον ελεύθερό του χρόνο πειραματίζεται με οτιδήποτε έχει σχέση με web, programming, design και games.

Θέλεις το επόμενο κείμενο να είναι το δικό σου;

ΜΑΘΕ ΠΕΡΙΣΣΟΤΕΡΑ