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 sampai ke sana dengan memasukkan teks berikut dalam bar alamat Chrome, ditambahkan ke sebelah kiri laman web URL, dan memilih Masukkan kekunci: lihat sumber: (iaitu, sumber pandangan: https: //www.Go-Travels.com).
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.
-
Pilih butang menu utama Chrome, yang terletak di penjuru kanan sebelah atas dan diwakili oleh tiga titik berturut-turut.
-
Apabila menu lungsur muncul, gerakkan kursor tetikus anda ke atas Lebih banyak alat pilihan.
-
Apabila sub-menu muncul, pilih Alat pemaju.
Android
Melihat sumber laman web dalam Chrome untuk Android semudah menambahkan teks berikut di hadapan alamatnya (atau URL) dan menyerahkannya: lihat sumber:. Contohnya adalah pandangan sumber: https: //www.Go-Travels.com . 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 Alat Pemaju F12 pilihan 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 laman web): Periksa elemen dan Lihat sumber, yang terakhir yang membuka Debugger bahagian alat antara muka alat dev dilengkapi 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: lihat sumber: ( iaitu, sumber pandangan: https: //www.dotdash.com ).
Cara lain untuk mengakses kod sumber halaman adalah melalui alat pemaju Firefox, diakses dengan mengambil langkah-langkah berikut.
-
Pilih butang menu utama, yang terletak di sudut kanan atas tetingkap pelayar anda dan diwakili oleh tiga garisan mendatar.
-
Apabila menu pop timbul muncul, klik pada Pemaju ikon "kunci".
-
Menu konteks Pemaju Web kini boleh dilihat. Pilih Sumber Halaman pilihan.
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 Android Firefox dapat dicapai dengan mempersiapkan URL laman web dengan teks berikut: lihat sumber:. Sebagai contoh, untuk melihat sumber HTML untuk Dotdash, anda akan menghantar teks berikut dalam bar alamat penyemak imbas: pandangan sumber: https: //www.dotdash.com .
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, pelayar 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 Lihat sumber butang.
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, anda perlu mengaktifkannya terlebih dahulu Membangunkan menu. Langkah-langkah di bawah ini berjalan anda melalui mengaktifkan menu tersembunyi ini dan memaparkan sumber HTML halaman.
-
Pilih Safari dalam menu penyemak imbas, terletak di bahagian atas skrin.
-
Apabila menu lungsur muncul, pilih Keutamaan pilihan.
-
Keutamaan Safari kini boleh dilihat. Klik pada Advanced ikon, terletak di sebelah kanan sebelah kanan baris atas.
-
Ke bahagian bawah bahagian Advanced ialah pilihan yang dilabelkan Papar Kembangkan menu dalam bar menu, disertakan dengan kotak pilihan kosong. Pilih kotak ini sekali untuk meletakkan tanda semak di dalamnya, dan tutup tetingkap Pilihan dengan mengklik pada 'x' merah yang terdapat di sudut kiri atas.
-
Pilih Membangunkan menu, terletak di bahagian atas skrin.
-
Apabila menu lungsur muncul, pilih Tunjukkan 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 Masukkan: sumber paparan: ( iaitu, sumber pandangan: https: //www.Go-Travels.com ).
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 penyemak imbas utama anda, tekan pintasan papan kekunci berikut: CTRL + SHIFT + I (COMMAND + OPTION + I pada macOS).
Toolset pemaju Opera juga boleh diakses dengan mengambil langkah-langkah berikut.
-
Pilih logo Opera, yang terletak di sudut kiri atas tetingkap pelayar anda.
-
Apabila menu lungsur muncul, gerakkan kursor tetikus anda ke atas Lebih banyak alat pilihan.
-
Klik pada Tunjukkan menu pemaju.
-
Pilih logo Opera sekali lagi.
-
Apabila menu lungsur muncul, hover kursor anda ke atas Pemaju.
-
Apabila sub-menu muncul, pilih Alat Pembangun.
Vivaldi
Terdapat banyak cara untuk melihat sumber halaman dalam pelayar Vivaldi. Yang paling mudah ialah melalui CTRL + U jalan pintas papan kekunci, yang membentangkan kod dari halaman aktif dalam tab baru.
Anda juga boleh menambah teks berikut di hadapan URL halaman, yang memaparkan kod sumber dalam tab sekarang: lihat sumber:. Contohnya adalah pandangan sumber: http: //www.dotdash.com .
Kaedah lain adalah melalui alat pemaju bersepadu pelayar, boleh diakses dengan menekan butang CTRL + SHIFT + I gabungan atau melalui Alat Pembangun pilihan dalam pelayar Alat menu - didapati dengan memilih V logo di sudut kiri atas. Menggunakan alat dev membolehkan analisis yang lebih mendalam tentang sumber halaman.
