Kamu ingin tahu cara melihat source code website untuk memahami bagaimana sebuah halaman web dibangun? Di dalam source code, terdapat komponen seperti HTML, CSS, dan JavaScript yang menjadi fondasi tampilan serta fungsionalitas dari sebuah situs.
Di artikel ini kamu dapat mengeksplorasi cara melihat source code website melalui berbagai perangkat, baik komputer maupun ponsel. Dengan demikian, kamu dapat belajar bagaimana elemen website saling disusun. Yuk, simak sampai akhir!
Cara Melihat Source Code Website di Berbagai Perangkat
Melihat source code website bisa dilakukan dengan mudah, baik lewat perangkat komputer maupun ponsel. Setiap perangkat dan browser memiliki caranya masing-masing. Dengan panduan ini, kamu bisa mulai memahami struktur dasar dari sebuah situs hanya dengan beberapa klik.
1. Melihat Source Code di PC atau Laptop
Saat menggunakan PC atau laptop, kamu punya lebih banyak opsi dan tampilan yang lebih luas untuk mengeksplorasi source code website. Berikut beberapa opsi yang dapat kamu lakukan.
a. Menggunakan Browser Google Chrome atau Edge
Jika kamu menggunakan browser Google Chrome atau Edge, cukup klik kanan pada halaman yang sedang dibuka lalu pilih opsi “Lihat Sumber Halaman” atau “View Page Source”. Langkah ini akan membuka tab baru yang menampilkan keseluruhan struktur HTML dari halaman tersebut.
Alternatif lainnya, kamu bisa langsung menekan tombol Ctrl + U di keyboard sebagai pintasan cepat. Berikut adalah tampilan source code website-nya.
b. Menggunakan Developer Tools (Inspect Element)
Jika kamu ingin melihat elemen tertentu dari halaman secara lebih interaktif, gunakan fitur Inspect Element. Caranya, klik kanan di bagian mana pun dari halaman web, lalu pilih “Inspect” atau tekan Ctrl + Shift + I.
Dengan fitur ini, kamu bisa melihat HTML dan CSS yang berkaitan dengan elemen tersebut, bahkan bisa melakukan perubahan sementara untuk keperluan testing.
Setelah memilih “Inspect” maka akan muncul tampilan source code HTML seperti berikut.
c. Melihat Kode JavaScript dan CSS Eksternal
Selain itu kamu juga dapat melihat source code seperti JavaScript dari file JavaScript atau CSS yang digunakan dalam halaman, kamu bisa masuk ke Developer Tools.
Setelah itu buka tab “Sources” seperti berikut. Di sini , kamu akan menemukan daftar file eksternal seperti .js dan .css yang dimuat oleh website. Kamu bisa klik pada file tersebut untuk melihat isinya secara lengkap.
d. Menggunakan Mozilla Firefox
Firefox juga menyediakan fitur serupa dengan Chrome. Kamu bisa klik kanan di halaman lalu pilih “View Page Source”, atau tekan Ctrl + U di keyboard. Selain itu kamu juga dapat melihat kode website di Firexox dengan fitur Inspect (Ctrl + Shift + I) untuk mengakses Developer Tools. Di sini, kamu bisa menganalisis struktur HTML, CSS, hingga JavaScript yang digunakan di halaman tersebut.
2. Melihat Source Code di Ponsel (Android & iOS)
Walaupun ukuran layar dan fitur pada ponsel lebih terbatas daripada perangkat desktop, kamu tetap bisa memeriksa source code situs web langsung dari smartphone Android maupun iOS. Berikut beberapa opsinya.
a. Google Chrome (Android & iOS)
Di Google Chrome versi mobile, kamu bisa melihat source code website dengan cara mengetikkan view-source: di depan URL halaman yang ingin dibuka.
Misalnya, seperti contoh berikut view-source https://dewaweb.com lalu tekan enter. Nantinya, halaman akan menampilkan seluruh kode HTML yang digunakan. Meski tampilannya tidak serapi di desktop, cara ini cukup efektif untuk mengintip struktur dasar dari halaman web.
b. Safari (iOS)
Selain di Android, kode program website juga dapat dilihat pada Safari. Jika kamu pengguna Safari di iPhone, melihat kode ini tidak bisa dilakukan secara langsung pada browser. Sebagai gantinya, kamu bisa menggunakan fitur Web Inspector di Safari versi desktop (Mac), yang memungkinkan koneksi ke perangkat iOS.
Aktifkan opsi Developer di Safari desktop, sambungkan iPhone menggunakan kabel, lalu aktifkan fitur Web Inspector melalui pengaturan Safari di perangkat iOS. Setelah tersambung, kamu bisa menganalisis source code halaman dari iPhone langsung lewat desktop.
Cara Melihat Source Code pada Website
Melihat source code website dapat menjadi langkah awal bagi kamu yang ingin belajar lebih dalam tentang pengembangan web. Dari melihat struktur HTML hingga memeriksa file CSS dan JavaScript, aktivitas ini membantumu memahami bagaimana sebuah halaman web bekerja di balik layar. Cara ini dapat dilakukan melalui PC, laptop, maupun ponsel secara mudah.
Jika kamu tertarik untuk mulai membangun website sendiri, langkah selanjutnya adalah memiliki domain dan hosting yang andal. Dewaweb menyediakan layanan hosting dan domain terbaik yang cepat, aman, dan cocok untuk pemula maupun profesional. Yuk, mulai bangun website kamu sekarang juga bersama Dewaweb!
