Τρόπος επεξεργασίας οποιασδήποτε ιστοσελίδας στο Chrome (ή οποιουδήποτε προγράμματος περιήγησης)

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

Αυτή η δυνατότητα εκμεταλλεύεται τη λειτουργία "document.designMode", την οποία μπορείτε να ενεργοποιήσετε μέσω της κονσόλας JavaScript του προγράμματος περιήγησης ιστού. Τονίστηκε πρόσφατα από τον Tomek Sułkowski στο Twitter, αλλά είναι τόσο ωραίο που πρέπει να το μοιραστούμε με τους αναγνώστες μας.

Θα μπορούσατε να χρησιμοποιήσετε αυτήν τη δυνατότητα για να καθαρίσετε μια ιστοσελίδα πριν την εκτυπώσετε, να δοκιμάσετε πώς θα εμφανίζονται οι αλλαγές σε μια ιστοσελίδα ή ακόμα και απλώς φάρσες. Θα είναι σαν να επεξεργάζεστε ένα έγγραφο του 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 = "απενεργοποιημένο"

Η ιστοσελίδα δεν θα είναι πλέον επεξεργάσιμη, αλλά οι αλλαγές σας θα διατηρηθούν μέχρι να ανανεώσετε τη σελίδα.