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

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

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

Αναζήτηση κόμβων στο δέντρο DOM

Μερικές φορές το δέντρο DOM είναι γεμάτο με κόμβους που είναι ένθετοι σε κόμβους που είναι ένθετοι σε άλλους κόμβους, κ.ο.κ. Αυτό καθιστά πολύ δύσκολο να βρείτε το ακριβές που ψάχνετε, αλλά μπορείτε να αναζητήσετε γρήγορα το δέντρο DOM χρησιμοποιώντας Cmd + F (macOS) ή Ctrl + F (Windows).

Επιπλέον, μπορείτε επίσης να κάνετε αναζήτηση χρησιμοποιώντας έναν έγκυρο επιλογέα CSS, όπως π.χ .red, ή χρησιμοποιώντας ένα XPath, όπως //div/h1.

Στα προγράμματα περιήγησης Chromium, η εστίαση μεταβαίνει αυτόματα στον κόμβο που ταιριάζει με τα κριτήρια αναζήτησης καθώς πληκτρολογείτε, κάτι που θα μπορούσε να είναι ενοχλητικό εάν εργάζεστε με μεγαλύτερα ερωτήματα αναζήτησης ή ένα μεγάλο δέντρο DOM. Ευτυχώς, μπορείτε να απενεργοποιήσετε αυτήν τη συμπεριφορά μεταβαίνοντας στο ρυθμίσεις (F1) → Προτιμήσεις → Παγκόσμιο → Αναζήτηση καθώς πληκτρολογείτε → Απενεργοποίηση.

Αφού εντοπίσετε τον κόμβο στο δέντρο DOM, μπορείτε να πραγματοποιήσετε κύλιση στη σελίδα για να φέρετε τον κόμβο στη θύρα προβολής κάνοντας δεξί κλικ στο νεύμα και επιλέγοντας «Κύλιση στην προβολή».

Πρόσβαση σε κόμβους από την κονσόλα

Το DevTools παρέχει πολλούς διαφορετικούς τρόπους πρόσβασης σε έναν κόμβο DOM απευθείας από την κονσόλα.

Για παράδειγμα, μπορείτε να χρησιμοποιήσετε $0 για πρόσβαση στον τρέχοντα επιλεγμένο κόμβο στο δέντρο DOM. Τα προγράμματα περιήγησης Chromium το κάνουν ένα βήμα παραπέρα, επιτρέποντάς σας να έχετε πρόσβαση σε κόμβους επιλεγμένους με την αντίστροφη χρονολογική σειρά της ιστορικής επιλογής χρησιμοποιώντας $1, $2, $3Κ.λπ.

Ένα άλλο πράγμα που σας επιτρέπουν τα προγράμματα περιήγησης Chromium είναι να αντιγράψετε τη διαδρομή του κόμβου ως έκφραση JavaScript με τη μορφή document.querySelector κάνοντας δεξί κλικ στον κόμβο και επιλέγοντας αντίγραφο → Αντιγραφή διαδρομής JS, το οποίο μπορεί στη συνέχεια να χρησιμοποιηθεί για πρόσβαση στον κόμβο στην κονσόλα.

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

• Χρώμιο: Κάντε δεξί κλικ → "Αποθήκευση ως καθολική μεταβλητή"
• Firefox: Κάντε δεξί κλικ → "Χρήση στην Κονσόλα"
• Safari: Κάντε δεξί κλικ → "Στοιχείο καταγραφής"

Οπτικοποιήστε στοιχεία με σήματα

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

In Safari, υπάρχει ένα κουμπί σήματος στη γραμμή εργαλείων του πίνακα Στοιχεία που μπορεί να χρησιμοποιηθεί για την εναλλαγή της ορατότητας συγκεκριμένων σημάτων. Για παράδειγμα, εάν ένας κόμβος έχει ένα display: grid or display: inline-grid Δήλωση CSS που εφαρμόζεται σε αυτήν, α grid Το σήμα εμφανίζεται δίπλα του. Κάνοντας κλικ στο σήμα θα επισημανθούν οι περιοχές πλέγματος, τα μεγέθη των κομματιών, οι αριθμοί γραμμών και πολλά άλλα στη σελίδα.

Τα σήματα που υποστηρίζονται αυτήν τη στιγμή FirefoxΤα Εργαλεία προγραμματιστών του παρατίθενται στον Firefox πηγαία έγγραφα. Για παράδειγμα, α scroll Το σήμα υποδεικνύει ένα στοιχείο με δυνατότητα κύλισης. Κάνοντας κλικ στο σήμα επισημαίνεται το στοιχείο που προκαλεί την υπερχείλιση με ένα overflow σήμα δίπλα του.

In Χρώμιο προγράμματα περιήγησης, μπορείτε να κάνετε δεξί κλικ σε οποιονδήποτε κόμβο και να επιλέξετε "Ρυθμίσεις σήματος..." για να ανοίξετε ένα κοντέινερ που περιέχει όλα τα διαθέσιμα σήματα. Για παράδειγμα, στοιχεία με scroll-snap-type θα έχει ένα scroll-snap το σήμα δίπλα του, το οποίο με κλικ θα αλλάξει το scroll-snap επικάλυψη σε αυτό το στοιχείο.

Λαμβάνοντας στιγμιότυπα οθόνης

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

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

Επαναλάβετε τα ίδια βήματα στο html κόμβου για λήψη στιγμιότυπου οθόνης πλήρους σελίδας. Όταν το κάνετε, ωστόσο, αξίζει να σημειωθεί ότι το Safari διατηρεί τη διαφάνεια του χρώματος φόντου του στοιχείου — το Chromium και ο Firefox θα το αποτυπώσουν ως λευκό φόντο.

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

• Χρώμιο: Cmd + Shift + M (macOS) ή Ctrl + Shift + M (Windows). Ή κάντε κλικ στο εικονίδιο "Συσκευές" δίπλα στο εικονίδιο "Επιθεώρηση".
• Firefox: Εργαλεία → Εργαλεία προγράμματος περιήγησης → "Λειτουργία απόκρισης σχεδίασης"
• Safari: Ανάπτυξη → "Είσοδος σε λειτουργία απόκρισης σχεδίασης"

Συμβουλή για Chrome: Επιθεωρήστε το επάνω στρώμα

Το Chrome σάς επιτρέπει να οπτικοποιείτε και να επιθεωρείτε στοιχεία ανώτερου επιπέδου, όπως ένα παράθυρο διαλόγου, μια ειδοποίηση ή ένα modal. Όταν προστίθεται ένα στοιχείο στο #top-layer, παίρνει α top-layer το σήμα δίπλα του, το οποίο με το κλικ, σας μεταφέρει στο κοντέινερ του επάνω επιπέδου που βρίσκεται ακριβώς μετά το </html> tags.

Η σειρά των στοιχείων στο top-layer Το δοχείο ακολουθεί τη σειρά στοίβαξης, που σημαίνει ότι το τελευταίο βρίσκεται στην κορυφή. Κάντε κλικ στο reveal σήμα για μετάβαση πίσω στον κόμβο.

Συμβουλή Firefox: Μετάβαση στο ID

Ο Firefox συνδέει το στοιχείο που αναφέρεται στο χαρακτηριστικό ID στο στοιχείο προορισμού του στο ίδιο DOM και το επισημαίνει με μια υπογράμμιση. Χρήση CMD + Click (macOS) ή CTRL + Click (Windows) )για να μεταβείτε στο στοιχείο προορισμού με το αναγνωριστικό.

Ολοκληρώνοντας

Αρκετά πράγματα, σωστά; Είναι φοβερό ότι υπάρχουν μερικές απίστευτα χρήσιμες λειτουργίες του DevTools που υποστηρίζονται στο Chromium, στον Firefox και στο Safari. Υπάρχουν άλλες λιγότερο γνωστές λειτουργίες που υποστηρίζονται και από τις τρεις που σας αρέσουν;

Υπάρχουν μερικοί πόροι που κρατάω κοντά για να ενημερώνομαι για ό,τι νέο υπάρχει. Σκέφτηκα να τα μοιραστώ με εδώ:

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/