Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengedit Halaman Web di Browser Chrome, Firefox, Edge, Safari

Halaman web sebenarnya hanyalah dokumen yang ditampilkan oleh browser web kita. Tetapi bagaimana jika kita bisa melakukan editing seperti mengetik langsung di halaman web apa saja untuk memodifikasinya? Kita bisa dengan mudah melakukannya, dan tidak perlu ekstensi browser khusus karena fitur ini ada di setiap browser modern.

Fitur ini memanfaatkan fitur "document.designMode", yang dapat diaktifkan melalui konsol JavaScript browser web. Fitur ini cukup menarik karena kita bisa melakukan perubahan apapun di halaman web yang kita kunjungi.

Manfaat terbesar dari fitur ini adalah kita dapat menggunakannya untuk membersihkan halaman web sebelum mencetaknya sehingga tidak semua bagian halaman ikut tercetak. Menguji bagaimana perubahan pada halaman web akan terlihat dengan mengubah langsung dari tampilan, atau mungkin hanya iseng untuk menjahili teman Anda. Hal ini memungkinkan kita bisa mengedit dokumen seperti di Word, tidak perlu dipusingkan dengan kode HTML.

Untuk mengaktifkan fitur ini, buka salah satu halaman web dan kemudian buka Developer Tool. Berikut ini cara untuk membukanya di berbagi browser:

  • Google Chrome: klik Menu > More tools > Developer tools atau tekan shortcut Ctrl + Shift + i.
  • Mozilla Firefox: klik Menu > Web Developer > Web Console atau Ctrl+Shift+K.
  • Apple Safari: klik Safari > Safari > Preferences > Advanced dan aktifkan "Show Develop menu in menu bar". Kemudian klik Develop > Show JavaScript Console.
  • Microsoft Edge: klik menu > More Tools > Developer Tools atau tekan shortcut F12 dan klik tab "Console".

Sebagai contoh kita gunakan browser Chrome. Setelah jendela developer muncul, cari dan klik tab "Console" di panel Developer Tools. Ketik kode berikut di console dan tekan Enter:

document.designMode = 'on'
Mengedit Halaman Web di Browser Chrome, Firefox, Edge, Safari
Mengedit Halaman Web di Browser Chrome, Firefox, Edge, Safari

Sekarang kita dapat menutup konsol jika ingin. Perhatikan di halaman web yang kita buka dan klik di salah satu kata, muncul kursor yang berkedip-kedip sama seperti di Word. Kita bisa mengetikkan apa saja di sini seolah-olah itu adalah dokumen yang dapat diedit. Gunakan tombol Backspace atau Delete untuk menghapus teks, gambar, dan elemen lainnya.

Ini hanya mengubah bagaimana halaman web muncul di browser. Jika kita melakukan refresh halaman, kita akan melihat halaman aslinya lagi. Jika Anda membuka halaman atau tab web lain, tab tersebut tidak akan berada dalam mode desain hingga kita membuka console dan mengetikkan kode perintah di atas lagi.

Kita juga bisa mengakses console lagi dan menjalankan perintah berikut untuk mematikan mode desain:

document.designMode = 'off'
Mengedit Halaman Web di Browser Chrome, Firefox, Edge, Safari
Mengedit Halaman Web di Browser Chrome, Firefox, Edge, Safari

Halaman web tidak akan dapat diedit lagi, tetapi perubahan Anda akan tetap ada sampai refresh dilakukan.
Ari
Ari blogger, IT technician

Posting Komentar untuk "Mengedit Halaman Web di Browser Chrome, Firefox, Edge, Safari"