Halaman Web atau web Page hanyalah sebuah dokumen yang di tampilkan oleh browser web. Bagaimana jika kamu bisa mengetik langsung di halaman web apa saja untuk memodifikasinya? Kamu bisa dan tidak perlu menggunakan ekstensi browser! Setiap browser modern mempunyai fitur tersebut.

Fitur ini memanfaatkan Fitur “document.designMode”, yang bisa di aktifkan melalui console JavaScript browser yang kamu pakai. Tomek Sulkowski di twitter baru-baru ini menyorot tentang fitur ini. Karena fitur ini keren maka saya membuat artikel ini agar lebih banyak orang yang tau.

Kamu dapat menggunakan fitur ini untuk membersihkan halaman web sebelum mencetaknya, mengetes seperti apa halaman web akan terlihat jika di beri perubahan, atau bahkan hanya mengerjai orang. Fitur ini sama seperti mengedit dokumen Word — tidak perlu pusing dengan HTML, sehingga siapa saja bisa menggunakan nya.

Untuk mengaktifkan fitur ini, kunjungi halaman web yang ingin kamu edit dan kemudian buka developer console. Untuk membuka console di Google Chrome, klik menu> Alat Lainnya> Alat Pengembang atau tekan Ctrl + Shift + I.

Fitir ini dapat di gunakan di browser modern lain :

Di Mozilla Firefox, klik menu> Pengembang Web> Konsol Web atau tekan Ctrl + Shift + K.
Di Apple Safari, klik Safari> Preferensi> Tingkat Lanjut 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 dan kemudian klik tab “Konsol”.

Klik tab “Console” di bagian atas panel Developer tools. Ketik kode berikut ke Console dan tekan Enter:

| document.designMode = ‘on' |

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

Perlu di ingat bahwa fitur ini hanya mengedit halaman web yang muncul di browser mu saja, dan saat kamu merefresh browser maka halaman web tersebut akan kembali seperti semula dan kamu akan melihat halaman asli nya lagi. Jika kamu membuka laman atau tab web lain, tab itu tidak akan berada dalam mode desain jadi kamu harus membuka konsol dan mengetikkan kode nya lagi.

Untuk mematikan design mode ini, kamu harus kembali ke console dan memasuk kan kode ini :

| document.designMode = ‘off' |

setelah kamu menonaktifkan design mode nya, maka halaman web tersebut tidak dapat di edit lagi sampai kamu aktifkan kembali, tetapi hasil yang kamu edit di halaman tersebut akan tetap ada sampai kamu merefresh halaman tersebut.