Cara Mengedit Halaman Web Apa Pun di Chrome (atau Browser Apa Pun)

Halaman web hanyalah dokumen yang ditampilkan browser web Anda. Tetapi bagaimana jika Anda dapat mengetik langsung di halaman web mana pun untuk memodifikasinya? Anda bisa, dan Anda tidak memerlukan ekstensi browser — ini adalah fitur yang terpasang di setiap browser modern.

Fitur ini memanfaatkan fitur "document.designMode", yang dapat Anda aktifkan melalui konsol JavaScript browser web Anda. Ini baru-baru ini disorot oleh Tomek Sułkowski di Twitter, tapi sangat keren sehingga kami harus membagikannya dengan pembaca kami.

Anda dapat menggunakan fitur ini untuk membersihkan halaman web sebelum mencetaknya, menguji bagaimana perubahan pada halaman web akan terlihat, atau bahkan hanya mengerjai orang. Ini akan seperti mengedit dokumen Word — tidak perlu mengotak-atik HTML.

Untuk mengaktifkan fitur ini, kunjungi halaman web dan kemudian buka konsol pengembang. Untuk membuka konsol di Google Chrome, klik menu> Alat Lainnya> Alat Pengembang atau tekan Ctrl + Shift + i.

Meskipun kami menggunakan Chrome sebagai contoh di sini, fitur ini juga berfungsi di browser modern lainnya. Berikut cara membuka konsol di browser lain:

• Di Mozilla Firefox, klik menu> Pengembang Web> Konsol Web atau tekan Ctrl + Shift + K.
• Di Apple Safari, klik Safari> Preferensi> Lanjutan dan aktifkan "Tampilkan menu Kembangkan di bilah menu". Kemudian, klik Kembangkan> Tampilkan Konsol JavaScript.
• Di Microsoft Edge, klik menu> Alat Lainnya> Alat Pengembang atau tekan F12 lalu klik tab "Konsol".

Klik tab "Konsol" di bagian atas panel Alat Pengembang. Ketik berikut ini ke dalam konsol dan tekan Enter:

document.designMode = 'aktif'

Anda sekarang dapat menutup konsol, jika Anda mau, dan mengedit halaman web saat ini seolah-olah itu adalah dokumen yang dapat diedit. Klik di suatu tempat untuk memasukkan kursor dan mengetik teks. Gunakan tombol Backspace atau Delete untuk menghapus teks, gambar, dan elemen lainnya.

Ini hanya mengubah bagaimana halaman web muncul di browser Anda. Segera setelah Anda menyegarkan halaman, Anda akan melihat halaman aslinya sekali lagi. Jika Anda pergi ke halaman web atau tab lain, itu tidak akan berada dalam mode desain sampai Anda membuka konsol dan mengetik baris ini sekali lagi.

Anda bahkan dapat kembali ke konsol dan menjalankan perintah berikut untuk menonaktifkan mode desain:

document.designMode = 'mati'

Halaman web tidak dapat diedit lagi, tetapi perubahan Anda akan dipertahankan sampai Anda menyegarkan halaman berikutnya.