Χρησιμοποιούμε το Chrome DevTools ως περίπου

  1. Γρήγορα επεξεργασία στοιχείων HTML
  2. Αναπτύξτε όλα τα στοιχεία του παιδιού
  3. Μετακόμιση του επιθεωρητή
  4. Αναζήτηση στοιχείου DOM
  5. Παλέτες
  6. Πολλαπλοί δρομείς
  7. Κωδικοποιήστε την εικόνα base64
  8. Εναλλαγή ψευδο-τάξης
  9. Επιλογή στήλης
  10. Αίτημα αντιγραφής για cURL
  11. Πληκτρολόγιο οθόνης
  12. Στιγμιότυπο ολόκληρης της σελίδας
  13. Εξομοίωση συσκευών αφής
  14. Χρήσιμα χαρακτηριστικά

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

  • Ελέγξτε την ορθότητα της οθόνης.
  • Παρακολουθήστε την εκτέλεση σεναρίων σε JavaScript.
  • Προβολή δραστηριοτήτων δικτύου.

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

Για να ξεκινήσετε τον επιθεωρητή, μπορείτε να κάνετε δεξί κλικ οπουδήποτε στη σελίδα και να επιλέξετε "Προβολή κωδικού προϊόντος", μπορείτε επίσης να πιέσετε απλά Ctrl + Shift + C.

Γρήγορα επεξεργασία στοιχείων HTML

Ας ξεκινήσουμε με τα πιο απλά: στοιχεία επεξεργασίας.

Ας ξεκινήσουμε με τα πιο απλά: στοιχεία επεξεργασίας

Πώς να ελέγξετε:

  • Επιλέξτε την καρτέλα Στοιχεία.
  • Επιλέξτε οποιοδήποτε στοιχείο HTML μέσα στον πίνακα.
  • Κάντε διπλό κλικ στην ετικέτα και αλλάξτε, για παράδειγμα, το όνομα της ετικέτας.

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

Αναπτύξτε όλα τα στοιχεία του παιδιού

Πώς να ελέγξετε:

  • Μεταβείτε στον πίνακα Στοιχεία.
  • Επιλέξτε ένα στοιχείο και, ενώ κρατάτε πατημένο Alt, κάντε κλικ στο βέλος στα αριστερά του στοιχείου.

Μετακόμιση του επιθεωρητή

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

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

Πώς να ελέγξετε:

  • Ctrl + Shift + D - Εναλλαγή θέσης

Αναζήτηση στοιχείου DOM

Πιθανώς όχι πολλοί για τους οποίους αυτό θα είναι μια ανακάλυψη, αλλά στην καρτέλα "Στοιχεία" μπορείτε να κάνετε αναζήτηση από το DOM.

Πιθανώς όχι πολλοί για τους οποίους αυτό θα είναι μια ανακάλυψη, αλλά στην καρτέλα Στοιχεία μπορείτε να κάνετε αναζήτηση από το DOM

Πώς να ελέγξετε:

  • Πατήστε Ctrl + F και πληκτρολογήστε το προτεινόμενο ερώτημα αναζήτησης.

Παλέτες

Επιλέξτε χρώμα από την παλέτα

Η επιλογή του χρώματος στις πρόσφατες εκδόσεις του Chrome έχει υποστεί ορισμένες αλλαγές: προστέθηκαν δύο παλέτες για να διευκολυνθεί η επιλογή του χρώματος.

Πολλαπλοί δρομείς

Μετακινήστε τον κέρσορα και, κρατώντας πατημένο το πλήκτρο Ctrl, κάντε κλικ στην επιθυμητή περιοχή για να προσθέσετε ένα δρομέα. Μπορείτε να αναιρέσετε τη δράση χρησιμοποιώντας το Ctrl + U. Προσωπικά, ποτέ δεν ήμουν χρήσιμη.

Κωδικοποιήστε την εικόνα base64

Πώς να ελέγξετε:

  • Μεταβείτε στον πίνακα δικτύου.
  • Επιλέξτε εικόνα
  • Κάντε δεξί κλικ στην εικόνα και επιλέξτε ""

Εναλλαγή ψευδο-τάξης

Οι ψευδο-τάξεις αντικατοπτρίζουν την κατάσταση των στοιχείων και τις σχετικές θέσεις τους.

Οι ψευδο-τάξεις αντικατοπτρίζουν την κατάσταση των στοιχείων και τις σχετικές θέσεις τους

Πώς να ελέγξετε:

  • Κάντε δεξί κλικ σε ένα στοιχείο στον πίνακα "Στοιχεία" και επιλέξτε μια ψευδο-τάξη στη λίστα κατάστασης στοιχείων δύναμης.
  • Μπορείτε επίσης να επιλέξετε μια ψευδο-τάξη στη δεξιά πλευρά του πίνακα Στοιχεία.

Επιλογή στήλης

Πώς να ελέγξετε:

  • Μεταβείτε στον πίνακα "Πηγές".
  • Επιλέξτε οποιοδήποτε αρχείο.
  • Επιλέξτε το κείμενο κρατώντας το πλήκτρο Alt.

Η επιλογή μιας στήλης λειτουργεί επίσης όταν επεξεργάζεται HTML στον πίνακα Στοιχεία.

Αίτημα αντιγραφής για cURL

Οποιοδήποτε αίτημα στην καρτέλα "Δίκτυο" μπορεί να αντιγραφεί και στη συνέχεια να επικολληθεί στο τερματικό για εκτέλεση με περιστροφή.

Πληκτρολόγιο οθόνης

Εάν έχετε επιλέξει το προφίλ Nexus 5X, μπορείτε να δείτε πώς φαίνεται ο ιστότοπος όταν είναι ενεργοποιημένο το πληκτρολόγιο οθόνης.

Chrome DevTools: Πληκτρολόγιο οθόνης Chrome DevTools: Πληκτρολόγιο οθόνης

Στιγμιότυπο ολόκληρης της σελίδας

Πάρτε μια εικόνα ολόκληρης της σελίδας είναι πολύ απλή. Απλά χρειάζεται ...

  1. Άνοιγμα επιθεωρητή.
  2. Πηγαίνετε στην κονσόλα.
  3. Πατήστε Ctrl + Shift + P
  4. Πληκτρολογήστε "στιγμιότυπο οθόνης"
  5. Επιλέξτε "Στιγμιότυπο οθόνης πλήρους μεγέθους"
Στιγμιότυπο ολόκληρης της σελίδας

Εξομοίωση συσκευών αφής

Μπορείτε επίσης να προσομοιώσετε μερικούς αισθητήρες:

  • Οθόνη αφής
  • Συντεταγμένες για γεωγραφική κατανομή
  • Επιταχυνσιόμετρο

Πώς να δοκιμάσετε:

  • Επιλέξτε τον πίνακα Στοιχεία.
  • Πατήστε "Esc" και επιλέξτε "Emulation> Sensors".

Χρήσιμα χαρακτηριστικά

κλειδιά και τιμές

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