Κορυφαίες 10 επεκτάσεις και εργαλεία Chrome για σχεδιαστές ιστού

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

Αυτή η λίστα περιλαμβάνει μερικά από τα πιο δημοφιλή - και μερικοί θα έλεγαν απαραίτητα - εργαλεία και επεκτάσεις Chrome(tools and Chrome extensions) που κάθε χρήστης που κάνει εργασίες σχεδιασμού θα πρέπει να έχει στην τσάντα του κιτ του.

1. DomFlags

Το DOM Flags(DOM Flags) είναι μια απλή στη χρήση επέκταση του Chrome που παρέχει έναν νέο τρόπο στους προγραμματιστές να εργάζονται με εργαλεία προγράμματος περιήγησης. Επιτρέπει στους προγραμματιστές να επιταχύνουν το έργο των στοιχείων στυλ.

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

Όλοι έχουμε βιώσει τη δυσκολία στην επιθεώρηση πολύ λεπτομερών στοιχείων και είναι εύκολο να χαθούμε.

Οι σημαίες DOM(DOM Flags) σάς δίνουν τη δυνατότητα να παρακολουθείτε στοιχεία στυλ και περιλαμβάνει μια δυνατότητα αυτόματης επιθεώρησης στοιχείων με ακρίβεια. Αυτό, με τη σειρά του, θα βοηθήσει στην επιτάχυνση της ροής εργασίας και της υλοποίησης του DevTools .

Οι σημαίες DOM(DOM Flags) σάς επιτρέπουν να παρακολουθείτε τις αλλαγές. Και διατηρήστε την εστίασή σας στα στοιχεία με τα οποία εργάζεστε.

2. Ζεστό

Το Sizzy(Sizzy) παρέχει στους σχεδιαστές και τους προγραμματιστές έναν απλό τρόπο να δοκιμάσουν τους ιστότοπούς τους σε πολλαπλές θύρες προβολής.

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

Η εγκατάσταση μιας επέκτασης Chrome θα προσθέσει ένα κουμπί στη γραμμή εργαλείων σας, το οποίο, όταν κάνετε κλικ, θα ανοίξει την τρέχουσα διεύθυνση URL(URL) στην πλατφόρμα Sizzy . Η επέκταση θα αποκλείσει όλες τις κεφαλίδες " x-frame-options ", ώστε να μπορείτε να ρίξετε μια ματιά σε οποιονδήποτε ιστότοπο στο διαδίκτυο.

Το Sizzy(Sizzy) είναι ένα έργο ανοιχτού κώδικα και μπορείτε να δείτε ολόκληρο τον κώδικα εδώ(here) .

3. Checkbot

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

Χρησιμοποιώντας περισσότερες από 50 μετρήσεις βέλτιστων πρακτικών, θα ελέγξει έναν ιστότοπο για βέλτιστες πρακτικές SEO , κατεστραμμένους συνδέσμους, διπλό περιεχόμενο και άλλα. Το εργαλείο θα επικυρώσει επίσης CSS , JS και HTML .

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

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

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

4. Κλιπ GistBox

Το GistBox(GistBox) είναι μια από τις πιο χρήσιμες επεκτάσεις του Chrome για σχεδιαστές ιστοσελίδων.

Το GistBox μπορεί να δημιουργήσει ένα GitHub Gist από οποιοδήποτε μπλοκ κώδικα στην ιστοσελίδα που βλέπετε.

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

Μπορείτε να δημιουργήσετε νέα Gists με δεξί κλικ του ποντικιού και να αποθηκεύσετε μπλοκ κώδικα για μελλοντική επιθεώρηση και χρήση.

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

5. ColorZilla

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

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

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

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

6. WhatFont

 Αυτή η επέκταση Chrome(Chrome Extension) είναι μια πραγματική εξοικονόμηση χρόνου για όσους θέλουν να χρησιμοποιήσουν τις αγαπημένες τους γραμματοσειρές και να τις ενσωματώσουν στο δικό τους έργο σχεδίασης ιστοσελίδων.

Η επέκταση WhatFont Chrome(WhatFont Chrome) επιτρέπει στους προγραμματιστές να αναλύουν και να αναγνωρίζουν γρήγορα σχεδόν οποιαδήποτε γραμματοσειρά σε οποιαδήποτε ιστοσελίδα.

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

Όχι μόνο αυτό, αλλά η επέκταση θα προσδιορίζει επίσης την υπηρεσία που χρησιμοποιείται για την προβολή μιας γραμματοσειράς Pages go και θα υποστηρίζει το Google Font API και το Typekit.(Google Font API and Typekit.)

7. LightShot

Το LightShot(LightShot) είναι ένα γρήγορο εργαλείο στιγμιότυπων οθόνης που σας δίνει τη δυνατότητα να καταγράψετε ολόκληρη ή μέρος οποιασδήποτε σελίδας και είτε να τη ανεβάσετε είτε να την κατεβάσετε είτε να την στείλετε σε προορισμό τρίτου μέρους.

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

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

Το LightShot(LightShot) μπορεί να διαμορφωθεί σε πολλές γλώσσες.

Η επέκταση είναι γραμμένη σε καθαρή JavaScript και θα λειτουργεί επίσης για Windows , Chromebook , Linux και Mac OS . Μπορεί επίσης να προσπελαστεί ως εφαρμογή επιτραπέζιου υπολογιστή,(desktop application) καθιστώντας την εξαιρετική επιλογή για σχεδιαστές ιστοσελίδων που εξαρτώνται από πολλές συσκευές.

8. Φοβερό στιγμιότυπο οθόνης

Όπως το Lightshot(Lightshot) , το Awesome Screenshot είναι μια επέκταση λήψης οθόνης και εικόνων.

Διαφέρει από το Lightshot , ωστόσο, με διάφορους τρόπους. Το Awesome Screenshot(Awesome Screenshot) μπορεί να διαμορφωθεί ώστε να συνδέει όλα τα στιγμιότυπα οθόνης με τη μονάδα Google .

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

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

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

9. Εκκαθάριση προσωρινής μνήμης

Η Επέκταση Clear Cache Chrome(Cache Chrome Extension) είναι ένα γρήγορο και απλό εργαλείο που σας δίνει τη δυνατότητα να διαγράψετε τα cookie και την προσωρινή μνήμη της σελίδας που βλέπετε. Καταργεί την ανάγκη πλοήγησης στη σελίδα ρυθμίσεων του προγράμματος περιήγησής σας για να διαγράψετε μερικά απλά στοιχεία σελίδας.

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

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

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

10. Προγραμματιστής Ιστού Επέκταση Google Chrome

Η Επέκταση Google Chrome για προγραμματιστές Ιστού(Web Developer Google Chrome Extension) επιτρέπει στους προγραμματιστές και τους σχεδιαστές να ελέγχουν, να αναλύουν και να ελέγχουν εύκολα τις ιστοσελίδες τους για τυχόν παραβιάσεις της βέλτιστης πρακτικής σχεδιασμού, κωδικοποίησης, χρηστικότητας και βελτιστοποίησης μηχανών αναζήτησης.

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

 Η επέκταση εγκαθιστά τη γραμμή εργαλείων με πολλά εργαλεία προγραμματιστή ιστού.

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

Η επέκταση λειτουργεί καλά σε Windows , Linux και Mac OS . Εκτός από ζητήματα κωδικοποίησης και σχεδίασης, θα παρέχει επίσης πληροφορίες για πληροφορίες μετα-ετικέτας, κεφαλίδες απόκρισης, πληροφορίες χρώματος και τοπογραφικές πληροφορίες.

Μπορείτε να δείτε τα κύρια χαρακτηριστικά του εργαλείου καθώς και τις πλήρεις δυνατότητές του στον ιστότοπο του προγραμματιστή Chris Pedericks(Chris Pedericks’ website) .

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

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



About the author

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



Related posts