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 memilih Memasukkan kunci: Lihat sumber: (yaitu, lihat-sumber: https: //www.Go-Travels.com).
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.
-
Pilih 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 atas Alat lainnya pilihan.
-
Ketika sub-menu muncul, pilih Alat pengembang.
Android
Melihat sumber laman web di Chrome untuk Android semudah menambahkan teks berikut ke depan alamatnya (atau URL) dan mengirimkannya: Lihat sumber:. Contoh ini akan menjadi lihat-sumber: https: //www.Go-Travels.com . 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 perangkat 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 Alat Pengembang F12 opsi 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): Memeriksa elemen dan Lihat sumber, yang terakhir yang membuka Debugger bagian dari dev alat antarmuka 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) di 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, tepat di sebelah kiri URL halaman, akan menyebabkan sumber yang sama muncul di tab saat ini sebagai gantinya: Lihat sumber: ( yaitu, lihat-sumber: https: //www.dotdash.com ).
Cara lain untuk mengakses kode sumber halaman adalah melalui alat pengembang Firefox, dapat diakses dengan mengambil langkah-langkah berikut.
-
Pilih tombol menu utama, yang terletak di sudut kanan atas jendela browser Anda dan diwakili oleh tiga garis horizontal.
-
Ketika menu pop-out muncul, klik pada Pengembang ikon "kunci inggris".
-
Menu konteks Pengembang Web sekarang harus terlihat. Pilih Sumber Laman pilihan.
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 peramban.
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 Dotdash, Anda akan mengirimkan teks berikut di bilah alamat browser: lihat-sumber: https: //www.dotdash.com .
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 termasuk kemampuan untuk melihat sumber halaman secara default, browser tidak terintegrasi dengan mulus dengan aplikasi Lihat Sumber, 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 Lihat sumber tombol.
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 dalam Safari versi desktop, Anda harus terlebih dahulu mengaktifkannya Mengembangkan menu. Langkah-langkah di bawah ini memandu Anda untuk mengaktifkan menu tersembunyi ini dan menampilkan sumber HTML laman.
-
Memilih Safari di menu browser, yang terletak di bagian atas layar.
-
Ketika menu drop-down muncul, pilih Preferensi pilihan.
-
Preferensi Safari sekarang harus terlihat. Klik pada Maju ikon, terletak di sisi paling kanan dari baris atas.
-
Menuju bagian bawah bagian Advanced adalah opsi berlabel Tampilkan menu Kembangkan di bilah menu, disertai dengan kotak centang kosong. Pilih kotak ini sekali untuk memberi tanda centang di dalamnya, dan tutup jendela Preferensi dengan mengklik tanda 'x' merah yang ada di sudut kiri atas.
-
Pilih Mengembangkan menu, yang terletak di bagian atas layar.
-
Ketika menu drop-down muncul, pilih Tampilkan Sumber Laman. Anda juga dapat menggunakan pintasan keyboard berikut ini: 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 klik Enter: lihat-sumber: ( yaitu, lihat-sumber: https: //www.Go-Travels.com ).
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.
-
Pilih logo Opera, yang terletak di sudut kiri atas jendela browser Anda.
-
Ketika menu drop-down muncul, arahkan kursor mouse Anda ke atas Alat lainnya pilihan.
-
Klik Tampilkan menu pengembang.
-
Pilih logo Opera lagi.
-
Ketika menu drop-down muncul, arahkan kursor Anda ke atas Pengembang.
-
Ketika sub-menu muncul, pilih Alat pengembang.
Vivaldi
Ada beberapa cara untuk melihat sumber halaman dalam browser Vivaldi. Yang paling sederhana adalah melalui CTRL + U pintas keyboard, 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 lihat-sumber: http: //www.dotdash.com .
Metode lain adalah melalui alat pengembang terintegrasi browser, dapat diakses dengan menekan tombol CTRL + SHIFT + I kombinasi atau melalui Alat pengembang pilihan di browser Alat-alat menu - ditemukan dengan memilih V logo di sudut kiri atas. Menggunakan alat dev memungkinkan untuk analisis yang jauh lebih mendalam dari sumber halaman.
