Πώς να επεξεργαστείτε ιστοσελίδες στο Safari χρησιμοποιώντας το στοιχείο Inspect Element

Με το εργαλείο Inspect Element, το Safari σάς επιτρέπει να εργάζεστε με τον κώδικα της διεπαφής οποιασδήποτε ιστοσελίδας. Εάν θέλετε να δοκιμάσετε πώς θα μοιάζει μια σελίδα με διαφορετικό κείμενο ή εικόνες, μπορείτε να το κάνετε αλλάζοντας τον κώδικά της με το Inspect Element.

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

Τι είναι το στοιχείο επιθεώρησης;

Το Inspect Element είναι ένα εργαλείο προγραμματιστή. Είναι διαθέσιμο στο Safari, αν και σε άλλα προγράμματα περιήγησης ιστού όπως το Chrome, το Firefox και το Edge. Με το Inspect Element, μπορείτε να κοιτάξετε πίσω από την κουρτίνα ενός ιστότοπου για να αποκαλύψετε τον κώδικα του μπροστινού του τμήματος, όπως το HTML και το CSS. Ωστόσο, δεν σας παρέχει ορατότητα του back-end, όπως οι βάσεις δεδομένων του.

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

Γιατί πρέπει να χρησιμοποιήσετε το στοιχείο επιθεώρησης;

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

Για παράδειγμα, οι ιδιοκτήτες επιχειρήσεων μπορούν να δουν τις λέξεις-κλειδιά που περιλαμβάνονται στον ιστότοπο ενός ανταγωνιστή ή οι σχεδιαστές μπορούν χρησιμοποιήστε το Inspect Element για να αναγνωρίσετε μια γραμματοσειρά που βρίσκουν ελκυστικά ή να δοκιμάσουν γρήγορα έναν διαφορετικό συνδυασμό χρωμάτων στον ιστότοπό τους.

Προς το παρόν, θα επικεντρωθούμε στην επεξεργασία των βασικών στοιχείων μιας ιστοσελίδας χρησιμοποιώντας το Inspect Element.

Πώς να αποκτήσετε πρόσβαση στο στοιχείο επιθεώρησης στο Safari

Μπορείτε να ανοίξετε το Inspect Element στο Safari χρησιμοποιώντας το μενού προγραμματιστή:

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

Αφού κάνετε αυτήν την επιλογή, μπορείτε κάντε δεξί κλικ σε μια ιστοσελίδα και επιλέξτε Επιθεώρηση στοιχείου. Εναλλακτικά, μπορείτε να επιλέξετε Αναπτύσσω στη γραμμή μενού και μετά Εμφάνιση Web Inspector.

Πώς να βρείτε στοιχεία Web στο Inspect Element

Για να ξεκινήσετε την επεξεργασία ενός στοιχείου, κάντε δεξί κλικ αυτό που θέλετε να επεξεργαστείτε και κάντε κλικ Επιθεώρηση στοιχείου. Αυτό θα ανοίξει το παράθυρο προγραμματιστή, με επισημασμένη τη σχετική ενότητα. Μπορεί να διαπιστώσετε ότι το συγκεκριμένο στοιχείο που θέλετε να προσθέσετε (η εικόνα ή το κείμενο, ας πούμε) είναι κρυμμένο. για να το εντοπίσετε, χρησιμοποιήστε το βέλη στα αριστερά για να επεκτείνετε τα ένθετα τμήματα.

Για να περιορίσετε την επιλογή σας, κάντε κλικ στο εικονίδιο στόχου από τη γραμμή εργαλείων Inspect Element. Τώρα, καθώς περιηγείστε στον κώδικα, επισημαίνει αυτήν την ενότητα στον ιστότοπο. Ή μπορείτε να χρησιμοποιήσετε τον κέρσορα για να εντοπίσετε με ακρίβεια μια ενότητα στον ιστότοπο. Αυτό είναι βολικό όταν θέλετε να ακονίσετε κάτι συγκεκριμένο σε μια πολυσύχναστη περιοχή μιας ιστοσελίδας.

Πώς να επεξεργαστείτε το κείμενο ενός ιστότοπου χρησιμοποιώντας το στοιχείο επιθεώρησης

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

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

Πώς να επεξεργαστείτε τις εικόνες ενός ιστότοπου χρησιμοποιώντας το στοιχείο Inspect Element

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

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

Ψάξτε σε ιστότοπους χρησιμοποιώντας το Safari

Το εργαλείο Inspect Element του Safari σάς επιτρέπει να βρίσκετε και να αλλάζετε εύκολα τον κώδικα που αντιστοιχεί σε κείμενο και εικόνες, κάτι που είναι τόσο εύκολο όσο η αλλαγή μιας συμβολοσειράς κειμένου ή διεύθυνσης URL. Μόλις ολοκληρώσετε την επεξεργασία ενός ιστότοπου με το Inspect Element, απλώς ανανεώστε τη σελίδα και όλα θα επανέλθουν στο κανονικό.

Πώς να αλλάξετε τον πράκτορα χρήστη και τους ιστότοπους τεχνασμάτων του προγράμματος περιήγησής σας

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

Σχετικά με τον Συγγραφέα