Cara melihat kode sumber HTML halaman web
Semua browser Internet memungkinkan pengguna untuk melihat kode sumber HTML dari halaman web mana pun yang mereka kunjungi. 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 instruksi untuk bagian itu.
Informasi pengantar
Saat melihat kode sumber halaman web, sadari informasi dan kode yang diproses oleh server tidak akan muncul di sumber. 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 pencari, forum, polling, chat, dll. Selain itu, menyalin informasi dari kode sumber dapat menyebabkan kesalahan atau mengarahkan Anda kembali ke halaman tempat Anda menyalin informasi.
Microsoft Edge
Untuk melihat kode sumber halaman web di Microsoft Edge, ikuti langkah-langkah di bawah ini.
- tekan Ctrl + U atau F12 di keyboard komputer Anda.
- Pilih Elemen tab di bagian atas jendela kanan.
Atau
-
Klik kanan pada bagian kosong halaman web dan pilih Lihat sumber dari menu pop-up yang muncul.
Atau
- Buka Microsoft Edge dan navigasikan ke halaman web pilihan Anda.
- Klik More ikon di pojok kanan atas layar.
- Pilih Alat pengembang dari menu tarik-turun yang muncul.
- Pilih Elemen tab di bagian atas jendela kanan.
Di Microsoft Edge, alat DOM juga menyediakan interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode mempengaruhi halaman web dengan segera.
Microsoft Internet Explorer
Untuk melihat kode sumber halaman web di Microsoft Internet Explorer, ikuti langkah-langkah di bawah ini.
- tekan Ctrl + U atau F12 di keyboard komputer Anda.
- Klik Debugger tab di bagian atas menu baru.
Atau
-
Klik kanan pada bagian kosong halaman web dan pilih Lihat sumber dari menu pop-up yang muncul.
Atau
- Buka Internet Explorer dan navigasikan ke halaman web pilihan Anda.
- tekan Alt kunci untuk menampilkan bilah menu browser.
- Pilih Melihat, lalu Sumber dari menu tarik-turun yang muncul.
- Klik Debugger tab di bagian atas menu baru.
Dengan versi terbaru Internet Explorer, menekan Tombol F12 menampilkan alat DOM. Alat ini menyediakan lebih banyak interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode mempengaruhi halaman web dengan segera.
Mozilla Firefox dan Netscape
Untuk melihat kode sumber halaman web di Mozilla Firefox, ikuti langkah-langkah di bawah ini.
- tekan Ctrl + U di keyboard komputer Anda.
Atau
-
Klik kanan pada bagian kosong halaman web dan pilih Lihat sumber halaman dari menu pop-up yang muncul.
Atau
- Buka Mozilla Firefox dan navigasikan ke halaman web pilihan Anda.
- tekan Alt kunci untuk menampilkan bilah menu browser.
- Pilih Alat, Pengembang Web, lalu Sumber Halaman.
Dengan versi terbaru Firefox, menekan Tombol F12 atau Ctrl + Shift + I menampilkan alat pengembang interaktif. Alat ini menyediakan lebih banyak interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode mempengaruhi halaman web dengan segera.
Lihat bagian kode sumber halaman
-
Sorot bagian halaman web yang kode sumbernya ingin Anda lihat.
-
Klik kanan bagian yang disorot, lalu klik Lihat Sumber Pilihan.
Gunakan add-on Firebug untuk tidak hanya melihat kode sumber halaman tetapi juga mengubah dan melihat perubahan tersebut secara langsung melalui browser.
Google Chrome
Untuk melihat kode sumber halaman web di Google Chrome, ikuti langkah-langkah di bawah ini.
- tekan Ctrl + U di keyboard komputer Anda.
Atau
-
Klik kanan pada bagian kosong halaman web dan pilih Lihat sumber halaman dari menu pop-up yang muncul.
Atau
- Buka Chrome dan navigasikan halaman web pilihan Anda.
- Klik Sesuaikan dan kontrol Google Chrome ikon di sisi kanan atas jendela browser.
- Dari menu drop-down yang muncul, pilih Lebih banyak alat lalu Alat pengembang.
- Klik Elemen tab di atas bagian baru yang muncul.
Dengan versi terbaru Chrome, menekan Tombol F12 atau Ctrl + Shift + I juga menampilkan alat pengembang interaktif. Alat ini menyediakan lebih banyak interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode mempengaruhi halaman web dengan segera.
Apple Safari
Untuk melihat kode sumber halaman web di Apple Safari, ikuti langkah-langkah di bawah ini.
- tekan Command + Option + U di keyboard Anda.
Atau
-
Klik kanan pada bagian kosong halaman web dan pilih Tampilkan sumber halaman dari menu pop-up yang muncul.
Atau
- Buka browser Safari dan navigasikan ke halaman web pilihan Anda.
- Pilih Mengembangkan Tidak bisa.
- Memilih Tampilkan sumber halaman pilihan.
Opera
Untuk melihat kode sumber halaman web di Opera, ikuti langkah-langkah di bawah ini.
- tekan Ctrl + U di keyboard Anda.
Atau
-
Klik kanan pada bagian kosong halaman web dan pilih Sumber halaman dari menu pop-up yang muncul.
Atau
- Buka Opera dan navigasikan ke halaman web pilihan Anda.
- Klik tombol Menu di pojok kiri atas jendela browser.
- Dalam Pengembang sub-menu, pilih Sumber halaman.
Jika Anda tidak melihat file Pengembang sub-menu, pilih Lebih banyak alat → Tampilkan menu pengembang. Kemudian, klik tombol menu lagi. Anda sekarang harus melihat file Pengembang sub-menu terdaftar.
Dengan versi terbaru Opera, menekan kombinasi pintasan Ctrl + Shift + I menampilkan alat pengembang interaktif. Alat ini menyediakan lebih banyak interaksi dengan kode sumber dan pengaturan CSS, memungkinkan pengguna untuk melihat bagaimana perubahan kode mempengaruhi halaman web dengan segera.
Ponsel Android menggunakan Chrome
- Buka browser Google Chrome di ponsel Android Anda.
- Buka halaman web yang kode sumbernya ingin Anda lihat.
- Ketuk sekali di bilah alamat dan gerakkan kursor ke depan URL.
- Tipe Lihat sumber: dan ketuk Memasukkan atau Pergilah.
Misalnya, untuk melihat kode beranda kami, Anda harus mengetik lihat-sumber: https: //www.computerhope.com
Jika langkah-langkah di atas tidak berfungsi pada ponsel Android Anda atau tidak menampilkan kode sumber yang Anda cari, gunakan metode tampilan kode sumber di iPhone atau iPad menggunakan Safari bagian. Kode yang sama berfungsi di ponsel Android, satu-satunya perbedaan adalah menggunakan Chrome, bukan Safari, dan proses untuk membuat bookmark dan mengedit bookmark.
Jika Anda merasa kesulitan menavigasi kode sumber pada perangkat seluler Anda menggunakan metode di atas, Anda mungkin juga ingin mempertimbangkan untuk menggunakan alat online.
iPhone atau iPad menggunakan Safari
Melihat kode sumber halaman web di iPhone atau iPad membutuhkan lebih banyak pekerjaan untuk diselesaikan, tetapi itu mungkin. Prosesnya mengharuskan Anda untuk membuat bookmark, menetapkan kode JavaScript, dan menggunakan bookmark di halaman web untuk melihat kode sumbernya.
Jika Anda lebih suka menggunakan aplikasi untuk melihat kode sumber halaman web, Anda dapat mengunduh secara gratis Lihat sumber aplikasi dari App Store iOS.
Buat bookmark untuk melihat kode sumber
- Buka browser Safari di iPhone atau iPad Anda.
- Akses halaman web apa pun, seperti www.computerhope.com.
- Ketuk Lebih ikon di bagian bawah layar.
Anda juga dapat menekan dan menahan jari Anda pada Penanda buku ikon di bagian bawah layar hingga menu muncul.
- Di menu yang terbuka, ketuk Tambah bookmark pilihan.
- Ketuk di bidang nama penanda, ketuk x di sisi kanan untuk menghapus nama saat ini, dan masukkan “Lihat kode sumber halaman web“sebagai nama baru.
- Keran Menyimpan di pojok kanan atas untuk menyimpan bookmark.
- 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))})();
- Di Safari, akses penanda dengan mengetuk ikon penanda di bagian bawah layar.
- Temukan bookmark yang Anda buat di atas, lalu tekan dan tahan jari Anda pada bookmark hingga menu terbuka di bagian bawah layar.
- Ketuk Edit opsi di menu.
- Di Edit Bookmark layar, ketuk URL dan kemudian ketuk x untuk menghapus URL, lalu tempel kode JavaScript dari langkah 7 ke dalam bidang URL.
- Keran Selesai di kanan bawah layar untuk menyimpan perubahan bookmark.
Gunakan penanda untuk melihat kode sumber
Setelah Anda membuat bookmark di atas, Anda sekarang dapat melihat kode sumber untuk halaman web.
- Di Safari, akses halaman web tempat Anda ingin melihat kode sumber.
- Ketuk ikon penanda di bagian bawah layar.
- Ketuk Lihat kode sumber halaman web bookmark yang Anda buat.
Tab penjelajahan Safari baru terbuka, menampilkan kode sumber untuk halaman web.
Jika Anda merasa kesulitan menavigasi kode sumber pada perangkat seluler Anda menggunakan metode di atas, Anda mungkin juga ingin mempertimbangkan untuk menggunakan alat online.
Cara menutup halaman atau alat kode sumber
Setelah Anda selesai melihat kode sumber di halaman web, Anda mungkin ingin keluar atau menutupnya. Menutup kode sumber tergantung pada metode yang Anda gunakan 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 (menekan F12 atau Ctrl + Shift + I), klik ikon di pojok kanan atas dari jendela alat.
Gunakan alat online untuk melihat kode sumber
Selain melihat kode sumber menggunakan browser, ada beberapa alat online untuk melihat kode sumber dari halaman web mana pun. Alat-alat ini juga dapat lebih membantu karena beberapa di antaranya juga dapat memformat, menyesuaikan gaya, dan menyorot kode agar lebih mudah dibaca. Di bawah ini adalah daftar singkat dari beberapa alat ini.
- Lihat sumber halaman
- Kode Mempercantik penampil kode sumber
- Penampil HTML