Setiap pengguna Internet mempunyai tapak kegemarannya sendiri yang dibelanjakannya masa yang lama. Dan hanya orang malas yang tidak berfikir untuk melihat bagaimana ia dicipta dan apa yang terdiri daripadanya. Tidak mustahil untuk menjawab semua soalan ini, kerana terdapat banyak cara untuk membuat tapak web, tetapi untuk melihat arahan dan kod yang membentuknya adalah mungkin dan tersedia secara terbuka kepada semua orang.
Soalan lain ialah sama ada seseorang yang tidak terlibat dalam pengaturcaraan akan memahami mana-mana simbol yang membentuk kod tersebut. Tetapi daripada contoh yang akan diberikan di bawah, mana-mana pengguna Google Chrome akan dapat melihat elemen individu tapak.
Bagaimana untuk melihat kod sumber halaman html dalam pelayar Google
Supaya anda boleh melihat kod halaman dalam Chrome, anda perlu pergi ke tapak yang anda minati dan melakukan langkah berikut:
Kedua-dua item ini berbeza dalam fungsi dan maklumat untuk pengguna, pengaturcara atau penggodam. 
Apakah perbezaan antara kod halaman dan hanya arahan "Lihat Kod"?
Menganalisis setiap fungsi ini, anda boleh menulis artikel berasingan. Bagi pengaturcara, perbezaan ini adalah ketara dan mereka faham dalam kes mana perlu menggunakan "Lihat kod" dan dalam mana "Lihat kod halaman" dalam penyemak imbas Google Chrome.
Tetapi menjelaskan untuk pengguna biasa, fungsi ini boleh dibahagikan kepada tujuan berikut:
- "Lihat Kod Halaman" hanya perlu untuk melihat gabungan utama halaman. Pada asasnya, ini adalah struktur tapak (tanpa model tambahan sebagai Fail CSS dan tambahan lain yang kekal dalam folder pencipta tapak). Struktur ini tidak sesuai untuk dicipta halaman sendiri dengan "salin-tampal", tetapi ia akan membolehkan anda melihat apa sebenarnya yang dilakukan pengaturcara dan dalam urutan apa agar tapak dalam penyemak imbas Google Chrome mempunyai reka bentuk luaran sedemikian.
- "Lihat Kod" memaparkan struktur terperinci, menyerlahkan semua kawasan yang terjejas pada halaman. Jika anda menuding pada kod senarai tertentu, ia akan menyerlahkan elemen pada tapak tempat ia berada.
- Melihat kod halaman dibuka dalam penyemak imbas yang berasingan tanpa keupayaan untuk mengeditnya. Iaitu, ia hanya sesuai untuk menyalin dan membaca kod tapak. Tetapi ini adalah fungsi yang tidak kurang berguna.
- "Lihat kod" boleh ditukar dan anda boleh mengedit mana-mana elemen dengan cara yang sesuai untuk anda. Sudah tentu, semua perubahan ini akan "hidup" sehingga halaman dimuat semula, tetapi kadangkala ia menyeronokkan untuk melalui tetapan tersebut dan hanya memahami mengapa nilai ini atau itu diperlukan, dan apa yang akan berlaku jika anda mengubahnya. Anda tidak seharusnya menganggap bahawa dengan tindakan sedemikian anda akan membahayakan diri anda atau tapak - perubahan ini hanya menjejaskan kod Google Chrome anda dan tidak pergi ke dalam talian.
Kami sedang mempertimbangkan persoalan bagaimana untuk melihat kod elemen
Jika kita menjawab soalan sedemikian, maka satu-satunya pilihan yang mencadangkan dirinya adalah contoh. Kerana dalam satu artikel adalah sangat sukar untuk menjadi orang yang memahami topik ini (pembangun web), tetapi untuk menunjukkan dengan contoh supaya soalan diselesaikan adalah lebih mudah.
Fungsi kod elemen adalah sangat luas, jadi kami mengambil salah satu perkataan di tapak pelayar Google Chrome. Kami ingin mempertimbangkan apa kata kunci(dalam kod ia akan ditulis sebagai "kata kunci") telah digunakan untuk tapak kami. Untuk melakukan ini, kami melakukan algoritma berikut:
Cara lain untuk menggunakan ciri ini dalam penyemak imbas Google Chrome
Secara umum, terus menjawab soalan tentang cara melihat kod elemen dan mengapa ia diperlukan, anda harus menyenaraikan fungsinya. Iaitu, terima kasih kepada keupayaan untuk melihat kod elemen mana-mana tapak dalam penyemak imbas Google Chrome, kami boleh:
- Lihat struktur tapak bermula dari kepala ("pengepala tapak") dan berakhir dengan akhir (arahan akhir mana-mana program);
- Lihat semua fungsi tapak, iaitu: pautan ke tapak lain, modul tambahan dari tapak luaran dan kehadiran kaunter terbina dalam untuk mengumpul pelbagai maklumat;
- Ketahui sama ada menyalin dari laman web ini dilarang atau tidak;
- Kod tersebut akan merekodkan semua pautan ke halaman lain tapak, serta reka bentuk dan tindakan seterusnya selepas mengklik padanya.
Ini sama sekali bukan senarai terhingga. Tetapi harus diingat bahawa tanpa pengetahuan khusus anda boleh "membaca" kod itu halaman Google Chrome hampir mustahil dan data diperolehi kepada pengguna biasa praktikal tidak diperlukan.
Item "Lihat kod elemen" tidak berfungsi
Ia harus dikatakan dengan segera bahawa setiap tapak akan mempunyai akses terbuka kepada kod elemen. Iaitu, walaupun tapak yang paling popular dan mahal akan terbuka untuk melihat kod mereka. Oleh itu, jika item dalam penyemak imbas Google Chrome tidak aktif atau menghasilkan ralat, ia mempunyai sebab yang mungkin berikut:
- Profil pengguna rosak;
- Kehadiran perisian hasad pada komputer;
- Menyekat dengan sambungan tertentu untuk meningkatkan prestasi (malah ini boleh berlaku).
Membaiki profil pengguna yang rosak
Untuk mencipta profil baru, anda perlu mengalih keluar yang lama daripada komputer anda. Untuk melakukan ini kami melakukan perkara berikut:
- Tutup Google Chrome dan lancarkan terbina dalam pelayar Windows Penjelajah.
- Masuk bar alamat arahan berikut: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Apabila direktori dibuka, cari folder "Lalai" dan tambahkan "Sandaran" pada namanya supaya kelihatan seperti ini: "Lalai Sandaran".
- Kini, selepas memulakan semula penyemak imbas Chrome, profil baharu akan dibuat.
Kami mengalih keluar perisian hasad atau saki-bakinya
Jika profil baharu tidak memberi kami akses kepada kod elemen halaman dan kami masih melihat ralat, kami harus melakukan perkara berikut:
- Buka baris arahan rentetan Windows("Run") dan masukkan arahan "cmd" di sana.
- Masukkan arahan berikut ke dalam baris: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
- Selepas mengesahkan tindakan, masukkan ini: RD /S /Q “%WinDir%\System32\GroupPolicy”.
- Sekarang "gpupdate /force" (tanpa petikan).
Jika semuanya dilakukan dengan betul, maka selepas but semula komputer Google Chrome akan membuka kod elemen dan penyemak imbas akan berfungsi seperti biasa.
Anda perlu cepat melihat semua perubahan pada tapak itu sendiri, tanpa menjejaskan fail dan kod tapak yang disiarkan di Internet. Contohnya, berubah skema warna sebarang blok, gerakkan elemen tergelincir, dsb.
Untuk ini, ramai juruweb menggunakan tempatan Pelayan Denwer atau OpenServer, berjalan salinan penuh tapak pada komputer anda. Kaedah ini universal dan sesuai untuk profesional; ia boleh digunakan untuk menyemak kerja pelbagai skrip dan pemalam, bereksperimen dengan menukar reka bentuk dan mengedit semua fail tapak, dan selepas ujian, pindahkan perubahan yang sesuai terus ke tapak.
Bagi pengguna yang jauh dari seni juruweb, saya mengesyorkan menggunakan penyemak imbas untuk tujuan ini. Memandangkan saya menggunakan Chrome, saya akan memberikan arahan dengan tangkapan skrin untuk penyemak imbas khusus ini. Dengan analogi, anda boleh bekerja dengan Opera, Yandex.Browser, Mozilla Firefox dan pelayar lain; prinsip alat mereka adalah serupa.
Arahan 1: cara melihat keseluruhan kod HTML tapak dalam pelayar
Buka halaman web yang diperlukan untuk tapak anda. Klik kanan pada elemen yang diperlukan, menu lungsur turun konteks pelayar dengan arahan yang tersedia akan muncul:
Rajah 1. Lihat semua kod HTML halaman web dalam penyemak imbas Chrome
Penting: Perintah dalam menu lungsur mungkin berbeza, contohnya, untuk unsur aktif(pautan, gambar, video) dan tidak aktif (teks, latar belakang, div):
Rajah 2. Menu lungsur turun penyemak imbas Chrome
Jadi jika anda tidak menemui arahan yang anda perlukan, klik sahaja butang kanan tetikus di tempat lain atau gunakan kekunci pintas penyemak imbas.
Mari kita kembali ke Rajah 1, ia menunjukkan perintah yang diperlukan untuk melihat semua kod HTML halaman web asal, ia dipanggil " Lihat kod halaman". Klik pada arahan dan ia akan dibuka sisipan baru Dengan kod penuh laman web sumber, satu kelebihan besar kepada segala-galanya ialah tontonan tersedia dengan penyerlahan sintaks:
Rajah 3. Serpihan kod laman web ini
Alat ini sangat berguna untuk mencari dan mengedit elemen yang anda cari.
Cara alternatif untuk melihat semua kod HTML halaman web
Untuk lebih akses cepat, anda boleh menggunakan cara lain untuk memanggil alat ini
- Dalam Rajah 1 kita juga melihat bahawa perintah ini tersedia melalui pintasan papan kekunci
+ ; - Tampal view-source:site ke dalam bar alamat penyemak imbas dan bukannya domain saya, masukkan alamat anda;
Kedua-dua kaedah adalah universal dan harus berfungsi dalam semua penyemak imbas.
Pada mulanya, sesetengah orang akan nampak bahawa ini tidak sama sekali alat yang betul, tetapi melihat keseluruhan kod HTML tapak adalah bagus untuk mencari dalam kod elemen yang diperlukan, ini boleh menjadi pautan, tag, tag meta, atribut dan elemen lain.
Gabungan hotkey
Rajah 3. Cari mengikut kod tapak
Selepas anda memasukkan permintaan ke dalam borang carian, skrin akan beralih ke elemen pertama yang ditemui, menggunakan anak panah anda boleh bergerak di antara mereka dan pilih yang anda perlukan:
Rajah 4. Cari mengikut kod tapak HTML
Arahan 2: cara melihat dan mengedit kod HTML dan CSS tapak dalam penyemak imbas Google Chrome
Sekarang bahagian yang paling penting, di mana saya akan menunjukkan bagaimana anda boleh mengedit kod HTML dan CSS tapak web dalam pelayar. kemudian pindahkan perubahan ke penyemak imbas.
Macam ni alat yang berguna sentiasa tersedia dalam penyemak imbas anda, percubaan dengan arahan lain yang akan memudahkan pengeditan tapak anda.
Kemahiran ubah sumber muka surat – kemahiran yang berguna untuk pengguna Internet maju. Dengan menggantikan kod HTML, anda boleh menukar buka laman web sesuka hati. Dalam artikel ini kami akan memberitahu anda cara menukar kod halaman dalam Google Chrome. Walau bagaimanapun, dalam pelayar lain semuanya dilakukan dengan cara yang sama, jadi tidak sepatutnya ada sebarang kesulitan.
Apakah kod HTML halaman tersebut?
Setiap halaman yang anda buka dalam penyemak imbas anda mempunyai kod bahasanya sendiri Penanda HTML. Kod ini mewakili tag dan teks. Teg ialah label unik yang memberitahu penyemak imbas cara memaparkan bahagian ini atau bahagian tapak tersebut. Teks ialah kandungan halaman, apa yang pengguna lihat. Juga, gaya CSS boleh disambungkan ke halaman, yang ditetapkan penampilan elemen halaman. Kepada tukar kod sumber tapak anda tidak perlu mengetahui HTML dan CSS dengan teliti, dan anda akan melihat sendiri tidak lama lagi.
Mengapa menukar halaman web?
Anda boleh menukar data di tapak, menukar teks mesej atau mengambil tangkapan skrin palsu. Sila ambil perhatian bahawa semua perubahan hanya kelihatan kepada anda dan akan hilang apabila anda memuat semula halaman. Juga data yang diubah tidak akan menjadi nyata. Sebagai contoh, jika saya tidak mempunyai 10 dolar, dan saya menukarnya kepada 100, maka saya tidak akan mempunyai wang lagi. Ini hanyalah paparan halaman oleh penyemak imbas. Contoh:
Selepas:
Sebagai contoh, saya akan mengambil tapak yang sama dan menukar pengumuman sebelumnya tentang "" Pembukaan halaman rumah dalam Google Chrome. Saya klik kanan pada elemen yang ingin saya ubah, sebagai contoh, tajuk pengumuman dan pilih "Lihat kod".
Dalam tetingkap yang terbuka, pergi ke tab Elemen dan lihat kod HTML halaman. Di dalamnya kita perlu mencari teks yang kita minati. (digariskan dengan warna merah)
Sekarang saya akan memadamkan teks lama dan menulis dengan yang baharu.
Itu sahaja, tajuk pengumuman telah ditukar. Sekarang saya akan menukar pengumuman itu sendiri, tag dan kategori.
Anda boleh memasukkan imej lain dengan menukar atribut src dalam teg img.
" Item yang sama juga terdapat dalam menu konteks, yang, jika anda klik kanan teks muka surat. Anda juga boleh menggunakan pintasan papan kekunci CTRL + U. Mozilla Firefox tidak menggunakan program luaran - asal kod muka surat dengan penonjolan sintaks akan dibuka dalam tetingkap penyemak imbas yang berasingan.
DALAM pelayar internet Explorer, klik bahagian "Fail" dalam menu dan pilih "Edit dalam Notepad." Daripada nama Notepad, nama lain mungkin ditulis, anda telah menetapkannya dalam tetapan penyemak imbas untuk melihat yang asal kod A. Pada klik muka surat dengan butang tetikus kanan, menu konteks muncul, yang juga mempunyai item yang membolehkan anda membuka sumber kod muka surat dalam program luar- "Lihat HTML- kod A".
DALAM penyemak imbas Opera buka menu, pergi ke bahagian "Halaman" dan anda akan berpeluang memilih item "Sumber" dalam subseksyen "Alat Pembangunan" kod"atau item "Asal kod bingkai." Pilihan ini ditetapkan panas Kekunci CTRL+ U dan CTRL + SHIFT + U masing-masing. Dalam menu konteks terikat pada satu klik muka surat klik kanan, terdapat juga item “Initial kod" Sumber opera muka surat dalam program luaran yang ditetapkan dalam OS atau dalam tetapan penyemak imbas untuk mengedit fail HTML.
Penyemak imbas Google Chrome sudah pasti mempunyai organisasi terbaik melihat yang asal kod A. Dengan mengklik kanan tetikus anda, anda boleh memilih Lihat kod A muka surat"dan kemudian kod sumber dengan penonjolan sintaks akan dibuka dalam tab berasingan. Atau anda boleh memilih baris "Lihat" dalam menu yang sama kod elemen" dan dalam tab yang sama akan membuka dua bingkai tambahan di mana anda boleh memeriksa HTML dan CSS kod unsur muka surat. Penyemak imbas akan bertindak balas kepada kursor yang bergerak merentasi baris kod dan, menyerlahkan elemen pada halaman yang sepadan dengan bahagian HTML ini kod A.
Kami melepaskan buku baru"Pemasaran kandungan dalam dalam rangkaian sosial: Bagaimana untuk masuk ke dalam kepala pelanggan anda dan membuat mereka jatuh cinta dengan jenama anda."
Kod sumber tapak adalah satu set penanda HTML, gaya CSS Dan Skrip JavaScript, yang diterima oleh penyemak imbas daripada pelayan web.
Lebih banyak video di saluran kami - pelajari pemasaran internet dengan SEMANTICA
Ia boleh dibandingkan dengan satu set arahan yang diberikan kepada askar oleh seorang komander. Bayangkan bahawa penonton tidak melihat atau mendengar bos. Dari sudut pandangan mereka, tentera menjalankan tindakan secara bebas. Dalam kes kami, komander adalah penyemak imbas, arahan adalah kod sumber, dan tentera yang berbaris adalah hasil akhir.
Tapak ini disimpan pada pelayan web, yang menghantar halaman atas permintaan pengguna. Permintaan ialah menaip URL dalam bar alamat, mengklik pautan atau mengklik butang hantar pada borang. Tidak kira bahasa apa halaman web ditulis, sama ada ia disertakan bahagian perisian. Hasil akhir mana-mana algoritma bahagian pelayan ialah set tag html dan teks.
Kod sumber halaman ialah satu set data yang merangkumi:
- penanda html;
- helaian gaya atau pautan fail;
- atur cara yang ditulis dalam JavaScript atau pautan ke fail dengan kod.
Tiga bahagian ini diproses oleh penyemak imbas. Untuk pelayan, ini hanyalah teks yang perlu dihantar sebagai tindak balas kepada permintaan.
Mengapa kita mungkin perlu mengkaji kod sumber
Semua yang kami lihat, kami boleh menganalisis dan memohon untuk menyelesaikan masalah tertentu yang timbul semasa bekerja dengan tapak, terutamanya apabila mengoptimumkannya. Dengan melihat kod sumber, kita boleh:
- Lihat teg meta tapak anda atau orang lain untuk menganalisisnya.
- Lihat kehadiran atau ketiadaan elemen tertentu di tapak: kaunter, kod pengenalan masuk pelbagai sistem, skrip tertentu dan perkara lain.
- Ketahui parameter elemen: saiz, warna, fon.
- Cari laluan ke foto dan elemen lain yang terdapat pada halaman.
- Teroka pautan daripada halaman.
- Cari masalah dengan kod yang mengganggu proses pengoptimuman tapak web: yang tidak ditangani fail berasingan gaya, skrip, kod tidak sah.
Ini adalah ciri asas, tetapi sebenarnya, dengan dapat membaca kod, anda boleh mengetahui lebih banyak tentang halaman tersebut.
Cara melihat kod sumber tapak
Ia tidak mungkin untuk melakukan ini sepenuhnya dalam bentuk di mana ia disiarkan pada pelayan dari penyemak imbas. Tetapi anda boleh melihat semua penanda dengan mengklik kanan pada halaman. Di sini dan seterusnya Contoh Google Chrome.
Pilih pilihan "Lihat kod halaman" dan dapatkan penyenaraian penuh dalam tab berasingan.
Ia hanya teks yang anda perlu analisis untuk memahami. Tetapi anda boleh mendapatkan kod interaktif menggunakan alat pembangun.
Bagaimana untuk mencari kod sumber halaman laman web
Klik pada ikon menu dalam penyemak imbas. Selalunya ia berada di sebelah kanan dan kelihatan seperti tiga titik atau jalur.
Dalam bab alat tambahan pilih "Alat Pembangun".
Tetingkap akan terbuka menunjukkan keadaan aktif kod. Ini bermakna apabila anda mengklik pada penanda, gaya elemen akan muncul di sebelahnya, dan blok yang dipilih akan diserlahkan pada halaman.
Dalam tab "Sumber" anda boleh melihat kandungan beberapa fail: skrip, fon, imej.
Dalam tab "Keselamatan", anda boleh menyemak sijil tapak.
Tab "Audit" akan membantu anda menyemak sumber yang disiarkan pada pengehosan.
Jika lokasi panel di sebelah kanan menyusahkan, anda boleh mengklik tiga titik dan menukarnya dengan memilih item yang dikehendaki.
Bagaimana untuk melihat tag meta
Setiap dokumen HTML termasuk tag struktur. Berikut adalah sebahagian daripada mereka:
- Html – keseluruhan dokumen.
- Ketua – bahagian pengepala perkhidmatan.
- Tajuk – tajuk halaman (dipaparkan pada tab).
- Badan – badan dokumen.
- H1-H6 – tajuk teks halaman.
- Artikel – artikel.
- Bahagian - bahagian.
- Menu – menu.
- Div – blok.
- Span – rentetan.
- P – perenggan.
- Meja – meja.
Elemen direka bentuk untuk mengehadkan bahagian secara logik pada halaman; jika perlu, ia direka bentuk menggunakan gaya. Ia mengandungi teks yang entah bagaimana boleh dilihat pada halaman. Tetapi dalam tag Ketua terdapat maklumat perkhidmatan. Tag meta digunakan untuk menunjukkannya. Segala-galanya yang tertulis di dalamnya bertujuan untuk pelayan dan enjin carian.
Kandungan mereka tidak dapat diketahui dengan cara lain.
Mari kita perhatikan teg Pautan. Dengan bantuannya, pautan ke fail yang disertakan luaran ditentukan. Jika mahu, anda boleh melihat kandungan dan menyimpan ke cakera. Untuk melakukan ini, alihkan penuding ke alamat dan tekan RMB. Pilih "Buka dalam Tab baharu".
Akan dibuka dalam tab baharu fail yang ditentukan, yang boleh anda lihat atau simpan.
Cara melihat kod sumber halaman untuk nyahpepijat skrip
Dalam kes ini, adalah paling mudah untuk membuka halaman mesin tempatan. Jika anda hanya perlu membetulkan penanda, gaya dan skrip, maka ini boleh dilakukan terus dari folder. Kod HTML dilihat dengan cara yang sama. Berikut adalah kesilapan kod JavaScript boleh dilihat dalam tab "Konsol". Ini menunjukkan perihalan ralat dan nombor baris tempat ia berlaku.
Sintaks boleh dilihat secara langsung dalam kod. Inilah kegunaan tab "Sumber".
Cara melihat kod elemen tertentu
Untuk halaman besar Dengan jumlah yang besar unsur sukar dicari kod yang diperlukan sepanjang markup. Dalam kes ini, anda harus menggunakan pasukan khas menu konteks. Gerakkan tetikus ke atas serpihan dan tekan RMB. Pilih arahan "Lihat Kod".
Tetingkap yang sama akan dibuka, tetapi dengan fokus pada objek yang dipilih.
Ringkasan
Kami memberitahu anda apa itu kod sumber halaman. Ia cukup untuk menguasai pengetahuan asas HTML dan CSS, dan menggunakan alat yang selesa pembangun, anda boleh nyahpepijat dokumen HTML anda sendiri.
Melihat kod sumber di Internet akan membolehkan anda belajar bukan sahaja daripada pengalaman sendiri, tetapi juga menggunakan contoh kerja sebenar. Dan untuk pakar SEO, tag meta akan berguna, maklumat yang boleh memberitahu banyak tentang tapak.
