Πώς να κάνετε προεπισκόπηση του ιστότοπού σας σε διαφορετικές συσκευές χρησιμοποιώντας το Google Chrome

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

Τα Εργαλεία προγραμματιστών του Chrome σάς επιτρέπουν να εντοπίσετε σφάλματα σε διάφορες πτυχές του ιστότοπού σας. Αυτό περιλαμβάνει την αλλαγή και την προεπισκόπηση του πηγαίου κώδικα HTML και του CSS. Σας επιτρέπει επίσης να κάνετε εντοπισμό σφαλμάτων κώδικα JavaScript από την πλευρά του πελάτη και να προβάλλετε την κυκλοφορία δικτύου.

Το DevTools έχει επίσης μια επιλογή για προεπισκόπηση του ιστότοπού σας σε διαφορετικές συσκευές. Αυτό περιλαμβάνει διαφορετικούς τύπους κινητών συσκευών, iPad, tablet και πολλά άλλα.

Για να ανοίξετε τη γραμμή εργαλείων συσκευής στο Google Chrome, πρέπει να ανοίξετε το Παράθυρο Chrome Developer Tools:

1. Ανοίξτε έναν ιστότοπο.
2. Κάντε δεξί κλικ στη σελίδα και κάντε κλικ στο Επιθεωρώ.
3. Θα ανοίξει το παράθυρο του Chrome DevTools. Μπορεί να ανοίξει στο πλάι ή στο κάτω μέρος του προγράμματος περιήγησής σας ή ως νέο παράθυρο.
instagram viewer
4. Στο επάνω αριστερό μέρος του παραθύρου, υπάρχουν δύο εικονίδια. Κάντε κλικ στο εικονίδιο που εμφανίζει πολλές συσκευές διαφορετικών μεγεθών.
5. Η οθόνη θα αλλάξει για να σας δείξει πώς θα ήταν ο ιστότοπος σε μια κινητή συσκευή.

Πώς να κάνετε εναλλαγή μεταξύ διαφορετικών συσκευών

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

1. Στην κορυφή της γραμμής εργαλείων θα εμφανιστεί ο τύπος συσκευής στην οποία προβάλλετε αυτήν τη στιγμή τον ιστότοπό σας. Κάντε κλικ στο αναπτυσσόμενο μενού για να επιλέξετε άλλη συσκευή από τη λίστα.
2. Αντί να επιλέξετε μια υπάρχουσα συσκευή, μπορείτε να επιλέξετε να προβάλετε τον ιστότοπο σε λειτουργία απόκρισης. Κάντε κλικ στο αναπτυσσόμενο μενού και επιλέξτε το Ευαίσθητος επιλογή.
3. Δίπλα από το αναπτυσσόμενο μενού, μπορείτε επίσης να επιλέξετε να εισαγάγετε ένα προσαρμοσμένο πλάτος και ύψος μιας συσκευής.
4. Αντί να πληκτρολογείτε πλάτος και ύψος, μπορείτε επίσης να κάνετε κλικ και να σύρετε τις γωνίες του παραθύρου για να προσαρμόσετε το μέγεθος.

Πώς να προσθέσετε μια προσαρμοσμένη συσκευή

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

1. Κάντε κλικ στο αναπτυσσόμενο μενού που εμφανίζει όλες τις συσκευές.
2. Κάντε κλικ στο Επεξεργασία.
3. Κάτω από την πλαϊνή γραμμή Ρυθμίσεις, βεβαιωθείτε ότι έχετε το συσκευές επιλεγμένη καρτέλα. Εδώ, μπορείτε επίσης να δείτε μια λίστα με περισσότερες συσκευές από τις οποίες μπορείτε να επιλέξετε.
4. Κάντε κλικ στο Προσθήκη προσαρμοσμένης συσκευής.
5. Εισαγάγετε ένα όνομα, πλάτος και ύψος για τη συσκευή. Βεβαιωθείτε ότι έχετε επιλέξει επίσης τον τύπο συσκευής, όπως εάν πρόκειται για φορητή ή επιτραπέζια συσκευή. Εάν επεκτείνετε το Υποδείξεις πελάτη παράγοντα χρήστη Μπορείτε να προσθέσετε άλλες λεπτομέρειες, όπως το μοντέλο της συσκευής, τη μάρκα ή την έκδοση.
6. Κάντε κλικ στο Προσθήκη.
7. Επιστρέψτε στο αναπτυσσόμενο μενού που εμφανίζει όλες τις συσκευές. Θα δείτε τη νέα προσαρμοσμένη συσκευή σας στη λίστα.
8. Μπορείτε να επεξεργαστείτε ξανά αυτές τις λεπτομέρειες αργότερα, επιστρέφοντας στη σελίδα προσαρμοσμένης συσκευής. Κάνε κλικ στο επεξεργασία κουμπί δίπλα στο όνομα της συσκευής σας για να ξεκινήσετε την επεξεργασία.

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

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

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

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

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

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

Πώς να χρησιμοποιήσετε το Google Chrome για τον εντοπισμό σφαλμάτων CSS

Διαβάστε Επόμενο