Για να αποκτήσουμε πρόσβαση στον ιστότοπο από την πλευρά του υπολογιστή, μπορούμε να πατήσουμε το F12 για να ανοίξουμε το εργαλείο εντοπισμού σφαλμάτων μέσω του προγράμματος περιήγησης για να προβάλουμε αρχεία καταγραφής εξόδου, αιτήματα δικτύου, στοιχεία ιστοσελίδας, cookies και άλλες πληροφορίες.
Ωστόσο, όταν αναπτύσσουμε προγράμματα και εφαρμογές για κινητά ή μίνι, υπάρχει ένα μη φυσιολογικό πρόβλημα και δεν μπορούμε να δούμε απευθείας τις μη φυσιολογικές πληροφορίες. Αυτό το άρθρο προτείνει δύο πίνακες εντοπισμού σφαλμάτων προγραμματιστών front-end.
Πρώτα ανεβάστε τον πηγαίο κώδικα:
vΚονσόλα
Ένας ελαφρύς, επεκτάσιμος, front-end πίνακας εντοπισμού σφαλμάτων προγραμματιστών για ιστοσελίδες για κινητές συσκευές.
- Ελέγξτε τα αρχεία καταγραφής της κονσόλας
- Προβολή αιτημάτων δικτύου
- Κοιτάξτε τη δομή των στοιχείων σελίδας
- Ρίξτε μια ματιά στα Cookies, localStorage και SessionStorage
- Μη αυτόματη εκτέλεση της γραμμής εντολών JS
- Προσαρμοσμένες προσθήκες
Διεύθυνση:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Ερούντα
Το Eruda είναι ένας πίνακας εντοπισμού σφαλμάτων που έχει σχεδιαστεί για το front-end ιστοσελίδων για κινητά, παρόμοιο με μια μίνι έκδοση του DevTools, με βασικές λειτουργίες όπως: λήψη αρχείων καταγραφής κονσόλας, έλεγχος κατάστασης στοιχείων, λήψη αιτημάτων XHR, εμφάνιση τοπικής αποθήκευσης και πληροφοριών cookie και πολλά άλλα.
Μεταφορά και απόθεση κουμπιών, ρύθμιση μεγέθους διαφάνειας πίνακα.
- Πίνακας κονσόλας: καταγράφει αρχεία καταγραφής κονσόλας, αρχείο καταγραφής υποστήριξης, σφάλμα, πληροφορίες, προειδοποίηση, dir, time/timeEnd, διαγραφή, μέτρηση, επιβεβαίωση, πίνακας. Υποστήριξη για σύμβολα κράτησης θέσης, συμπεριλαμβανομένης της εξόδου προσαρμοσμένου στυλ %c. Υποστήριξη φιλτραρίσματος κατά τύπο αρχείου καταγραφής και κανονική έκφραση. Υποστηρίζεται η εκτέλεση σεναρίου JavaScript.
- Πίνακας "Στοιχεία": Προβολή περιεχομένου και ιδιοτήτων ετικέτας. Δείτε πώς διαμορφώνεται η εφαρμογή σας στο DOM. Υποστήριξη για την επισήμανση στοιχείων σελίδας. Υποστήριξη επιλογής άμεσου κλικ στην οθόνη. Δείτε τους τύπους συμβάντων που συνδέονται με το DOM.
- Πίνακας δικτύου: Καταγράψτε αιτήματα και προβάλετε πληροφορίες όπως απεσταλμένα δεδομένα, κεφαλίδες επιστροφής και περιεχόμενο που επιστρέφεται.
- Πίνακας πόρων: Προβολή και εκκαθάριση localStorage, sessionStorage και cookie. Προβολή σεναρίων φόρτωσης σελίδας και αρχείων στυλ. Προβολή εικόνων φόρτωσης σελίδας.
- Πίνακας "Πηγές": Δείτε τον πηγαίο κώδικα της σελίδας. Μορφοποιήστε δεδομένα HTML, CSS, JS και JSON.
- Πίνακας πληροφοριών: URL εξόδου και πράκτορας χρήστη. Υποστήριξη προσαρμοσμένου περιεχομένου εξόδου.
- Πίνακας αποσπασμάτων: προσθήκη περιγραμμάτων σε στοιχεία σελίδας. Προσθέστε μια χρονική σήμανση για να ανανεώσετε τη σελίδα. Υποστηρίζονται προσαρμοσμένα τμήματα κώδικα.
Διεύθυνση:Η σύνδεση με υπερσύνδεσμο είναι ορατή. |
Δημοσιεύτηκε στις 29/6/2020 3:36:20 μ.μ.
|
|
|
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 8/2/2025 1:44:17 μ.μ.
|
