Ο Firefox 11 πρόσθεσε δύο νέα εργαλεία προγραμματιστή ιστού στο Το ήδη εντυπωσιακό οπλοστάσιο του Firefox . Η δυνατότητα κλίσης απεικονίζει τις δομές του ιστότοπου σε 3D, ενώ ο Επεξεργαστής στυλ μπορεί να επεξεργαστεί γρήγορα τα φύλλα στυλ CSS.
Η λειτουργία 3D, γνωστή ως Tilt, είναι ένας τρόπος οπτικοποίησης του DOM ενός ιστότοπου. Ενσωματώνεται με το υπάρχον Επιθεωρητής Εγγράφων και χρησιμοποιεί το WebGL για να εμφανίζει πλούσια γραφικά 3D στο πρόγραμμα περιήγησής σας.
Tilt - Τρισδιάστατη οπτικοποίηση ιστότοπου
Μπορείτε να αποκτήσετε πρόσβαση στο Tilt μέσα από το Page Inspector του Firefox. Για να ξεκινήσετε, ανοίξτε το Page Inspector επιλέγοντας "Επιθεώρηση" από το μενού Web Developer. Μπορείτε επίσης να κάνετε δεξί κλικ στην τρέχουσα σελίδα και να επιλέξετε "Επιθεώρηση στοιχείου" για να ξεκινήσετε τον επιθεωρητή σε ένα συγκεκριμένο στοιχείο.
Κάντε κλικ στο κουμπί "3D" στη γραμμή εργαλείων επιθεωρητή.
Θα δείτε τη δομή της σελίδας μετά την ενεργοποίηση της λειτουργίας 3D, αλλά θα φαίνεται επίπεδη μέχρι να την περιστρέψετε.
Περιστρέψτε το μοντέλο κάνοντας αριστερό κλικ, μετακινήστε την εικόνα γύρω με δεξί κλικ και κάντε μεγέθυνση και σμίκρυνση χρησιμοποιώντας τον τροχό του ποντικιού.
Αυτή η προβολή είναι ενσωματωμένη με τα άλλα εργαλεία του επιθεωρητή. Εάν έχετε ανοιχτά τα πλαίσια HTML ή Style, μπορείτε να κάνετε κλικ σε ένα στοιχείο στη σελίδα hte για να δείτε τις ιδιότητες κώδικα HTML ή CSS αυτού του στοιχείου.
Περισσότερες λειτουργίες 3D
Η λειτουργία απεικόνισης 3D βασίστηκε στην επέκταση Tilt, αλλά δεν διαθέτει όλες τις δυνατότητες της επέκτασης Tilt. εάν θέλετε να προσαρμόσετε τα χρώματα ή ακόμη και να εξαγάγετε την οπτικοποίηση ως αρχείο μοντέλου 3D για χρήση με πρόγραμμα επεξεργασίας 3D, θα πρέπει να εγκαταστήσετε το Tilt 3D πρόσθετο . Μόλις το κάνετε, θα λάβετε μια νέα επιλογή "Κλίση" στο μενού προγραμματιστή ιστού
Κάντε κλικ στο κουμπί Άκυρο για να χρησιμοποιήσετε την παλιά έκδοση του Tilt όταν σας ζητηθεί.
Θα βρείτε στοιχεία ελέγχου για να προσαρμόσετε την οπτικοποίηση στην αριστερή πλευρά του παραθύρου και άλλες επιλογές, συμπεριλαμβανομένης της δυνατότητας εξαγωγής, στο επάνω μέρος της σελίδας.
Επεξεργαστής στυλ CSS
Για να προβάλετε και να επεξεργαστείτε τα φύλλα στυλ CSS μιας σελίδας, ανοίξτε το Style Editor από το μενού Web Developer.
Το πρόγραμμα επεξεργασίας στυλ παραθέτει τα φύλλα στυλ στην τρέχουσα σελίδα. Ενεργοποιήστε ή απενεργοποιήστε ένα φύλλο στυλ κάνοντας κλικ στο εικονίδιο ματιού στα αριστερά του ονόματος του φύλλου στυλ. Επεξεργαστείτε ένα φύλλο στυλ επιλέγοντας το και τροποποιώντας τον κώδικα.
Οι αλλαγές αντικατοπτρίζονται αμέσως στη σελίδα. Εάν απενεργοποιήσετε ένα φύλλο στυλ, η σελίδα θα χάσει τις πληροφορίες στυλ. Εάν επεξεργαστείτε ένα φύλλο στυλ, θα δείτε τις αλλαγές να εμφανίζονται στη σελίδα ενώ πληκτρολογείτε.
Μπορείτε να αποθηκεύσετε ένα αντίγραφο ενός φύλλου στυλ στον υπολογιστή σας, να εισαγάγετε ένα υπάρχον φύλλο στυλ από τον υπολογιστή σας ή να προσθέσετε ένα νέο, κενό φύλλο στυλ με τους συνδέσμους Αποθήκευση, Εισαγωγή ή Νέοι στο παράθυρο Επεξεργαστής στυλ.
Η λειτουργία απεικόνισης 3D παρακολουθεί αλλαγές στην τρέχουσα σελίδα και ειδοποιεί όταν συμβαίνουν αλλαγές. Όταν χρησιμοποιείτε τον Επεξεργαστή στυλ με ανοιχτό το πρόγραμμα επιθεώρησης 3D, οι αλλαγές σας θα αντικατοπτρίζονται αμέσως στην προβολή 3D. Αυτό λειτουργεί επίσης με επεκτάσεις τρίτων που τροποποιούν ιστοσελίδες, όπως το Firebug.
