Τρόπος εντοπισμού σφαλμάτων ιστοσελίδων στο Chrome για Android σε υπολογιστή

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

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

Εντοπισμός σφαλμάτων της ιστοσελίδας

Βήμα 1: Λήψη και εγκατάσταση

Android SDK στον υπολογιστή σας και εκτελέστε το. Το πρόγραμμα εγκατάστασης θα σας ζητήσει να κάνετε λήψη της Java εάν δεν την έχετε εγκαταστήσει.

Την πρώτη φορά που εκτελείτε το Android SDK στον υπολογιστή σας, θα σας ζητήσει να κάνετε λήψη πολλών API και εργαλείων. Εάν ο μοναδικός σας σκοπός της εγκατάστασης του Android SDK είναι ο εντοπισμός σφαλμάτων στις σελίδες, καταργήστε την επιλογή όλων εκτός Εργαλεία πλατφόρμας Android SDK και κάντε κλικ στο Εγκατάσταση πακέτου κουμπί.

Βήμα 2: Αφού εγκαταστήσετε τα εργαλεία πλατφόρμας Android, ανοίξτε το Run Box (Windows+R) και τρέξε %userprofile%\AppData\Local\Android\android-sdk\platform-tools για να ανοίξετε τον κατάλογο εργαλείων πλατφόρμας Android.

Βήμα 3: Τώρα κρατήστε πατημένο το πλήκτρο Ctrl+Shift και κάντε δεξί κλικ στον φάκελο για να ανοίξετε τη γραμμή εντολών εκεί. Μπορείτε επίσης να ανοίξετε τη γραμμή εντολών χρησιμοποιώντας το πλαίσιο Εκτέλεση και να πλοηγηθείτε στον φάκελο με μη αυτόματο τρόπο.

Βήμα 4: Αφού το κάνετε αυτό, ανοίξτε το Chrome στο τηλέφωνό σας Android, ανοίξτε Ρυθμίσεις—>Εργαλεία προγραμματιστή και ελέγξτε την επιλογή Ενεργοποίηση εντοπισμού σφαλμάτων USB Web.

Βήμα 5: Τώρα στη γραμμή εντολών εκτελέστε την εντολή adb forward tcp: 9222 localabstract: chrome_devtools_remote και ανοίξτε το πρόγραμμα περιήγησης Chrome στα Windows με επιτυχή εκτέλεση.

Βήμα 6: Ανοίξτε τη σελίδα που θέλετε να εντοπίσετε σφάλματα στο πρόγραμμα περιήγησης Android Chrome και ανοίξτε τη διεύθυνση URL localhost: 9222 στο πρόγραμμα περιήγησης Chrome του υπολογιστή σας.

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

συμπέρασμα

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