Διαφήμιση
Έχω κάνει αρκετή ανάπτυξη στο Web και το Google Chrome είναι το κύριο πρόγραμμα περιήγησής μου αυτές τις μέρες. Το Chrome είναι αρκετά φιλικό για προγραμματιστές ως έχει και μπορείτε επίσης να το ρυθμίσετε Firebug στο Chrome Πώς να εγκαταστήσετε το Firebug σε IE, Safari, Chrome & Opera Διαβάστε περισσότερα . Αλλά σήμερα ήθελα να σας δείξω μια διαφορετική επέκταση Chrome που ονομάζεται Pendule. Το Pendule συμπληρώνει την ενσωματωμένη λειτουργία Inspect Element του Chrome με μερικά ενδιαφέροντα πρόσθετα.
Το μενού Pendule
Το κουμπί της γραμμής εργαλείων του Pendule βγαίνει από ένα κομψό μενού, χωρισμένο σε έξι κύριες περιοχές. Πρώτα πάνω, το Φύλλα στυλ Ενότητα. ο Προβολή CSS η επιλογή μπορεί να φαίνεται περιττή - τελικά, το Chrome μας επιτρέπει ήδη να δούμε CSS… ή το κάνει;
Πολλοί ιστότοποι χρησιμοποιούν συμπιεσμένο CSS, με ορισμένους να το συμπιέζουν στο σημείο της δυσανάγνωστης αναγνώρισης. Εάν είστε ο μόνος προγραμματιστής Ιστού στον ιστότοπό σας, ίσως μπορείτε να αποφασίσετε μόνοι σας πόσο θέλετε να συμπιέσετε το CSS. Για μένα, δεν υπάρχει τέτοια τύχη. Ένας από τους ιστότοπους στους οποίους δουλεύω συμπιέζει το CSS χρησιμοποιώντας ένα εργαλείο PHP που ονομάζεται
Ελαχιστοποιήστε, επομένως ο έλεγχος του CSS με τα ενσωματωμένα εργαλεία του Chrome δείχνει κάτι σαν αυτό:
Όχι ακριβώς η πιο ευανάγνωστη μορφή που μπορεί να φανταστεί κανείς. Με το Pendule, μπορώ εύκολα να ομορφύνω το CSS στο πλευρό μου. Απλώς κάνω κλικ στο κουμπί Pendule και κάνω κλικ Προβολή CSS. Τότε παίρνω κάτι σαν αυτό:
Ακόμα δεν είναι πολύ ευανάγνωστο. Αλλά κάντε κλικ στο Ομορφιά CSS κουμπί και παρακολουθήστε τη μαγεία να συμβαίνει:
Τώρα μιλάμε! Αν και δεν μπορείτε να αλλάξετε τίποτα στην προβολή CSS, αυτό είναι μια μεγάλη βελτίωση όσον αφορά το συμπιεσμένο CSS.
Χειρισμός εικόνων
Το Pendule προσφέρει επίσης μερικά ενδιαφέροντα βοηθητικά προγράμματα που σχετίζονται με την εικόνα:
“Προβολή πληροφοριών εικόνων"Σας μεταφέρει σε μια εντελώς νέα ιστοσελίδα που περιέχει όλες τις εικόνες από την τρέχουσα σελίδα, καθεμία με πολλές σχετικές πληροφορίες:
Αυτό είναι βολικό γιατί σας επιτρέπει να κάνετε κύλιση σε όλες τις εικόνες μία προς μία και να τις ελέγχετε ξεχωριστά. Για παράδειγμα, ορισμένοι ιστότοποι εξυπηρετούν περιεχόμενο από έναν διακομιστή και σχετικές εικόνες από έναν άλλο διακομιστή (για να επιταχύνουν τα πράγματα). Με αυτήν την προβολή, μπορείτε να δείτε ακριβώς από πού προέρχεται κάθε εικόνα και να εντοπίσετε εύκολα αυτές που δεν προβάλλονται από τη σωστή πηγή.
Μπορείτε επίσης να διαβάσετε το κείμενο Alt για κάθε εικόνα, το οποίο μπορεί να είναι το κλειδί για τις προσφορές SEO. Ωστόσο, αν σας ενδιαφέρει απλώς το κείμενο Alt, το Pendule σάς επιτρέπει να ελέγχετε εύκολα αυτήν τη σελίδα, χρησιμοποιώντας το "Εμφάνιση εναλλακτικού κειμένουΕπιλογή. Όταν είναι ενεργοποιημένες, οι εικόνες στη σελίδα σας μοιάζουν με αυτήν:
Αυτό συμβαίνει να προέρχεται από μια υπέροχη ανάρτηση με τίτλο 3 σημάδια Η Apple μετατοπίζει τη Microsoft για να γίνει η κακή αυτοκρατορία, αλλά το σημείο εδώ είναι το μικρό απόσπασμα "alt =" πάνω από την εικόνα. Μοιάζει με μια συμβουλή εργαλείου, αλλά δεν χρειάζεται να τοποθετήσετε το δείκτη του ποντικιού πάνω του για να το δείξετε. Με "Εμφάνιση εναλλακτικού κειμένου", Μπορείτε απλά να μετακινηθείτε στην ιστοσελίδα σας και να δείτε ακριβώς ποιες εικόνες λείπουν ή λανθασμένα Alts.
Διάφορα βοηθητικά προγράμματα
Το μενού Διάφορα βοηθητικά προγράμματα του Pendule περιέχει μερικά ενδιαφέροντα καλούδια. ο Προβολή JavaScript προϊόντα μια μεμονωμένη ιστοσελίδα χωρισμένη σε ενότητες, μία ενότητα για κάθε σενάριο που περιέχει η τρέχουσα σελίδα. Μοιάζει πολύ με το «Προβολή CSSΕπιλογή που ξεκινήσαμε με, Προβολή JavaScript σας επιτρέπει να ομορφιώσετε τον κώδικα για να τον διαβάσετε. Το JavaScript είναι σχεδόν πάντα συμπιεσμένο (ακόμη περισσότερο από το CSS), οπότε αυτή είναι μια πολύ βολική επιλογή αν θέλετε να διαβάσετε κώδικα για να μάθετε πώς λειτουργούν τα πράγματα.
Ο "Χάρακας οθόνης"Η επιλογή σβήνει τη σελίδα και την επικαλύπτει με ένα επαναπροσδιορίσιμο, σύρσιμο πλαίσιο με μια μικρή ετικέτα που δείχνει τις διαστάσεις της ανά πάσα στιγμή. Αυτό είναι πολύ βολικό για να ελέγξετε αν τα στοιχεία είναι σωστά ευθυγραμμισμένα, για παράδειγμα.
