Bagaimana cara menampilkan kode html di browser?

HTML mewakili Hypertext Markup Language dan merupakan bahasa skrip berbasis web. Tujuan utamanya adalah membuat dan mendesain halaman situs web. Rekaman dengan augmentasi HTML (atau HTM) hanya menahan teks dan referensi ke berbagai dokumen, mirip dengan gambar atau video

Setiap browser Internet utama memungkinkan pengguna untuk melihat kode sumber HTML halaman web mana pun. Bagian berikut berisi informasi tentang berbagai cara untuk melihat kode sumber di setiap browser utama. Untuk melanjutkan, pilih entri dari daftar di bawah dan ikuti petunjuknya

Informasi pengantar

Saat melihat kode sumber halaman web, informasi dan kode yang diproses oleh server tidak akan muncul. Misalnya, mesin pencari memproses informasi di server dan kemudian menampilkan hasilnya di halaman web. Dengan kata lain, Anda dapat melihat kode yang menyusun halaman hasil, tetapi Anda tidak dapat melihat kode sumber mesin pencari

Aturan ini berlaku untuk semua skrip sisi server, SSI, dan kode pemrograman. Oleh karena itu, Anda tidak dapat melihat kode sumber skrip yang digunakan di mesin telusur, forum, jajak pendapat, obrolan, dll. Selain itu, menyalin informasi dari kode sumber dapat menyebabkan kesalahan atau mengarahkan Anda kembali ke halaman tempat Anda menyalin informasi tersebut

Google Chrome

Untuk melihat kode sumber halaman web di Google Chrome, gunakan salah satu metode berikut

Lihat kode sumber saja

Metode satu

Untuk hanya melihat kode sumber, tekan tombol pintas Ctrl+U di keyboard komputer Anda

Metode dua

Klik kanan bagian kosong halaman web dan pilih Lihat sumber halaman dari menu pop-up yang muncul

Lihat sumber halaman dengan elemen

1. Buka Chrome dan navigasikan halaman web yang kode sumbernya ingin Anda lihat
2. Klik ikon Sesuaikan dan kontrol Google Chrome
   
   di pojok kanan atas jendela browser.
3. Dari menu tarik-turun yang muncul, pilih Alat lainnya, lalu pilih Alat pengembang
4. Klik tab Elemen di pojok kiri atas bagian baru yang muncul di bagian bawah layar

Tip

Di Chrome, menekan F12 atau Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan lebih banyak interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web dengan segera

Mozilla Firefox

Untuk melihat kode sumber halaman web di Mozilla Firefox, gunakan salah satu metode berikut

Lihat kode sumber saja

Metode satu

Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda

Metode dua

Klik kanan bagian kosong halaman web dan pilih View Page Source dari menu pop-up yang muncul

Lihat sumber halaman dengan elemen

1. Buka Firefox dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
2. Klik ikon Menu
   
   di pojok kanan atas layar.
3. Pilih Alat lainnya di menu tarik-turun, lalu pilih Alat Pengembang Web dari menu yang diperluas
4. Klik tab Inspektur di pojok kiri atas bagian yang muncul di bagian bawah layar

Tip

Di Firefox, menekan F12 atau Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web secara real-time

Lihat bagian kode sumber halaman

1. Sorot bagian halaman web tempat Anda ingin melihat kode sumber
2. Klik kanan bagian yang disorot dan pilih View Selection Source

Tip

Anda dapat menggunakan add-on Firebug untuk melihat dan mengedit kode sumber halaman, dan melihat perubahannya secara langsung melalui browser

Microsoft Edge

Untuk melihat kode sumber halaman web di Microsoft Edge, gunakan salah satu metode berikut

Lihat kode sumber saja

Metode satu

Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda

Metode dua

Klik kanan bagian kosong halaman web dan pilih Lihat sumber halaman dari menu pop-up yang muncul

Lihat sumber halaman dengan elemen

1. Buka Microsoft Edge dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
2. Klik ikon Setelan dan lainnya
   
   di pojok kanan atas layar.
3. Gerakkan mouse Anda ke Lebih banyak alat di menu tarik-turun, dan pilih Alat pengembang dari menu yang diperluas
4. Klik tab Elemen di bagian atas jendela yang muncul di sisi kanan layar

Tip

Di Microsoft Edge, menekan F12 atau Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web secara real-time

Microsoft Internet Explorer

Untuk melihat kode sumber halaman web di Microsoft Internet Explorer, gunakan salah satu dari metode berikut ini

Lihat kode sumber saja

Metode satu

Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda

Metode dua

Klik kanan bagian kosong halaman web dan pilih View source dari menu pop-up yang muncul

Lihat sumber halaman dengan elemen

1. Buka Internet Explorer dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
2. Klik Alat
   
   di pojok kanan atas.
3. Pilih Alat Pengembang F12 dari menu tarik-turun

1. Klik tab DOM Explorer di pojok kiri atas menu alat pengembang

Tip

Di Internet Explorer, menekan F12 menampilkan alat DOM. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web dengan segera

Safari

Di Safari, melihat kode sumber halaman web memerlukan pengaktifan opsi pengembang. Bagian berikut menunjukkan kepada Anda cara mengaktifkan fitur ini dan kemudian cara melihat kode sumber halaman web

Mengakses opsi pengembang di Safari

1. Buka browser Safari
2. Pilih
   
   dari bilah menu di pojok kiri atas layar.
3. Di menu tarik-turun yang muncul, pilih Preferensi

1. Klik tab Advanced, dan centang kotak di sebelah menu Show Develop di bilah menu

1. Sekarang Anda akan melihat pemilih Kembangkan di bilah menu Apple di bagian atas layar

Melihat kode sumber

Catatan

Anda harus mengaktifkan opsi pengembang agar langkah-langkah berikut berfungsi

Metode satu

1. Buka Safari dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
2. Di bilah menu Apple di bagian atas layar, klik pemilih Kembangkan dan pilih Tampilkan Sumber Halaman dari menu tarik-turun
3. Di tengah layar, klik tab Elemen di bagian atas alat pengembang

Metode 2

Klik kanan bagian kosong halaman web dan pilih Show Page Source dari menu pop-up yang muncul

Tip

Setelah opsi pengembang diaktifkan, Anda juga dapat menekan Command+option+U untuk melihat kode sumber

Opera

Untuk melihat kode sumber halaman web di Opera, gunakan salah satu metode berikut

Lihat kode sumber saja

Metode satu

Untuk hanya melihat kode sumber, tekan Ctrl+U di keyboard komputer Anda

Metode dua

Klik kanan bagian kosong halaman web dan pilih Sumber halaman dari menu pop-up yang muncul

Lihat sumber halaman dengan elemen

1. Buka Opera dan arahkan ke halaman web yang kode sumbernya ingin Anda lihat
2. Klik ikon Opera
   
   di pojok kiri atas jendela browser.
3. Gerakkan mouse Anda ke atas Pengembang di menu tarik-turun dan pilih alat Pengembang dari menu yang diperluas
4. Klik tab Elemen di bagian atas jendela yang muncul di sisi kanan layar

Tip

Jika Anda tidak melihat submenu Pengembang, pilih Alat lainnya → Tampilkan menu pengembang. Kemudian, klik tombol menu

Tip

Di Opera, menekan Ctrl+Shift+I juga menampilkan alat pengembang interaktif. Alat ini memberikan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode memengaruhi halaman web secara real-time

Ponsel atau tablet Android menggunakan Chrome

1. Buka browser Google Chrome di ponsel atau tablet Android Anda
2. Buka halaman web yang kode sumbernya ingin Anda lihat
3. Ketuk sekali di bilah alamat dan gerakkan kursor ke depan URL
4. Ketik sumber tampilan. dan ketuk Enter atau Go

Tip

Misalnya, untuk melihat kode beranda kami, Anda harus mengetik view-source. https. // www. computerhope. com

Jika langkah-langkah di atas tidak berhasil di ponsel Android Anda, gunakan cara di bagian tersebut. Kode yang sama berfungsi di ponsel Android. Satu-satunya perbedaan adalah menggunakan Chrome, bukan Safari, dan cara membuat bookmark

• Cara membuat favorit atau bookmark Internet
• Cara menghapus dan mengatur favorit dan bookmark Internet

Tip

Jika Anda kesulitan menavigasi kode sumber di perangkat seluler menggunakan metode di atas, Anda mungkin juga ingin mempertimbangkan

iPhone atau iPad menggunakan Safari

Melihat kode sumber halaman web di iPhone atau iPad membutuhkan lebih banyak pekerjaan, tetapi itu mungkin. Prosesnya mengharuskan Anda untuk membuat bookmark, menetapkan kode JavaScript ke dalamnya, dan menggunakan bookmark di halaman web untuk melihat kode sumbernya

Catatan

Jika Anda lebih suka menggunakan aplikasi untuk melihat kode sumber halaman web, Anda dapat mengunduh aplikasi View Source gratis dari iOS App Store

Buat bookmark untuk melihat kode sumber

1. Buka browser Safari di iPhone atau iPad Anda
2. Akses halaman web apa pun, seperti www. computerhope. com
3. Ketuk ikon Lainnya di bagian bawah layar

Tip

Anda juga dapat menekan dan menahan jari Anda pada ikon Bookmark di bagian bawah layar hingga muncul menu

1. Di menu yang terbuka, ketuk opsi Tambahkan Bookmark

1. Ketuk bidang nama bookmark, ketuk x di sisi kanan untuk menghapus nama saat ini, dan masukkan "Lihat kode sumber halaman web" sebagai nama baru

1. Ketuk Simpan di pojok kanan atas untuk menyimpan bookmark
2. Salin seluruh cuplikan kode JavaScript di bawah ini

javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

1. Di Safari, akses bookmark dengan mengetuk ikon bookmark di bagian bawah layar

1. Temukan bookmark yang Anda buat di atas, lalu tekan dan tahan jari Anda pada bookmark hingga menu terbuka di bagian bawah layar
2. Ketuk opsi Edit pada menu

1. Pada layar Edit Bookmark, ketuk URL, ketuk x untuk menghapus URL, dan rekatkan kode JavaScript dari langkah 7 ke bidang URL

1. Ketuk Selesai di kanan bawah layar untuk menyimpan perubahan bookmark

Gunakan bookmark untuk melihat kode sumber

Setelah membuat bookmark di atas, kini Anda dapat melihat kode sumber untuk halaman web

1. Di Safari, akses halaman web tempat Anda ingin melihat kode sumber
2. Ketuk ikon bookmark di bagian bawah layar

1. Ketuk bookmark Lihat kode sumber halaman web yang Anda buat

Tab penjelajahan Safari baru terbuka, menampilkan kode sumber untuk halaman web

Tip

Jika Anda kesulitan menavigasi kode sumber di perangkat seluler menggunakan metode di atas, Anda juga dapat mempertimbangkan untuk menggunakan

Cara menutup halaman atau alat kode sumber

Setelah selesai melihat kode sumber di halaman web, Anda mungkin ingin keluar atau menutupnya. Menutup kode sumber tergantung pada metode yang digunakan untuk membukanya

• Jika Anda telah menggunakan metode Ctrl+U (kecuali Edge) atau metode klik kanan, tutup tab baru yang terbuka di bagian atas jendela browser Anda
• Jika Anda telah menggunakan metode pengembang (menggunakan F12 atau Ctrl+Shift+I), tekan kembali tombol yang sama, atau klik ikon
  
  di pojok kanan atas .

Gunakan alat online untuk melihat kode sumber

Selain menggunakan browser, beberapa alat online memungkinkan Anda melihat kode sumber halaman web mana pun. Alat-alat ini mungkin bermanfaat karena sebagian besar dapat memformat, menyesuaikan gaya, dan menyorot kode agar lebih mudah dibaca. Di bawah ini adalah daftar singkat dari beberapa alat

Bagaimana cara melihat kode HTML di Chrome?

Bagaimana cara menampilkan kode HTML di situs web tanpa menjalankannya?

Mengapa kode HTML saya tidak muncul di browser?