Halaman web yang Anda baca terdiri dari, antara lain, kode sumber. Itulah informasi yang unduhan web browser Anda dan terjemahkan ke dalam apa yang sedang Anda baca saat ini.
Sebagian besar browser web menyediakan kemampuan untuk melihat kode sumber halaman web tanpa memerlukan perangkat lunak tambahan, apa pun jenis perangkat yang Anda gunakan.
Beberapa bahkan menawarkan fungsionalitas dan struktur canggih, membuatnya lebih mudah untuk membaca HTML dan kode pemrograman lainnya di halaman.
Mengapa Anda Ingin Melihat Kode Sumber?
Ada beberapa alasan mengapa Anda mungkin ingin melihat kode sumber halaman. Jika Anda seorang pengembang web, mungkin Anda ingin mengintip di bawah selimut di gaya atau implementasi khusus programmer lain. Mungkin Anda berada dalam jaminan kualitas dan mencoba untuk memastikan mengapa bagian tertentu dari halaman web adalah render atau berperilaku seperti itu.
Anda juga bisa menjadi pemula yang mencoba mempelajari cara membuat kode laman Anda sendiri dan mencari beberapa contoh dunia nyata. Tentu saja, mungkin Anda tidak masuk ke dalam salah satu kategori ini dan hanya ingin melihat sumber dari rasa ingin tahu.
Di bawah ini adalah petunjuk tentang cara melihat kode sumber di browser pilihan Anda.
Google Chrome
Berjalan di: Chrome OS, Linux, macOS, Windows
Versi desktop Chrome menawarkan tiga metode berbeda untuk melihat kode sumber laman, yang pertama dan paling sederhana dengan menggunakan pintasan keyboard berikut: CTRL + U ( COMMAND + OPTION + U di macOS).
Ketika ditekan, pintasan ini membuka tab browser baru yang menampilkan HTML dan kode lain untuk halaman yang aktif. Sumber ini diberi kode warna dan terstruktur dengan cara yang membuatnya lebih mudah untuk mengkotak-kotakkan dan menemukan apa yang Anda cari. Anda juga bisa sampai di sana dengan memasukkan teks berikut di bilah alamat Chrome, yang ditambahkan ke sisi kiri URL laman web, dan menekan tombol Enter : lihat-sumber: (mis., Lihat-sumber: https: // www .).
Metode ketiga adalah melalui alat pengembang Chrome, yang memungkinkan Anda untuk lebih menyelami kode laman serta men-tweak on-the-fly untuk tujuan pengujian dan pengembangan. Antarmuka alat pengembang dapat dibuka dan ditutup dengan menggunakan pintasan keyboard ini: CTRL + SHIFT + I ( COMMAND + OPTION + I di macOS). Anda juga dapat meluncurkannya dengan mengambil jalur berikut.
- Klik pada tombol menu utama Chrome, yang terletak di sudut kanan atas dan diwakili oleh tiga titik vertikal.
- Ketika menu drop-down muncul, arahkan kursor mouse Anda ke opsi More tools .
- Ketika sub-menu muncul, klik pada alat Pengembang .
Android
Melihat sumber laman web di Chrome untuk Android semudah menambahkan teks berikut ke depan alamatnya (atau URL) dan mengirimkannya: sumber tampilan:. Contoh ini akan menjadi sumber tampilan: https: // www. . HTML dan kode lain dari halaman yang dipermasalahkan akan langsung ditampilkan di jendela aktif.
iOS
Meskipun tidak ada metode asli untuk melihat kode sumber menggunakan Chrome di iPad, iPhone, atau iPod touch, cara paling sederhana dan paling efektif adalah menggunakan solusi pihak ketiga seperti aplikasi Sumber Tampilan.
Tersedia untuk $ 0,99 di App Store, Lihat Sumber meminta Anda untuk memasukkan URL halaman (atau salin / tempelkan dari bilah alamat Chrome, yang terkadang merupakan jalur paling sederhana untuk diambil) dan hanya itu. Selain menampilkan HTML dan kode sumber lainnya, aplikasi ini juga memiliki tab yang menampilkan aset laman individu, Model Objek Dokumen (DOM), serta ukuran halaman, cookie , dan detail menarik lainnya.
Microsoft Edge
Berjalan di: Windows
Browser Edge memungkinkan Anda melihat, menganalisis, dan bahkan memanipulasi kode sumber halaman saat ini melalui antarmuka Alat Pengembangnya . Untuk mengakses toolset yang berguna ini Anda dapat menggunakan salah satu pintasan keyboard ini: F12 atau CTRL + U. Jika Anda lebih suka mouse, klik tombol menu Edge (tiga titik yang terletak di sudut kanan atas) dan pilih opsi F12 Developer Tools dari daftar.
Setelah alat dev dijalankan untuk pertama kalinya, Edge menambahkan dua opsi tambahan ke menu konteks browser (dapat diakses dengan mengklik kanan di mana saja di dalam halaman web): Periksa elemen dan Lihat sumber , yang terakhir yang membuka bagian Debugger dari dev antarmuka alat diisi dengan kode sumber.
Mozilla Firefox
Berjalan di: Linux, macOS, Windows
Untuk melihat kode sumber halaman dalam versi desktop Firefox Anda dapat menekan CTRL + U ( COMMAND + U di macOS) pada keyboard Anda, yang akan membuka tab baru yang berisi HTML dan kode lain untuk halaman web yang aktif.
Mengetik teks berikut ke bilah alamat Firefox, langsung di sebelah kiri URL halaman, akan menyebabkan sumber yang sama muncul di tab saat ini sebagai gantinya: lihat-sumber: (mis., Lihat-sumber: https: // www.) .
Cara lain untuk mengakses kode sumber halaman adalah melalui alat pengembang Firefox, dapat diakses dengan mengambil langkah-langkah berikut.
- Klik pada tombol menu utama, yang terletak di sudut kanan atas jendela browser Anda dan diwakili oleh tiga garis horizontal.
- Ketika menu pop-out muncul, klik ikon Pengembang "kunci inggris".
- Menu konteks Pengembang Web sekarang harus terlihat. Pilih opsi Sumber Halaman .
Firefox juga memungkinkan Anda melihat kode sumber untuk bagian tertentu dari suatu halaman, sehingga mudah untuk mengisolasi masalah. Untuk melakukannya, pertama-tama sorot area yang Anda minati dengan mouse Anda. Selanjutnya, klik kanan dan pilih Lihat Sumber Pilihan dari menu konteks browser.
Android
Melihat kode sumber di Firefox versi Android dapat dicapai dengan menambahkan awalan URL laman web dengan teks berikut: lihat-sumber:. Misalnya, untuk melihat sumber HTML untuk Anda mengirimkan teks berikut di bilah alamat browser: lihat-sumber: https: // www. .
iOS
Metode yang kami sarankan untuk melihat kode sumber halaman web di iPad, iPhone, atau iPod touch Anda adalah melalui aplikasi Lihat Sumber, tersedia di App Store seharga $ 0,99. Meskipun tidak terintegrasi langsung dengan Firefox, Anda dapat dengan mudah menyalin dan menempelkan URL dari browser ke dalam aplikasi untuk mengungkap HTML dan kode lain yang terkait dengan halaman yang dimaksud.
Apple Safari
Berjalan di iOS dan macOS
iOS
Meskipun Safari untuk iOS tidak menyertakan kemampuan untuk melihat sumber halaman secara default, browser tidak terintegrasi dengan mulus dengan aplikasi Sumber Tampilan - tersedia di App Store seharga $ 0,99.
Setelah menginstal aplikasi pihak ketiga ini kembali ke browser Safari dan ketuk tombol Bagikan, yang terletak di bagian bawah layar dan diwakili oleh kotak dan panah atas. Lembar Share iOS sekarang harus terlihat, melapisi setengah bagian bawah jendela Safari Anda. Gulir ke kanan dan pilih tombol Lihat Sumber .
Sebuah kode warna, representasi terstruktur dari kode sumber halaman aktif sekarang harus ditampilkan, bersama dengan tab lain yang memungkinkan Anda untuk melihat aset halaman, skrip dan banyak lagi.
macOS
Untuk melihat kode sumber halaman di Safari versi desktop, Anda harus terlebih dahulu mengaktifkan menu Kembangkan . Langkah-langkah di bawah ini memandu Anda untuk mengaktifkan menu tersembunyi ini dan menampilkan sumber HTML laman.
- Klik pada Safari di menu browser, yang terletak di bagian atas layar.
- Ketika menu drop-down muncul, pilih opsi Preferensi .
- Preferensi Safari sekarang harus terlihat. Klik pada ikon Advanced , yang terletak di sisi paling kanan dari baris paling atas.
- Menuju bagian bawah bagian Tingkat Lanjut adalah opsi berlabel Tampilkan menu Kembangkan di bilah menu , disertai dengan kotak centang kosong. Klik pada kotak ini sekali untuk menempatkan tanda centang di dalamnya, dan tutup jendela Preferensi dengan mengklik tanda 'x' merah yang ditemukan di sudut kiri atas.
- Klik pada menu Develop , yang terletak di bagian atas layar.
- Ketika menu drop-down muncul, pilih Tampilkan Sumber Halaman . Anda juga dapat menggunakan pintasan keyboard sebagai berikut: COMMAND + OPTION + U.
Opera
Berjalan di: Linux, macOS, Windows
Untuk melihat kode sumber dari halaman web aktif di browser Opera gunakan pintasan keyboard berikut: CTRL + U ( COMMAND + OPTION + U di macOS). Jika Anda lebih suka memuat sumber di tab saat ini, ketik teks berikut di sebelah kiri URL laman di dalam bilah alamat dan tekan Enter : lihat-sumber: (mis., Lihat-sumber: https: // www. ).
Versi desktop Opera juga memungkinkan Anda untuk melihat sumber HTML, CSS, dan elemen lainnya dengan menggunakan alat pengembang terintegrasi. Untuk meluncurkan antarmuka ini, yang secara default akan muncul di sisi kanan jendela browser utama Anda, tekan pintasan keyboard berikut: CTRL + SHIFT + I ( COMMAND + OPTION + I di macOS).
Toolset pengembang Opera juga dapat diakses dengan mengambil langkah-langkah berikut.
- Klik pada logo Opera, yang terletak di sudut kiri atas jendela browser Anda.
- Ketika menu drop-down muncul, arahkan kursor mouse Anda ke opsi More tools .
- Klik pada Tampilkan menu pengembang .
- Klik logo Opera lagi.
- Ketika menu drop-down muncul, arahkan kursor Anda ke Developer .
- Ketika sub-menu muncul, klik pada Alat Pengembang .
Vivaldi
Ada beberapa cara untuk melihat sumber halaman dalam browser Vivaldi. Yang paling sederhana adalah melalui pintasan keyboard CTRL + U , yang menyajikan kode dari halaman aktif di tab baru.
Anda juga dapat menambahkan teks berikut ke depan halaman URL, yang menampilkan kode sumber di tab ini: lihat-sumber:. Contoh ini akan menjadi sumber tampilan: http: // www. .
Metode lain adalah melalui alat pengembang terintegrasi browser, dapat diakses dengan menekan kombinasi CTRL + SHIFT + I atau melalui opsi Developer Tools di menu Tools browser - ditemukan dengan mengklik pada logo 'V' di sudut kiri atas. Menggunakan alat dev memungkinkan untuk analisis yang jauh lebih mendalam dari sumber halaman.