Website tidak melulu hanya mengenai tampilan antarmukanya. Memang benar, tampilan depan merupakan elemen website yang paling sering diperhatikan kebanyakan orang.
Namun, di balik tampilan website tersebut, terdapat elemen website lainnya yang membentuk sebuah website.
Elemen-elemen ini seperti struktur HTML, CSS, hingga interaksi yang diatur oleh JavaScript.
Elemen-elemen itulah yang biasa disebut source code. Source code merupakan sekumpulan kode yang membentuk tampilan dan fungsi website yang kita lihat setiap hari.
Kode ini biasanya perlu dilihat oleh para web developer untuk mempelajari aspek backend dari sebuah website.
Di artikel ini, kami akan memberikan panduan lengkap untuk melihat source code di berbagai browser dan perangkat.
Panduan ini bukan hanya untuk para developer, siapa saja bisa mencobanya!
Tentang Source Code Website
Source code adalah kumpulan kode pemrograman yang menjadi fondasi dari tampilan dan fungsi sebuah website.
Kode ini ditulis dalam bahasa pemrograman tertentu, seperti HTML, CSS, dan JavaScript, yang kemudian diterjemahkan oleh browser menjadi tampilan yang Anda lihat di layar.
Source code berfungsi sebagai “resep” yang mengatur bagaimana setiap elemen pada website harus ditampilkan dan berinteraksi.
Dengan melihat source code, Anda dapat memahami bagaimana sebuah halaman web dibangun, mulai dari struktur layout hingga fungsi interaktifnya.
Memahami source code bisa memberikan wawasan lebih dalam tentang cara kerja website dan menjadi dasar yang kuat untuk belajar pemrograman web.
Baca Juga: Pengertian Privacy Policy di Website
Cara Melihat Source Code Website di Berbagai Browser
Sekarang, mari kita masuk ke bagian praktisnya. Berikut adalah cara melihat source code di berbagai browser populer.
1. Melihat Source Code Website di Google Chrome
Google Chrome adalah salah satu browser paling populer dan juga mudah digunakan untuk melihat source code. Caranya sederhana:
- Buka halaman website yang ingin Anda lihat source code-nya.
- Klik kanan di sembarang tempat pada halaman tersebut.
- Pilih opsi “View Page Source” atau “Lihat Sumber Halaman” (tergantung bahasa pengaturan browser).
- Voila! Tab baru akan terbuka berisi kode-kode yang membentuk halaman website tersebut. Gampang bukan?
2. Melihat Source Code Website di Mozilla Firefox
Untuk pengguna Firefox, prosesnya hampir sama:
- Buka website yang Anda ingin telusuri.
- Klik kanan di area kosong halaman.
- Pilih “View Page Source” atau “Lihat Sumber Halaman“.
- Tab baru akan terbuka dengan source code website.
Firefox juga memiliki fitur “Inspector” jika Anda ingin analisis yang lebih mendalam.
3. Melihat Source Code Website di Microsoft Edge
Microsoft Edge juga memungkinkan kita melihat source code dengan langkah-langkah berikut:
- Buka halaman website yang diinginkan.
- Klik kanan dan pilih “View Source” atau “Lihat Sumber (Halaman)“.
- Hasilnya, Anda akan melihat source code di tab baru yang terbuka.
Prosesnya relatif sama dengan Chrome dan Firefox.
4. Melihat Source Code Website di Safari (Mac)
Untuk pengguna Mac yang menggunakan Safari, berikut caranya:
- Buka website yang ingin Anda lihat.
- Klik kanan dan pilih “Show Page Source” atau “Tampilkan Sumber Halaman”.
- Anda akan melihat source code halaman di tab baru.
*Pastikan fitur Developer Mode di Safari sudah diaktifkan terlebih dahulu. Kalau belum, Anda bisa mengaktifkannya di Preferences > Advanced > Show Develop menu in menu bar.
5. Melihat Source Code Website di Perangkat Mobile
Bagaimana jika Anda hanya punya ponsel dan ingin melihat source code? Jangan khawatir, Anda masih bisa melakukannya.
Melihat Source Code di Browser Mobile (Android)
Pada browser mobile seperti Chrome di Android, langkah-langkahnya sedikit berbeda:
- Buka browser dan akses website yang ingin Anda lihat.
- Ketik “view-source:” di depan URL halaman (misalnya: view-source:https://www.website.com).
- Tekan Enter, dan source code halaman tersebut akan muncul.
Cukup simpel, bukan?
Melihat Source Code di Safari Mobile (iOS)
Untuk pengguna iPhone atau iPad, melihat source code sedikit lebih rumit karena Safari mobile tidak mendukung fitur “view-source” secara langsung.
Namun, Anda bisa menggunakan aplikasi pihak ketiga atau bookmarklet khusus untuk melihat source code.
Baca Juga: Apa Bedanya HTTP dan HTTPS?
Tools untuk Melihat dan Menganalisis Source Code Website
Selain menggunakan cara-cara manual di atas, ada beberapa tools yang bisa memudahkan Anda dalam melihat dan menganalisis source code. Berikut adalah beberapa di antaranya:
- Developer Tools (DevTools): Semua browser modern memiliki Developer Tools yang bisa digunakan untuk memeriksa source code secara lebih detail. Tekan F12 di keyboard atau klik kanan dan pilih “Inspect” untuk membukanya.
- View Source Code Extensions: Ada berbagai ekstensi browser yang mempermudah akses ke source code, seperti “View Source” untuk Chrome dan Firefox.
- Online Tools: Situs seperti “view-source.com” memungkinkan Anda melihat source code hanya dengan memasukkan URL halaman yang diinginkan.
Baca Juga: Perbedaan Web Statis dan Dinamis
Kesalahan Umum dalam Melihat Source Code dan Cara Mengatasinya
Melihat source code sepertinya mudah, tapi ada beberapa hal yang bisa membingungkan.
Misalnya, Anda Tidak menemukan kode yang dicari. Mungkin Anda sedang melihat versi halaman yang sudah diproses oleh browser.
Gunakan Developer Tools untuk melihat versi asli atau tidak diproses.
Kemudian, pencari source code dapat mengalami kesulitan dengan JavaScript-heavy websites (Website yang sangat bergantung pada JavaScript) karena mungkin tidak menampilkan semua kode di halaman “View Source“.
Gunakan “Inspect Element” untuk analisis lebih mendalam.
Baca Juga: Cara Cek Kecepatan Website
Kesimpulan
Melihat source code website bukanlah hal yang hanya bisa dilakukan oleh programmer. Siapa saja yang penasaran atau ingin belajar lebih dalam tentang website bisa melakukannya.
Dengan langkah-langkah sederhana yang sudah dijelaskan di atas, Anda sekarang bisa melihat “jeroan” dari sebuah website dan mungkin menemukan sesuatu yang menarik di dalamnya.
Jadi, coba praktekkan dan lihat apa yang bisa dipelajari dari beragam source code dari website favorit Ada.
