Halaman web yang anda baca terdiri daripada, antara lain, kod sumber. Itulah maklumat yang dimuat turun oleh penyemak imbas web anda dan diterjemahkan ke dalam apa yang anda baca sekarang.
Kebanyakan pelayar web memberikan keupayaan untuk melihat kod sumber halaman web tanpa perisian tambahan yang diperlukan, tidak kira apa jenis peranti yang anda gunakan.
Ada juga yang menawarkan fungsi dan struktur maju, menjadikannya lebih mudah untuk membaca HTML dan kod pengaturcaraan lain pada halaman.
Kenapa Anda Mahu Lihat Kod Sumber?
Terdapat beberapa sebab mengapa anda mungkin mahu melihat kod sumber halaman. Sekiranya anda seorang pemaju web, mungkin anda ingin mengambil penglihatan di bawah penutup pada gaya tertentu atau pelaksanaan tertentu. Mungkin anda berada dalam jaminan kualiti dan berusaha untuk memastikan mengapa sebahagian laman web tertentu membuat atau menjalankan cara seperti itu.
Anda juga boleh menjadi pemula yang cuba belajar bagaimana untuk kod halaman anda sendiri dan mencari contoh dunia sebenar. Sudah tentu, anda mungkin tidak termasuk dalam mana-mana kategori ini dan hanya ingin melihat sumber dari rasa ingin tahu yang semata-mata.
Disenaraikan di bawah adalah arahan mengenai cara untuk melihat kod sumber dalam pilihan penyemak imbas anda.
Google Chrome
Running on: Chrome OS, Linux, macOS, Windows
Versi desktop Chrome menawarkan tiga kaedah berbeza untuk melihat kod sumber halaman, yang pertama dan paling mudah dengan menggunakan pintasan papan kekunci berikut: CTRL + U ( COMMAND + OPTION + U pada macOS).
Apabila ditekan, jalan pintas ini membuka tab pelayar baru yang memaparkan HTML dan kod lain untuk halaman aktif. Sumber ini dikodekan warna dan tersusun dengan cara yang menjadikannya lebih mudah untuk mengabadikan dan mencari apa yang anda cari. Anda juga boleh pergi ke sana dengan memasukkan teks berikut dalam bar alamat Chrome, ditambahkan ke sebelah kiri URL laman web, dan memukul kekunci Enter : sumber pandangan: (iaitu, sumber pandangan: https: // www .).
Kaedah ketiga adalah melalui alat pembangun Chrome, yang membolehkan anda mengambil menyelam yang lebih dalam ke dalam kod halaman serta tweak ia di-terbang untuk tujuan pengujian dan pembangunan. Antara muka alat pemaju boleh dibuka dan ditutup dengan menggunakan pintasan papan kekunci ini: CTRL + SHIFT + I ( COMMAND + OPTION + I pada macOS). Anda juga boleh melancarkannya dengan mengambil laluan berikut.
- Klik pada butang menu utama Chrome, yang terletak di penjuru kanan sebelah atas dan diwakili oleh tiga titik sejajar vertikal.
- Apabila menu lungsur muncul, gerakkan kursor tetikus anda ke atas pilihan Lagi alat .
- Apabila sub-menu muncul, klik pada alat Pemaju .
Android
Melihat sumber laman web dalam Chrome untuk Android semudah menambahkan teks berikut ke bahagian depan alamatnya (atau URL) dan menyerahkannya: view-source:. Contohnya akan menjadi sumber pandangan: https: // www. . HTML dan kod lain dari halaman yang dipersoalkan akan dipaparkan dengan serta-merta dalam tetingkap aktif.
iOS
Walaupun tiada kaedah asli untuk melihat kod sumber menggunakan Chrome pada iPad, iPhone atau iPod touch anda, yang paling mudah dan paling berkesan ialah menggunakan penyelesaian pihak ketiga seperti aplikasi Lihat Sumber.
Tersedia untuk $ 0.99 di App Store, Lihat Sumber meminta anda memasukkan URL halaman (atau salin / tampalnya dari bar alamat Chrome, yang kadangkala jalan yang paling mudah diambil) dan itu sahaja. Selain memperlihatkan HTML dan kod sumber lain, aplikasinya juga mempunyai tab yang memaparkan aset halaman individu, Model Objek Dokumen (DOM), serta saiz halaman, kuki dan butiran lain yang menarik.
Microsoft Edge
Running on: Windows
Pelayar Edge membolehkan anda melihat, menganalisis dan bahkan memanipulasi kod sumber halaman semasa melalui antara muka Alat Pembangunnya . Untuk mengakses toolset berguna ini anda boleh menggunakan salah satu pintasan papan kekunci ini: F12 atau CTRL + U. Jika anda lebih suka tetikus, klik pada butang menu Edge (tiga titik yang terletak di sudut kanan atas) dan pilih pilihan Alat Pembangun F12 dari senarai.
Selepas alat dev dijalankan untuk kali pertama, Edge menambahkan dua pilihan tambahan ke menu konteks penyemak imbas (boleh diakses dengan mengklik kanan di mana-mana dalam halaman web): Periksa elemen dan Lihat sumber , yang terakhir yang membuka bahagian Debugger dev alat antara muka dihuni dengan kod sumber.
Mozilla Firefox
Running on: Linux, macOS, Windows
Untuk melihat kod sumber halaman dalam versi desktop Firefox, anda boleh menekan CTRL + U ( COMMAND + U pada macOS) pada papan kekunci anda, yang akan membuka tab baru yang mengandungi HTML dan kod lain untuk halaman web aktif.
Menaip teks berikut ke dalam bar alamat Firefox, terus ke sebelah kiri URL halaman, akan menyebabkan sumber yang sama muncul dalam tab semasa bukan: view-source: (ie, view-source: https: // www.) .
Cara lain untuk mengakses kod sumber halaman adalah melalui alat pemaju Firefox, diakses dengan mengambil langkah-langkah berikut.
- Klik pada butang menu utama, yang terletak di sudut kanan atas tetingkap pelayar anda dan diwakili oleh tiga garisan mendatar.
- Apabila menu pop timbul muncul, klik ikon Pembangun "kunci".
- Menu konteks Pemaju Web kini boleh dilihat. Pilih pilihan Sumber Halaman .
Firefox juga membolehkan anda melihat kod sumber untuk bahagian tertentu halaman, menjadikannya mudah untuk mengasingkan isu. Untuk berbuat demikian, terlebih dahulu menyerlahkan kawasan yang anda berminat dengan tetikus anda. Seterusnya, klik kanan dan pilih Lihat Sumber Pemilihan dari menu konteks penyemak imbas.
Android
Melihat kod sumber dalam versi Firefox Firefox dapat dicapai dengan mempersiapkan URL laman web dengan teks berikut: sumber pandang:. Sebagai contoh, untuk melihat sumber HTML untuk anda menyerahkan teks berikut dalam bar alamat penyemak imbas: sumber paparan: https: // www. .
iOS
Kaedah yang disyorkan untuk melihat kod sumber halaman web pada iPad, iPhone atau iPod touch anda adalah melalui aplikasi Lihat Sumber, tersedia di App Store untuk $ 0.99. Walaupun tidak disepadukan secara langsung dengan Firefox, anda boleh dengan mudah menyalin dan menampal URL dari pelayar ke dalam aplikasi untuk mengumumkan HTML dan kod lain yang berkaitan dengan halaman yang dipersoalkan.
Safari Apple
Menjalankan pada iOS dan macOS
iOS
Walaupun Safari untuk iOS tidak termasuk keupayaan untuk melihat sumber halaman secara lalai, penyemak imbas tidak mengintegrasikan dengan lancar dengan aplikasi Lihat Sumber - tersedia di App Store untuk $ 0.99.
Selepas memasang aplikasi pihak ketiga ini kembali ke penyemak imbas Safari dan ketik pada butang Kongsi, terletak di bahagian bawah skrin dan diwakili oleh kotak dan anak panah atas. Sheet Share iOS kini boleh dilihat, overlaying separuh bahagian bawah tetingkap Safari anda. Tatal ke kanan dan pilih butang Lihat Sumber .
Perwakilan tersusun dari kod sumber halaman aktif kini akan dipaparkan, bersama-sama dengan tab lain yang membolehkan anda melihat aset halaman, skrip dan banyak lagi.
macOS
Untuk melihat kod sumber halaman dalam versi desktop Safari, pertama anda perlu mendayakan menu Membangunnya . Langkah-langkah di bawah ini berjalan anda melalui mengaktifkan menu tersembunyi ini dan memaparkan sumber HTML halaman.
- Klik pada Safari dalam menu pelayar, yang terletak di bahagian atas skrin.
- Apabila menu lungsur muncul, pilih pilihan Pilihan.
- Keutamaan Safari kini boleh dilihat. Klik pada ikon Advanced , terletak di sebelah kanan sebelah kanan barisan atas.
- Menuju bahagian bawah bahagian Advanced adalah pilihan berlabel menu Show Develop dalam bar menu , disertai dengan kotak centang yang kosong. Klik pada kotak ini sekali untuk meletakkan tanda semak di dalamnya, dan tutup tetingkap Pilihan dengan mengklik pada 'x' merah yang terdapat di penjuru kiri sebelah atas.
- Klik pada menu Maju , yang terletak di bahagian atas skrin.
- Apabila menu lungsur muncul, pilih Paparkan Sumber Halaman . Anda juga boleh menggunakan pintasan papan kekunci berikut sebagai berikut: COMMAND + OPTION + U.
Opera
Running on: Linux, macOS, Windows
Untuk melihat kod sumber dari halaman web aktif dalam penyemak imbas Opera gunakan pintasan papan kekunci berikut: CTRL + U ( COMMAND + OPTION + U pada macOS). Sekiranya anda lebih suka memuatkan sumber dalam tab semasa, ketik teks berikut di sebelah kiri URL halaman dalam bar alamat dan tekan Enter : view-source: (ie, view-source: https: // www. ).
Versi desktop Opera juga membolehkan anda melihat sumber HTML, CSS dan elemen lain dengan menggunakan alat pemaju bersepadunya. Untuk melancarkan antara muka ini, yang secara lalai akan muncul di sebelah kanan tetingkap pelayar utama anda, tekan pintasan papan kekunci berikut: CTRL + SHIFT + I ( COMMAND + OPTION + I on macOS).
Toolset pemaju Opera juga boleh diakses dengan mengambil langkah-langkah berikut.
- Klik pada logo Opera, yang terletak di sudut kiri atas tetingkap pelayar anda.
- Apabila menu lungsur muncul, gerakkan kursor tetikus anda ke atas pilihan Lagi alat .
- Klik pada Show menu pemaju .
- Klik pada logo Opera sekali lagi.
- Apabila menu lungsur muncul, gerakkan kursor anda ke atas Pembangun .
- Apabila sub-menu muncul, klik pada Alat Pembangun .
Vivaldi
Terdapat banyak cara untuk melihat sumber halaman dalam pelayar Vivaldi. Yang paling mudah adalah melalui pintasan papan kekunci CTRL + U , yang membentangkan kod dari halaman aktif dalam tab baru.
Anda juga boleh menambah teks berikut ke bahagian depan URL halaman, yang memaparkan kod sumber dalam tab sekarang: sumber paparan:. Contohnya akan menjadi sumber pandangan: http: // www. .
Kaedah lain adalah melalui alat pemaju bersepadu pelayar, boleh diakses dengan menekan kombinasi CTRL + SHIFT + I atau melalui pilihan Alat Pembangun dalam menu Alat penyemak imbas - yang dijumpai dengan mengklik pada logo 'V' di sudut kiri atas. Menggunakan alat dev membolehkan analisis yang lebih mendalam tentang sumber halaman.