Σπίτι › ΜΕ › Αποχρώσεις επεκτάσεων Google Chrome για προγραμματιστές. Επεκτάσεις Google Chrome για ανάπτυξη ιστού και πολλά άλλα. Ποιες εκδόσεις του Chrome υπάρχουν;

Αποχρώσεις επεκτάσεων Google Chrome για προγραμματιστές. Επεκτάσεις Google Chrome για ανάπτυξη ιστού και πολλά άλλα. Ποιες εκδόσεις του Chrome υπάρχουν;

Πρόγραμμα περιήγησης Google Chrome– μια εξαιρετική επιλογή για σχεδιαστές και προγραμματιστές ιστού. Με τις επεκτάσεις για το GoogleChrome, μπορείτε να προσθέσετε περισσότερα χαρακτηριστικά, το οποίο μπορεί να βοηθήσει με το σχεδιασμό, την εύρεση σφαλμάτων και άλλες εργασίες με τον ιστότοπο. Εδώ παρουσιάζουμε τις καλύτερες επεκτάσεις Chrome για σχεδιαστές και προγραμματιστές.

Δοκιμή ανάλυσης– αυτή η επέκταση έχει σχεδιαστεί για να ελέγχει ιστοσελίδες σε διαφορετικές αναλύσεις οθόνης και μπορείτε να ορίσετε τις δικές σας ρυθμίσεις ανάλυσης. Αυτό το εργαλείο είναι πολύ βολικό για να ελέγξετε πώς φαίνεται το σχέδιό σας σε διαφορετικά μεγέθη οθόνης.

Το Pendule επεκτείνει τη λειτουργικότητα των ενσωματωμένων εργαλείων του Google Chrome. Με αυτήν την επέκταση, οι χρήστες έχουν πολλές πρόσθετες δυνατότητες, όπως: αξιολόγηση ετικετών περιορισμού χρησιμοποιώντας αυτοματοποιημένες υπηρεσίες web του W3C, απόκρυψη εικόνων σε μια σελίδα, προβολή σεναρίων ενσωματωμένων σε μια σελίδα και πολλά άλλα.

Απλά ρούχαΚάνει μόνο ένα πράγμα καλά - αφαιρεί όλα τα CSS στη σελίδα. Ένας από τους αγαπημένους τρόπους αξιολόγησης της προσβασιμότητας μιας ιστοσελίδας είναι να αφαιρέσετε τα στυλ CSS και να συγκρίνετε την αναγνωσιμότητα της σελίδας με και χωρίς τα στυλ. Αυτή η προσέγγιση προσομοιώνει μια κατάσταση όπου ο χρήστης εμφανίζει μόνο μια μερική σελίδα στην οθόνη του και μπορεί να βασίζεται μόνο σε ετικέτες σελίδας για πρόσβαση στο περιεχόμενο.
Παρόλο που αυτό το πρόγραμμα δημιουργήθηκε αρχικά για τη δοκιμή ιστοσελίδων, μπορείτε να το χρησιμοποιήσετε για να προβάλετε τα αγαπημένα σας στυλ με «άθετο» τρόπο (έτσι το αφεντικό σας δεν θα σας πιάσει να το κοιτάτε όσο χρειάζεται να ολοκληρώσετε μια λειτουργία JavaScript).

Εάν θέλετε να περικόψετε συγκεκριμένα μέρη μιας ιστοσελίδας, το Image Cropper είναι η προφανής επιλογή σας. Αυτό το πρόγραμμα είναι τόσο απλό όσο ένα ραβδί και δεν έχει τεχνάσματα. Απλώς καθορίστε την περιοχή που θέλετε να κόψετε και η εφαρμογή θα την πάρει. Χρειάζεστε ακρίβεια pixel; Η επέκταση εμφανίζει το μέγεθος και τη θέση των κομματιών που κόβετε, ώστε να μπορείτε να επιλέξετε το μέγεθος που χρειάζεστε.

Αυτή η επέκταση υπερηφανεύεται ότι είναι μινιμαλιστική και απλή - κάτι που είναι καλό, γιατί δεν υπάρχει λόγος να περιπλέκεται η παραγωγή του κειμένου Lorem Ipsum. Η γεννήτρια Lorem Ipsum σάς επιτρέπει να γεμίζετε πλαίσια με κείμενο όταν σχεδιάζετε τον ιστότοπο παρουσίασής σας.

Εντοπισμός σφαλμάτων στον κινητήρα Internet ExplorerΤο Trident δεν είναι καθόλου διασκεδαστικό. Χρησιμοποιώντας το IE Tab, μπορείτε τουλάχιστον να εξοικονομήσετε λίγο χρόνο και να μην χρειαστεί να χρησιμοποιήσετε τον Internet Explorer (για να μην αναφέρουμε ότι δεν έχει πολλές επεκτάσεις) για να βρείτε προβλήματα απόδοσης.

Το jQuery Shell σάς επιτρέπει να εκτελείτε εντολές javascript και jQuery στο πλαίσιο μιας ανοιχτής ιστοσελίδας. Μια πολύ χρήσιμη επέκταση για εκμάθηση και πειραματισμό με το jQuery.

10.

Αυτή η εφαρμογή είναι μάστερ σε ένα κόλπο. Το κόλπο είναι ότι το πρόγραμμα σάς επιτρέπει να λαμβάνετε γρήγορα τις τιμές Hex και RGB οποιουδήποτε χρώματος σε οποιαδήποτε ιστοσελίδα. Αυτή η δυνατότητα μπορεί να σας φανεί χρήσιμη εάν πρέπει να προσδιορίσετε ποια χρώματα χρησιμοποιεί ο αγαπημένος σας ιστότοπος χωρίς να χρησιμοποιήσετε το Photoshop και το εργαλείο Eyedropper.

11.

Χρησιμοποιώντας τη λειτουργία WebEdit, μπορείτε να κάνετε οποιαδήποτε σελίδα διαθέσιμη για επεξεργασία (οι αλλαγές που κάνετε, φυσικά, δεν θα αποθηκευτούν). Λοιπόν, γιατί το χρειάζεστε αυτό τότε; Να γιατί: εάν δημιουργείτε έναν ιστότοπο και θέλετε να παίξετε με στοιχεία χωρίς να κάνετε σημαντικές αλλαγές στον κώδικα, αυτή η εφαρμογή θα σας φανεί πολύ χρήσιμη.

12.

Θέλατε ποτέ να μάθετε με τι τεχνολογίες, δομές και εφαρμογές ανοιχτή πηγήχρησιμοποιεί συγκεκριμένο ιστότοπο; Οι έμπειροι προγραμματιστές μπορούν να απαντήσουν σε αυτές τις ερωτήσεις μελετώντας πηγή, αλλά αν θέλετε να λαμβάνετε την απάντηση πιο γρήγορα και πιο εύκολα, δοκιμάστε το Chrome Sniffer. Το Chrome Sniffer παραθέτει όλα τα γνωστά πλαίσια/βιβλιοθήκες javascript (jQuery, MooTools, κ.λπ.) και CMS (Drupal, WordPress κ.λπ.) που χρησιμοποιούνται από έναν ιστότοπο.

13.
Σταγονόμετρο ματιώνείναι μια επέκταση για το Google Chrome που σας επιτρέπει να εντοπίζετε χρώμα σε οποιαδήποτε ιστοσελίδα. Επιπλέον, το πρόγραμμα παρέχει έναν "τροχό" χρώματος και δείγματα χρωμάτων (τα οποία μπορούν να βρεθούν σε οποιοδήποτε πρόγραμμα γραφικών), ώστε να πειραματιστείτε και να χειριστείτε τα χρώματα για να βρείτε αυτό που θέλετε.

15.

Μια σωστά κατασκευασμένη ιστοσελίδα με καλή σήμανση οδηγεί τελικά στο να έχει εντυπωσιακά αποτελέσματα στις μηχανές αναζήτησης. Ωστόσο, εάν θέλετε να αξιολογήσετε τον ιστότοπό σας σε σχέση με γνωστές παραμέτρους βελτιστοποίησης μηχανών αναζήτησης, τότε θα πρέπει να δοκιμάσετε το SEO Site Tools, μια επέκταση που σας προσφέρει μια τεράστια γκάμα χρήσιμων εργαλείων και δυνατοτήτων αξιολόγησης SEO. Μπορεί να διαβάσει πολλές παραμέτρους εντός και εκτός της σελίδας, να λάβει πληροφορίες από τα μέσα κοινωνικής δικτύωσης και όλα αυτά.

Υπάρχουν πολλές εκδόσεις που έχουν δημιουργηθεί για διαφορετικές κατηγορίες χρηστών. Ένα από αυτά ονομάζεται Έκδοση Google Chrome για προγραμματιστές. Τι είδους έκδοση είναι αυτή και γιατί χρειάζεται; Σχετικά με αυτό και θα μιλήσουμεσε αυτό το υλικό.

Αξίζει να σημειωθεί ότι εναλλακτικές εκδόσεις του Chrome έχουν εμφανιστεί εδώ και πολύ καιρό. Συνοδεύουν αυτό το δημοφιλές πρόγραμμα περιήγησης σχεδόν από την έκδοση εκκίνησης. Αλλά δεν είναι όλοι οι χρήστες κατάλληλοι για εναλλακτικές επιλογές.

Το γεγονός είναι ότι οι "άλλες" εκδόσεις του Chrome προορίζονται για επαγγελματίες σε έναν ή τον άλλο τομέα: σχεδιαστές διάταξης, δοκιμαστές, προγραμματιστές κ.λπ. Τέτοια προγράμματα περιήγησης δεν είναι κατάλληλα για απλούς χρήστες. Κι όμως, πρέπει να μιλήσουμε για αυτούς.

Ποιες εκδόσεις του Chrome υπάρχουν;

Στην πραγματικότητα, δεν είναι τόσοι πολλοί. Ωστόσο, υπάρχει μόνο ένα σταθερό. Αυτό είναι ακριβώς αυτό που διατίθεται δημόσια. Οποιοσδήποτε χρήστης μπορεί να το κατεβάσει. Υπάρχουν όμως και εναλλακτικές εκδοχές. Ας τους ρίξουμε μια πιο προσεκτική ματιά.

Αυτές είναι οι εκδόσεις του αγαπημένου Google Chrome όλων που υπάρχουν. Ωστόσο, σε αυτό το πλαίσιο μας ενδιαφέρει η Έκδοση για προγραμματιστές. Επομένως, όλα πρέπει να ληφθούν υπόψη βασικά χαρακτηριστικάαυτή η έκδοση για περισσότερες λεπτομέρειες. Μόνο τότε μπορεί να βγει ένα συμπέρασμα.

Χαρακτηριστικά έκδοσης προγραμματιστή

Το βασικό χαρακτηριστικό αυτού εκδόσεις GoogleΤο Chrome είναι η διαθεσιμότητα εργαλείων ανάπτυξης. Θα είναι χρήσιμα σε όσους αναπτύσσουν επεκτάσεις και προσθήκες για αυτό το πρόγραμμα περιήγησης ιστού. Ο μέσος χρήστης θα χαθεί σε τέτοια εργαλεία.

Το δεύτερο χαρακτηριστικό είναι η προηγμένη κονσόλα. Χρησιμοποιείται για την επεξεργασία του κώδικα και την ενεργοποίηση κρυφές λειτουργίεςπρόγραμμα περιήγησης. Ωστόσο, πρέπει να ξέρετε πώς να το δουλέψετε. Το παραμικρό λάθος σε μια ομάδα μπορεί να οδηγήσει σε πολύ τρομερές συνέπειες.

Ένα άλλο «κόλπο» είναι η παρουσία όλων των πιο πρόσφατων καινοτομιών που έχουν μεταναστεύσει αυτή η έκδοσηαπό τα Κανάρια. Χάρη σε αυτό, οι προγραμματιστές μπορούν να βελτιστοποιήσουν τις επεκτάσεις τους για νέες δυνατότητες προγράμματος περιήγησης ιστού.

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

συμπέρασμα

Έτσι, παραπάνω μιλήσαμε για το ποιες εκδόσεις του Google Chrome υπάρχουν και συζητήσαμε λεπτομερώς την κατασκευή για προγραμματιστές. Τώρα είναι σαφές ότι αυτή η έκδοση διακρίνεται από ένα σύνολο εργαλείων και μια προηγμένη κονσόλα.

Αξίζει να σημειωθεί ότι οι απλοί χρήστες δεν χρειάζεται να εγκαταστήσουν καθόλου την Έκδοση για προγραμματιστές. Δεν θα έχει νόημα από αυτό. Επιπλέον, αυτό το συγκρότημα δεν είναι ιδιαίτερα σταθερό. Εάν δεν είστε προγραμματιστής, τότε είναι καλύτερο να χρησιμοποιήσετε το Stable.

Υπάρχει ένας τεράστιος αριθμός δωρεάν επεκτάσεων για Google browser Chrome που διευκολύνουν τη ζωή σας. Εδώ είναι 20 από τα καλύτερα.

Σε αυτό το άρθρο, παρουσιάζουμε τις καλύτερες επεκτάσεις του Google Chrome για διαφορετικούς σκοπούς - αλλά καθεμία έχει σχεδιαστεί για να διευκολύνει τη δουλειά σας.

Ο Firefox είναι από καιρό διάσημος για την προσαρμογή του και τις πολλές επεκτάσεις του, αλλά το Google Chrome έχει επίσης κερδίσει μεγάλη δημοτικότητα μεταξύ των σχεδιαστών και προγραμματιστών ιστού τα τελευταία χρόνια. Ένας από τους λόγους για αυτό είναι η ταχύτητα και τα ενσωματωμένα εργαλεία προγραμματιστή.

Τώρα, με την ανάπτυξη της συλλογής επεκτάσεων Chrome, η οποία επεκτείνεται καθημερινά, αυτός είναι ο λόγος που πολλοί προγραμματιστές και σχεδιαστές ιστού επιλέγουν αυτό το πρόγραμμα περιήγησης για τον εαυτό τους.

Θέλετε να μάθετε περισσότερα για αυτό; Δείτε τη λίστα μας.

01. iMacros για Chrome

Η επέκταση iMacros Chrome σάς επιτρέπει να καταγράφετε και να αποθηκεύετε τις ενέργειές σας.

Ως προγραμματιστής ιστού, ίσως χρειαστεί να ελέγξετε τις ιστοσελίδες σας. Το να κάνετε τα ίδια πράγματα ξανά και ξανά μπορεί να είναι μια κουραστική διαδικασία. Το iMacros είναι μια εύχρηστη επέκταση για το Chrome που σας επιτρέπει να καταγράφετε τις ενέργειές σας και να τις αποθηκεύετε, απαιτώντας από εσάς να εκτελέσετε την ενέργεια μόνο μία φορά.

Στη συνέχεια, μπορείτε να ελέγξετε τις σελίδες σας ξανά και ξανά, επαναλαμβάνοντας τα βήματα με το πάτημα ενός κουμπιού. Αυτό εξοικονομεί πολύτιμο χρόνο και σας επιτρέπει να συγκεντρωθείτε σε πιο σημαντικά θέματα.

02. Παιδική χαρά γραμματοσειράς

Το Font Playground σάς επιτρέπει να πειραματιστείτε με τοπικές γραμματοσειρές σε ζωντανές ιστοσελίδες.

Κάθε σχεδιαστής και προγραμματιστής θα βρει πολλά χρήσιμα πράγματα σε αυτήν την επέκταση. Το Font Playground σάς επιτρέπει να πειραματιστείτε με τοπικές γραμματοσειρές και όλες τις βιβλιοθήκες γραμματοσειρών Google σε ενεργές ιστοσελίδες χωρίς να κάνετε αλλαγές στις ίδιες τις σελίδες.

Το καλό με αυτήν την επέκταση είναι ότι περιλαμβάνει όλα τα πιθανά μεγέθη γραμματοσειράς, στυλ και εφέ. Μπορείτε πρώτα να οπτικοποιήσετε διαφορετικές επιλογές γραμματοσειράς πριν κάνετε οποιεσδήποτε πραγματικές αλλαγές στον κώδικα.

03. Τι γραμματοσειρά

Τι γραμματοσειρά χρησιμοποιούν; Η επέκταση What Font Chrome μπορεί να σας δείξει αυτό!

Μια πολύ χρήσιμη επέκταση για το Google Chrome, το What Font επιτρέπει στους προγραμματιστές και τους σχεδιαστές να προσδιορίζουν ποιες γραμματοσειρές χρησιμοποιούνται σε μια ιστοσελίδα.

Έτσι, αν συναντήσετε μια γραμματοσειρά κάπου στο διαδίκτυο που φαίνεται φανταστική και θέλετε να τη χρησιμοποιήσετε σε ένα από τα μελλοντικά σας έργα, απλώς τοποθετήστε το δείκτη του ποντικιού πάνω της και θα μάθετε αμέσως τι είναι.

04. Yslow

Το YSlow θα σας πει τι επιβραδύνει τη σελίδα.

Με αυτό το εργαλείο, δεν μπορείτε απλώς να ελέγξετε πόσο γρήγορα φορτώνει μια ιστοσελίδα, αλλά θα σας δείξει επίσης εάν κάτι την επιβραδύνει.

Το YSlow ελέγχει τις ιστοσελίδες με 23 από τους 34 κανόνες απόδοσης που αναπτύχθηκαν από την ομάδα της Yahoo. Αυτό είναι εξαιρετικά χρήσιμο εργαλείογια την ανάλυση ιστοσελίδων, η οποία προτείνει επίσης τρόπους βελτιστοποίησης της απόδοσής τους.

05. Web Developer

Η επέκταση Chrome Web Developer παρέχει μια σειρά από χρήσιμα εργαλεία για προγραμματιστές.

Εάν είστε προγραμματιστής ιστού, μπορείτε να αναρωτηθείτε: πώς τα καταφέρατε μέχρι τώρα χωρίς αυτήν την επέκταση. Προσθέτει ένα κουμπί γραμμής εργαλείων που δίνει στο Chrome πρόσβαση σε πολλά χρήσιμα εργαλεία για προγραμματιστές ιστού.

Αυτό επίσημη έκδοσηΗ επέκταση Web Developer αναπτύχθηκε για τον Firefox.

06. Λίστα ελέγχου Web Developer

Διορθώνει προβλήματα απόδοσης σε αυτό το εύχρηστο εργαλείο του Chrome.

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

Επομένως, εάν, για παράδειγμα, χάσατε μια ετικέτα H1 ή εάν από μια σελίδα λείπει ένας μετα-τίτλος ή μια περιγραφή μεταδεδομένων, η επέκταση λίστας ελέγχου προγραμματιστή Ιστού σάς ειδοποιεί σχετικά.

Για να μπορέσετε να λύσετε γρήγορα αυτό το πρόβλημα. Εάν κάνετε κλικ στον σύνδεσμο " περισσότερες πληροφορίες και βοήθεια» στο κάτω μέρος της επέκτασης, θα βρείτε μια πιο λεπτομερή λίστα.

07. DevTools Autosave

Αποθηκεύει αυτόματα τις αλλαγές στα αρχεία προέλευσης σελίδας (CSS και JS).

Ένας πραγματικός θησαυρός για όλους τους προγραμματιστές, το DevTools Autosave σάς επιτρέπει να αποθηκεύετε αυτόματα τυχόν αλλαγές που γίνονται στα αρχεία πηγής CSS και JS μιας σελίδας μέσω του περιβάλλοντος του Chrome Dev Tools. Η επέκταση είναι εύκολη στη ρύθμιση και στη χρήση και θα σας εξοικονομήσει πολύ χρόνο.

08. Instant Wireframe

Σας επιτρέπει να προβάλλετε καλώδια ιστοσελίδων.

Συνδέστε την προβολή wireframe οποιασδήποτε ιστοσελίδας με ένα μόνο κλικ. Αυτή η επέκταση του Google Chrome βοηθά τους προγραμματιστές και τους σχεδιαστές ιστού να προβάλλουν ιστοσελίδες, τοπικές ή δημοσιευμένες στο διαδίκτυο, με επικάλυψη wireframe.

09. Εξομοιωτής Ripple

Το Ripple Emulator βοηθά με τον εντοπισμό σφαλμάτων ιστοσελίδων, την επιθεώρηση DOM και την αυτοματοποιημένη δοκιμή.

Το Ripple Emulator είναι ένας εξομοιωτής κινητού περιβάλλοντος πολλαπλών πλατφορμών που θα σας βοηθήσει να δοκιμάσετε την εφαρμογή Ιστού σας διάφορες συσκευέςκαι αναλύσεις οθόνης.

Η επέκταση Ripple Emulator μπορεί να χρησιμοποιηθεί σε συνδυασμό με υπάρχοντα εργαλεία ανάπτυξης για εντοπισμό σφαλμάτων, επιθεώρηση DOM και αυτοματοποιημένες δοκιμές.

10. Σερί

Παρακολούθηση συνομιλιών email σε ένα εισιτήριο, ανάθεση εργασιών.

Το Streak είναι το κύριο εργαλείο CRM και υποστήριξης ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Gmail.

Η επέκταση σάς επιτρέπει να συνδυάσετε όλα τα email σας σε ένα ή να οργανώσετε την παρακολούθηση των ανταλλαγών μηνυμάτων σε ένα δελτίο, να αναθέσετε εργασίες ώστε να μπορείτε να διαχειριστείτε προσωπικά τη διαδικασία επικοινωνίας με τους αντισυμβαλλομένους σας ή να παρέχετε πρόσβαση σε αυτό σε άλλα άτομα.

11. Αναζήτηση Stackoverflow

Λάβετε γρήγορες απαντήσεις στις ερωτήσεις σας με αυτήν την υποχρεωτική επέκταση.

Εάν είστε προγραμματιστής ιστού, πρέπει να έχετε ακούσει για το Stack Overflow, ένα μέρος όπου πολλοί προγραμματιστές απευθύνονται με διάφορες ερωτήσεις σχετικά με την ανάπτυξη έργων Ιστού. Αν όχι, τότε σίγουρα πρέπει να τον γνωρίσεις. Είναι μια πραγματικά ακμάζουσα κοινότητα που καλύπτει ένα ευρύ φάσμα θεμάτων, από C# και Java έως PHP και JQuery.

Αυτή η φανταστική επέκταση προσθέτει ένα πλαίσιο αναζήτησης απευθείας στο πρόγραμμα περιήγησής σας και σας επιτρέπει να αξιοποιήσετε τους τεράστιους πόρους του Stack Overflow. Μια επέκταση που πρέπει να χρησιμοποιήσετε!

12. Εγχειρίδιο PHP Ninja

Όλη η τεκμηρίωση για την PHP 5.5, στο πρόγραμμα περιήγησής σας.

Είναι πραγματικά δύσκολο να θυμάστε κάθε συνάρτηση, οπότε αν είχατε ξοδέψει πολλές ώρες αναζητώντας συγκεκριμένες λειτουργίες PHP μέσω του Google κατά τη διάρκεια της ημέρας, αυτή η επέκταση σίγουρα θα τραβήξει την προσοχή σας. Το PHP Ninja Manual παρέχει

Παίρνετε όλη την τεκμηρίωση για την PHP 5.5 συγκεκριμένα παραδείγματασε οκτώ γλώσσες στο πρόγραμμα περιήγησής σας.

13. PerfectPixel

Αυτή η επέκταση θα σας βοηθήσει να διασφαλίσετε ότι κάθε pixel στον ιστότοπό σας ταιριάζει με τη σχεδίαση.

Οι σχεδιαστές μισούν τις καταστάσεις όταν δημιουργούν ένα εκπληκτικό σχέδιο, αλλά αφού το μεταφράσουν σε κώδικα, κάτι δεν ταιριάζει με το αρχικό σχέδιο. Ο επεξεργαστής Perfect Pixel είναι πραγματικά η τέλεια επέκταση για προγραμματιστές ιστού που προσπαθούν να δημιουργήσουν ιστότοπους με ακρίβεια σχεδιασμού.

Αυτή η εύχρηστη επέκταση σάς επιτρέπει να τοποθετήσετε μια ημιδιαφανή επικάλυψη εικόνας πάνω από μια ιστοσελίδα και να εκτελέσετε έλεγχο αντιστοίχισης pixel-pixel για να εξασφαλίσετε 100 τοις εκατό αντιστοίχιση.

14. Κωδικός Cola

Σας επιτρέπει να επεξεργάζεστε την ιστοσελίδα CSS επί τόπου.

Αυτό το εργαλείο όχι μόνο θα σας επιτρέψει να δείτε τον πηγαίο κώδικα στον οποίο εργάζεστε, αλλά μπορεί επίσης να λειτουργήσει ως επεξεργαστής CSS. Αυτό σημαίνει ότι μπορείτε να επεξεργαστείτε το στυλ CSS των ιστοσελίδων σας επί τόπου και να δείτε αμέσως τα αποτελέσματα των αλλαγών σας.

15. Chrome Sniffer

Επιθεώρηση διαδικτυακών εφαρμογών και βιβλιοθηκών JavaScript.

Αυτή η επέκταση θα επιτρέπει στους προγραμματιστές ιστού να επιθεωρούν και να αναγνωρίζουν εφαρμογές Ιστού καθώς και βιβλιοθήκες JavaScript που είναι συνδεδεμένες σε ένα συγκεκριμένο έργο. Η επέκταση λειτουργεί όσο πιο απλά γίνεται: εμφανίζεται ένα εικονίδιο στη γραμμή διευθύνσεων που υποδεικνύει την έκδοση του πλαισίου ή του CMS που χρησιμοποιείται.

16. User Agent Switcher

Ελέγξτε πώς φαίνεται ο ιστότοπός σας σε διαφορετικές συσκευές.

Ένα εξαιρετικό εργαλείο για να δείτε πώς φαίνεται ένας ιστότοπος διάφοροι τύποισυσκευές όπως iPad, iPhone ή συσκευές Android. Αυτό μπορεί επίσης να είναι πολύ χρήσιμο όσον αφορά την προβολή του ιστότοπου με τον τρόπο που τον βλέπουν οι μηχανές αναζήτησης.

Ό,τι κι αν έχετε ακούσει για το Google Chrome, πότε μιλάμε γιασχετικά με το σχεδιασμό και την ανάπτυξη ιστοσελίδων, ο Firefox εξακολουθεί να είναι το καλύτερο πρόγραμμα περιήγησης με φιλικό περιβάλλον ανάπτυξης που μπορείτε να βρείτε.

Καλό, ο Firefox έχει ακόμη και μια ειδική έκδοση του προγράμματος περιήγησης που έχει σχεδιαστεί μόνο για προγραμματιστές ιστού. Έτσι νοιάζεται η Mozilla για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων.

Ο Firefox διαθέτει επίσης μια τεράστια συλλογή επεκτάσεων που κάνουν το πρόγραμμα περιήγησης πιο ισχυρό για μέγιστο αποτέλεσμα. Ακολουθούν μερικές από τις καλύτερες επεκτάσεις Firefox που μπορείτε να χρησιμοποιήσετε για να διευκολύνετε τη ζωή ανάπτυξης ιστού σας.

Εγκαταστήστε, δοκιμάστε και χρησιμοποιήστε τις περισσότερες από αυτές τις επεκτάσεις. Μετά από όλα, είναι όλα δωρεάν στη χρήση!

Τι κάνει: Επιθεωρεί ιστοσελίδες

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

Κατάλληλο για: προγραμματιστές ιστού
Τι κάνει: πελάτης για Firefox

Το FireFTP είναι ένας πελάτης FTP/SFTP για τον Firefox που σας επιτρέπει να ανεβάζετε και να μεταφέρετε με ασφάλεια αρχεία μεταξύ του υπολογιστή σας και του διακομιστή απευθείας από το πρόγραμμα περιήγησής σας. Με αυτό το πρόσθετο, δεν θα χρειαστεί ποτέ ξανά να μεταβείτε μεταξύ του προγράμματος περιήγησής σας και των εφαρμογών πελάτη FTP.

Κατάλληλο για: προγραμματιστές και σχεδιαστές ιστοσελίδων
Τι κάνει: ανάλυση και έλεγχος ιστοσελίδων

Είναι μια επέκταση all-in-one που προσθέτει μια σειρά από χρήσιμα εργαλεία στον Firefox. Μερικά από τα εργαλεία που περιλαμβάνονται σε αυτό το πρόσθετο είναι η εμφάνιση και η επεξεργασία φύλλων στυλ CSS, η απενεργοποίηση στυλ, εργαλείων εντοπισμού σφαλμάτων κ.λπ.

Τι κάνει: Εργαλείο ανάλυσης χρώματος

Το ColorZilla είναι ένα εξαιρετικό εργαλείο που οι σχεδιαστές web front-end θα βρουν αρκετά χρήσιμο. Αυτό το πρόσθετο διαθέτει ένα σταγονόμετρο για γρήγορη επιλογή χρωμάτων σε μια ιστοσελίδα, μια γεννήτρια διαβάθμισης CSS, έναν αναλυτή χρωμάτων, παλέτες χρωμάτων και πολλά άλλα.

Κατάλληλο για: προγραμματιστές ιστού
Τι κάνει: Τροποποίηση ιστοτόπων με προσαρμοσμένο κώδικα

Αγαπημένο από πάνω από ένα εκατομμύριο χρήστες Firefox, το Greasemonkey είναι μια επέκταση που θα σας προσφέρει ατελείωτη διασκέδαση. Αυτό το πρόσθετο σάς επιτρέπει να προσαρμόσετε δημοφιλείς ιστότοπους επεξεργάζοντάς τους χρησιμοποιώντας τον δικό σας κώδικα JavaScript. Μπορείτε επίσης να απολαύσετε σενάρια που έχουν ήδη δημιουργηθεί από άλλους προγραμματιστές.

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Προσαρμόζει τη μετατόπιση των στοιχείων Ιστού

Ένα απλό αλλά χρήσιμο πρόσθετο που σας επιτρέπει να επιθεωρήσετε στοιχεία ιστού και να δείτε οπτικά πόσα pixel είναι απενεργοποιημένα στα στοιχεία, δημιουργώντας μια σύνθεση με διαφανή επίπεδα. Χρησιμοποιώντας αυτήν τη σύνθεση, μπορείτε να ρυθμίσετε την πραγματική ιστοσελίδα σας ώστε να ταιριάζει με την επικάλυψη για το καλύτερο αποτέλεσμα χωρίς εικασίες.

Για παράδειγμα, εάν μία από τις εικόνες στην ιστοσελίδα σας επικαλύπτει ένα άλλο αντικείμενο, μπορείτε να χρησιμοποιήσετε το Pixel Perfect για να προσδιορίσετε πόσα pixel πρέπει να προσαρμόσετε για να φέρετε αυτήν την εικόνα στη σωστή θέση.

Κατάλληλο για: σχεδιαστές ιστοσελίδων
Τι κάνει: Φορτώνει τα πάντα από μια ιστοσελίδα

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

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Ελέγξτε τις ιστοσελίδες στον Internet Explorer

Είτε το πιστεύετε είτε όχι, υπάρχουν άνθρωποι που εξακολουθούν να χρησιμοποιούν τα παλιά Εκδόσεις Διαδικτύου Explorer για πρόσβαση στο Διαδίκτυο. Η δημιουργία τοποθεσιών που λειτουργούν καλά σε αυτά τα παλαιότερα προγράμματα περιήγησης είναι ένα από τα προβλήματα με τα οποία εξακολουθούν να αντιμετωπίζουν οι σχεδιαστές ιστοσελίδων. Αυτή η προσθήκη διευκολύνει την προσαρμογή σχεδίων ιστού για παλαιότερα προγράμματα περιήγησης στο Διαδίκτυο Explorer, δημιουργώντας μια νέα καρτέλα στον IE.

Κατάλληλο για: σχεδιαστές ιστοσελίδων και προγραμματιστές
Τι κάνει: Σας δείχνει για την τεχνολογία που χρησιμοποιείται στον ιστότοπο

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

Κατάλληλο για: προγραμματιστές ιστού
Τι κάνει: Ενεργοποιεί ή απενεργοποιεί την Java

Αυτό το πρόσθετο σάς επιτρέπει να ενεργοποιείτε ή να απενεργοποιείτε εύκολα τη Java στο πρόγραμμα περιήγησής σας. Μπορεί επίσης να απενεργοποιήσει Javascript, Cookies, κινούμενες εικόνες, Flash και άλλα στην ιστοσελίδα. Αυτό είναι ένα χρήσιμο πρόσθετο όχι μόνο για προγραμματιστές, αλλά και για απλούς χρήστεςγια τη βελτίωση της ασφάλειας του προγράμματος περιήγησης και τη μείωση του εύρους ζώνης.

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Μετρά στοιχεία σε pixel

Η λειτουργία αυτού του πρόσθετου είναι απλή, σας επιτρέπει να σχεδιάσετε έναν εικονικό χάρακα πάνω από μια ιστοσελίδα ή ένα στοιχείο σε μια σελίδα για να μετρήσετε το πλάτος, το ύψος ή τη στοίχιση εικονοστοιχείων του στοιχείου στην ιστοσελίδα. MeasureΕίναι χρήσιμο για τους περισσότερους προγραμματιστές front-end να δημιουργούν wireframes.

Κατάλληλο για: σχεδιαστές ιστοσελίδων
Τι κάνει: αλλάζει τη γλώσσα στο πρόγραμμα περιήγησης

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

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: δημιουργία εικονικού κειμένου

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

Κατάλληλο για: προγραμματιστές ιστού
Τι κάνει: επεξεργάζεται και δημιουργεί cookies

Αυτό το πρόσθετο όχι μόνο διαχειρίζεται τα cookie του ιστότοπού σας, αλλά σας επιτρέπει επίσης να επεξεργάζεστε και να δημιουργείτε εύκολα νέα αρχεία. Ορισμένες από τις δυνατότητες του plugin περιλαμβάνουν την ενσωματωμένη περιήγηση μπισκότα, τη δυνατότητα αλλαγής τομέα, τη δυνατότητα επεξεργασίας πολλαπλών cookies ταυτόχρονα και πολλά άλλα.

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Επιλέγει χρώματα σε μια ιστοσελίδα

Ένα εύχρηστο εργαλείο που σας επιτρέπει να επιλέξετε τα χρώματα οποιουδήποτε pixel σε μια ιστοσελίδα και να αντιγράψετε εύκολα τον κώδικα χρώματος RGB ή Hex για χρήση στα δικά σας έργα. Η ομορφιά και η οπτική διεπαφή αυτού του εργαλείου διευκολύνουν πολύ τους αρχάριους να μάθουν για τα χρώματα στις ιστοσελίδες.

Κατάλληλο για: σχεδιαστές ιστοσελίδων και προγραμματιστές
Τι κάνει: Παρέχει πληροφορίες σχετικά με το λογισμικό που χρησιμοποιεί ο ιστότοπος

Παρόμοια με το πρόσθετο BuiltWith, το Wappalyzer είναι μια άλλη χρήσιμη επέκταση που σας επιτρέπει να μάθετε τι λογισμικόχρησιμοποιείται στον ιστότοπο. Για παράδειγμα, μπορείτε να μάθετε τι είδους CMS χρησιμοποιεί ο ιστότοπος, ποιο λειτουργικό σύστημα υποστηρίζει ο διακομιστής του ιστότοπου και πολλά άλλα.

Κατάλληλο για: προγραμματιστές ιστού
Τι κάνει: Αλλάζει τον παράγοντα χρήστη του προγράμματος περιήγησης

Θέλετε να μάθετε πώς θα είναι ο ιστότοπός σας σε διαφορετικές πλατφόρμες και λειτουργικά συστήματα; Τότε αυτό είναι ένα εργαλείο που σίγουρα θα σας φανεί χρήσιμο. Το User-Agent Switcher σάς επιτρέπει να κάνετε εναλλαγή μεταξύ διαφορετικών πλατφορμών όπως Android, Mac, Windows και επιλεγμένων λειτουργικών συστημάτων για να αλλάξετε τον παράγοντα χρήστη του προγράμματος περιήγησής σας.

Κατάλληλο για: σχεδιαστές ιστοσελίδων και προγραμματιστές
Τι κάνει: Εμφανίζει ένα παράδειγμα χρήσης της καρτέλας μνήμης του προγράμματος περιήγησης

Αυτό είναι ένα εύχρηστο πρόσθετο που θα σας βοηθήσει να προσδιορίσετε πόσο από τους πόρους του υπολογιστή σας χρησιμοποιούνται από κάθε ανοιχτή καρτέλα στον Firefox. Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να μάθετε πόσους πόρους χρησιμοποιεί ο ιστότοπός σας και να βελτιστοποιήσετε τον ιστότοπό σας για μέγιστη απόδοση.

Κατάλληλο για: web και γραφίστες
Τι κάνει: Ανοίγει εικόνες στο Photoshop

Αυτό το πρόσθετο κάνει αυτό που λέει το όνομά του, απλά ανοίγει με ένα κλικ τις εικόνες που βρίσκετε σε μια ιστοσελίδα χρησιμοποιώντας το Photoshop. Δεν χρειάζεται να ανεβάσετε μια εικόνα ή να ξεκινήσετε το Photoshop, η επέκταση θα κάνει ό,τι χρειάζεστε.

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Βελτιώνει τους πίνακες HTML

Γραφήματα, στατιστικά στοιχεία, συγκρίσεις, πίνακες - αυτό το πρόσθετο μπορεί να τα κάνει όλα. Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να δημιουργήσετε φιλικούς και όμορφους πίνακες και διαγράμματα HTML.

Κατάλληλο για: προγραμματιστές ιστού
Τι κάνει: SSH client για Firefox

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

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Αυτόματη ανανέωση ιστοσελίδων

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

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: Αλλάζει το μέγεθος των παραθύρων του Firefox για συγκεκριμένες αναλύσεις οθόνης

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

Κατάλληλο για: σχεδιαστές ιστοσελίδων και προγραμματιστές
Τι κάνει: βρίσκει πληροφορίες για τις γραμματοσειρές της σελίδας και τα στοιχεία της

Το Font Finder είναι ένα εύχρηστο εργαλείο που σας επιτρέπει να εξετάσετε στοιχεία ιστότοπου για να μάθετε σημαντικές πληροφορίεςσχετικά με τις γραμματοσειρές που χρησιμοποιούνται στη σελίδα, όπως όνομα οικογένειας γραμματοσειράς, χρώμα γραμματοσειράς, διάστιχο, διακόσμηση και άλλα.

Καλύτερο για: Σχεδιαστές διεπαφής
Τι κάνει: ελέγχει ιστοσελίδες σε διαφορετικά προγράμματα περιήγησης

Η λειτουργία αυτού του πρόσθετου είναι απλή. Σας επιτρέπει να ανοίγετε αμέσως οποιαδήποτε ιστοσελίδα που βλέπετε στον Firefox χρησιμοποιώντας άλλο πρόγραμμα περιήγησης με ένα μόνο κλικ. Δεν χρειάζεται να αντιγράψετε URL, ανοίξτε κάθε πρόγραμμα περιήγησης ένα προς ένα και επικολλήστε τις διευθύνσεις URL για να ανοίξετε τον ιστότοπο.

Κατάλληλο για: σχεδιαστές ιστοσελίδων και προγραμματιστές
Τι κάνει: διαγράφει την προσωρινή μνήμη του προγράμματος περιήγησης

Αυτό το πρόσθετο διαγράφει αμέσως την προσωρινή μνήμη Πρόγραμμα περιήγησης Firefox(RAM και DISK) για τη μείωση της χρήσης των πόρων του υπολογιστή. Η επέκταση σάς επιτρέπει να διαγράψετε την προσωρινή μνήμη κάνοντας απλά κλικ σε ένα κουμπί ή πατώντας το πλήκτρο F9 στο πληκτρολόγιό σας. Εάν θέλετε να δείτε γρήγορα τις αλλαγές που έγιναν σε μια ιστοσελίδα, αυτό το πρόσθετο θα είναι πολύ χρήσιμο.

Με την αυξανόμενη δημοτικότητα του προγράμματος περιήγησης Google Chrome, εμφανίζονται επεκτάσεις που εξοικονομούν χρόνο στους προγραμματιστές ιστού δίνοντάς τους τη δυνατότητα να παρακολουθούν σφάλματα και ζητήματα απόδοσης ιστότοπου.

Ακολουθούν ορισμένες χρήσιμες επεκτάσεις για το Google Chrome.

Επέκταση προγραμματιστή Ιστού

Θα ήθελα να σημειώσω το πιο βολικό και ισχυρό εργαλείο για έναν προγραμματιστή και σχεδιαστή ιστοσελίδων - Επέκταση προγραμματιστή Ιστού για το Google Chrome.

Η επέκταση προστίθεται στη γραμμή εργαλείων του Google Chrome με τη μορφή κουμπιού με εικονίδιο με γρανάζι και περιέχει διάφορα εργαλεία για την ανάπτυξη και τον εντοπισμό σφαλμάτων ενός ιστότοπου. Αυτή είναι μια επίσημη προσαρμογή του δημοφιλούς, γραμμένη από τον ίδιο προγραμματιστή.

Η επέκταση έχει μεγάλο αριθμό επιλογών.

Για παράδειγμα, πολλοί άνθρωποι απλά χρειάζονται μάθετε το χρώμα του στοιχείουστην οθόνη της οθόνης σε δεκαεξαδική μορφή. Για το σκοπό αυτό το πρόσθετο έχει ειδική λειτουργία. Στην ενότητα Διάφορα, επιλέξτε Επιλογέας χρώματος εμφάνισης.

Επιλέγοντας Display Color Picker, ο δρομέας γίνεται σταυρός. Τώρα, κάνοντας κλικ σε οποιαδήποτε περιοχή της οθόνης στην κάτω δεξιά γωνία του προγράμματος περιήγησης, εμφανίζεται το χρώμα σε δεκαεξαδικό για χρήση σε CSS.