Οι ιστοσελίδες είναι απλώς έγγραφα που εμφανίζει το πρόγραμμα περιήγησής σας στο Web. Τι γίνεται όμως αν θα μπορούσατε να πληκτρολογήσετε απευθείας σε οποιαδήποτε ιστοσελίδα για να την τροποποιήσετε; Μπορείτε και δεν χρειάζεστε επέκταση προγράμματος περιήγησης - είναι μια δυνατότητα ενσωματωμένη σε κάθε σύγχρονο πρόγραμμα περιήγησης.
Αυτή η λειτουργία εκμεταλλεύεται τη λειτουργία "document.designMode", την οποία μπορείτε να ενεργοποιήσετε μέσω της κονσόλας JavaScript του προγράμματος περιήγησης ιστού. Τονίστηκε πρόσφατα από τον Tomek Sułkowski στο Twitter, αλλά είναι τόσο ωραίο που πρέπει να το μοιραστούμε με τους αναγνώστες μας.
Αυτό το συναίσθημα όταν ανακαλύψατε για πρώτη φορά το "document.designMode" πικ.τβίττερ.κομ/βξΑ1otzCjN
- Tomek Sułkowski (@sulco) 27 Σεπτεμβρίου 2019
Θα μπορούσατε να χρησιμοποιήσετε αυτήν τη δυνατότητα για καθαρίστε μια ιστοσελίδα πριν την εκτυπώσετε , δοκιμάστε τον τρόπο εμφάνισης των αλλαγών σε μια ιστοσελίδα ή ακόμα και απλώς φάρσες. Θα είναι σαν να επεξεργάζεστε ένα έγγραφο του Word - δεν απαιτείται βλάβη με HTML.
Για να ενεργοποιήσετε αυτήν τη δυνατότητα, επισκεφθείτε μια ιστοσελίδα και, στη συνέχεια, ανοίξτε την κονσόλα προγραμματιστή. Για να ανοίξετε την κονσόλα στο Google Chrome, κάντε κλικ στο μενού> Περισσότερα εργαλεία> Εργαλεία προγραμματιστή ή πατήστε Ctrl + Shift + i.
Ενώ χρησιμοποιούμε το Chrome ως παράδειγμα εδώ, αυτή η δυνατότητα λειτουργεί σε άλλα σύγχρονα προγράμματα περιήγησης , πολύ. Δείτε πώς μπορείτε να ανοίξετε την κονσόλα σε άλλα προγράμματα περιήγησης:
- Στο Mozilla Firefox, κάντε κλικ στο μενού> Web Developer> Web Console ή πατήστε Ctrl + Shift + K.
- Στο Apple Safari, κάντε κλικ στο Safari> Προτιμήσεις> Για προχωρημένους και ενεργοποιήστε το "Εμφάνιση μενού ανάπτυξης στη γραμμή μενού". Στη συνέχεια, κάντε κλικ στην επιλογή Ανάπτυξη> Εμφάνιση κονσόλας JavaScript.
- Στο Microsoft Edge, κάντε κλικ στο μενού> Περισσότερα εργαλεία> Εργαλεία προγραμματιστή ή πατήστε F12 και, στη συνέχεια, κάντε κλικ στην καρτέλα "Κονσόλα".
Κάντε κλικ στην καρτέλα "Κονσόλα" στο επάνω μέρος του πίνακα εργαλείων προγραμματιστών. Πληκτρολογήστε τα ακόλουθα στην κονσόλα και πατήστε Enter:
document.designMode = 'on'
Τώρα μπορείτε να κλείσετε την κονσόλα, αν θέλετε, και να επεξεργαστείτε την τρέχουσα ιστοσελίδα σαν να ήταν ένα επεξεργάσιμο έγγραφο. Κάντε κλικ κάπου για να εισαγάγετε τον κέρσορα και πληκτρολογήστε κείμενο. Χρησιμοποιήστε τα πλήκτρα Backspace ή Delete για να αφαιρέσετε κείμενο, εικόνες και άλλα στοιχεία.
Αυτό αλλάζει ακριβώς τον τρόπο εμφάνισης της ιστοσελίδας στο πρόγραμμα περιήγησής σας. Μόλις ανανεώσετε τη σελίδα, θα δείτε ξανά το πρωτότυπο. Εάν μεταβείτε σε άλλη ιστοσελίδα ή καρτέλα, δεν θα είναι σε λειτουργία σχεδίασης έως ότου ανοίξετε την κονσόλα και πληκτρολογήσετε αυτήν τη γραμμή ξανά.
Μπορείτε ακόμη να επιστρέψετε στην κονσόλα και να εκτελέσετε την ακόλουθη εντολή για να απενεργοποιήσετε τη λειτουργία σχεδίασης:
document.designMode = "απενεργοποιημένο"
Η ιστοσελίδα δεν θα είναι πλέον επεξεργάσιμη, αλλά οι αλλαγές σας θα διατηρηθούν μέχρι να ανανεώσετε τη σελίδα.