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

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

Το 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 πρόγραμμα περιήγησης Chrome που διευκολύνουν τη ζωή σας. Εδώ είναι 20 από τα καλύτερα.

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

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

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

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

01.iMacros για Chrome

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

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

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

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

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

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

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

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

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

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

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

04.Αργό

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

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

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

05. Προγραμματιστής Ιστού

Η επέκταση 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.

Συνδέστε την προβολή 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, στο πρόγραμμα περιήγησής σας.

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

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

13.Perfect Pixel

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

Οι σχεδιαστές μισούν τις καταστάσεις όταν δημιουργούν ένα εκπληκτικό σχέδιο, αλλά ως αποτέλεσμα, αφού μεταφραστεί σε κώδικα, κάτι δεν ταιριάζει με το αρχικό σχέδιο. Ο επεξεργαστής Perfect 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Καλύτερο για: Σχεδιαστές Ιστού και Γραφιστών
• Τι κάνει: Ανοίγει εικόνες στο 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.