Cara Melihat Kod HTML Dalam Chrome

Pautan Peranti

• Android
• iPhone
• Chromebook
• Mac
• Windows
• Peranti Tiada?

Adakah anda ingin tahu tentang apa yang membentuk halaman web? Ingin tahu cara menukar saiz atau warna fon di tapak web anda? Dengan melihat kod HTML halaman web, anda boleh melakukan semua perkara ini dan banyak lagi.

Dalam tutorial ini, kami akan menunjukkan kepada anda cara melihat kod HTML halaman web dalam Chrome.

Melihat Kod HTML dalam Chrome

Apabila menulis dalam HTML, kod sumber ialah siri tag dan atribut yang digunakan untuk menentukan struktur dan kandungan halaman web.

Kod sumber dibaca oleh pelayar web dan diterjemahkan ke dalam halaman web grafik yang anda lihat pada skrin. Selain mentakrifkan rupa dan rasa halaman web, kod sumber juga boleh digunakan untuk menambah interaktiviti, seperti tetingkap timbul, borang dan menu lungsur.

Walaupun rata-rata pengguna internet mungkin tidak perlu melihat kod sumber HTML halaman web, terdapat beberapa sebab sesetengah orang mungkin mahu berbuat demikian.

Bagi pembangun, melihat kod sumber boleh menjadi cara yang berguna untuk memahami cara halaman disusun dan menentukan elemen penggayaan dan skrip yang digunakan. Bagi pereka bentuk, adalah berfaedah untuk melihat cara pereka bentuk lain telah menggunakan HTML untuk mencipta reka letak yang berkesan.

Dalam sesetengah kes, pengguna juga mungkin ingin melihat kod sumber untuk menyelesaikan ralat atau mengetahui lebih lanjut tentang cara tapak web atau aplikasi web tertentu berfungsi. Walau apa pun sebabnya, melihat kod sumber HTML adalah proses yang agak mudah dalam Chrome.

Cara Melihat Kod HTML Halaman Web dalam Chrome pada PC Windows

Sistem pengendalian Windows ialah salah satu sistem Chrome yang paling serasi. Chrome dibina di atas projek Chromium sumber terbuka, yang mana Microsoft merupakan penyumbang utama. Keserasian ini meluas ke alam HTML, di mana pelayar popular membenarkan pengguna melihat kod HTML mana-mana tapak web.

Anda boleh melihat kod HTML dalam dua cara.

Menggunakan Sumber Halaman Lihat

Kaedah ini adalah mudah:

1. Buka Chrome dan navigasi ke halaman yang anda mahu melihat kod sumber HTML.
   
2. Klik kanan pada halaman dan pilih Lihat Sumber Halaman, atau tekan Ctrl + U pada papan kekunci anda untuk membuka kod sumber dalam tab baharu.
   

Kod sumber akan muncul dalam tab baharu dan anda boleh menatalnya untuk melihat penanda HTML untuk halaman tersebut.

Menggunakan Alat Pembangun

Untuk memeriksa kod sumber halaman web menggunakan Alat Pembangun dalam Google Chrome, ikut langkah di bawah.

1. Buka Google Chrome dan navigasi ke halaman web yang ingin anda periksa.
   
2. Tekan Ctrl + Shift + I pada papan kekunci anda. Anak tetingkap Alat Pembangun akan dibuka dalam dok bersama halaman web yang anda lihat.
   
3. Klik pada tab "Elemen" di bahagian atas anak tetingkap. Ini akan memaparkan kod sumber HTML untuk halaman web.
   
4. Anda kini boleh menyemak kod sumber untuk halaman tersebut. Untuk meruntuhkan elemen, klik pada segi tiga di sebelah nama tegnya. Untuk melihat maklumat lanjut tentang komponen, klik kanan padanya dan pilih "Periksa."
   

Perlu diingat bahawa kaedah ini adalah yang terbaik untuk halaman HTML; adalah mungkin untuk melihat kod sumber jenis halaman web lain, tetapi pemformatan mungkin lebih mencabar untuk dibaca.

Cara Melihat Kod HTML Halaman Web dalam Chrome pada Mac

Jika anda seorang pembangun web, adalah penting untuk dapat melihat kod HTML halaman web. Ini membolehkan anda melihat cara halaman distrukturkan dan menyelesaikan masalah yang mungkin timbul. Nasib baik, ia mudah dilakukan dalam Chrome pada Mac. Hanya ikuti langkah berikut:

1. Buka Chrome dan navigasi ke halaman web di mana anda ingin melihat kod HTML.
   
2. Klik kanan pada halaman dan pilih "Periksa."
   
3. Anak tetingkap baharu akan dibuka di bahagian bawah skrin yang memaparkan kod HTML.
   
4. Anda juga boleh mengklik pada elemen tertentu dalam kod HTML untuk melihat cara ia digayakan pada halaman. Sebagai contoh, anda boleh melihat gaya CSS yang digunakan pada elemen dengan memilihnya dan kemudian mengklik pada tab "Gaya" dalam anak tetingkap yang terbuka.
   
5. Untuk menutup anak tetingkap, klik pada "X" di penjuru kanan sebelah atas.
   

Sebagai alternatif, anda boleh menggunakan Alat Pembangun Chrome untuk melihat kod sumber.

1. Buka Google Chrome dan navigasi ke halaman web yang ingin anda periksa.
   
2. Klik ikon menu (tiga titik) di penjuru kanan sebelah atas penyemak imbas dan pilih Lagi Alat dan Alat Pembangun daripada menu lungsur.
   
3. Panel Alat Pembangun akan dibuka di bahagian bawah skrin. Pilih "Elemen" di bahagian atas anak tetingkap.
   
4. Anda kini akan melihat kod HTML untuk halaman semasa dipaparkan dalam panel Elemen. Anda boleh menggunakan pilihan yang berbeza dalam panel untuk memeriksa dan nyahpepijat kod seperti yang diperlukan.
   

Dengan hanya beberapa klik, anda boleh melihat kod HTML untuk mana-mana halaman web dalam Chrome pada Mac dengan mudah. Ini boleh membantu apabila anda cuba menyelesaikan masalah pembangunan web atau ingin melihat dengan lebih dekat cara tapak web tertentu dibina.

Cara Melihat Kod HTML Halaman Web dalam Chrome pada Apl iPhone

Jika anda menggunakan iPhone, anda boleh melihat kod HTML mana-mana halaman dalam Chrome dalam dua cara:

Mengubah URL

Anda boleh melihat kod HTML mana-mana halaman dengan mudah dengan membuat pelarasan kecil pada URL:

1. Buka Chrome dan navigasi ke halaman web yang kod HTMLnya ingin anda lihat.
   
2. Ketik sekali dalam bar alamat untuk memulakan mod edit.
   
3. Gerakkan kursor ke hadapan URL.
   
4. Taip "View-source" dan kemudian tekan butang "Go". Kod HTML untuk halaman web akan dipaparkan dalam Chrome.
   

Menggunakan Alat Pembangun

Alat Pembangun Chrome juga tersedia pada iOS, tetapi set langkah yang berbeza diperlukan untuk melancarkannya berbanding PC.

1. Ketik tiga titik di penjuru kanan sebelah atas skrin dan pilih "Tetapan."
2. Tatal ke bawah dan ketik "Lanjutan", kemudian dayakan togol di sebelah "Alat pembangun."
3. Ketik dan tahan kawasan kosong halaman, kemudian pilih "Periksa Elemen." Ini akan membuka panel sisi dengan kod HTML untuk halaman tersebut.

Cara Melihat Kod HTML Halaman Web dalam Chrome pada Apl Android

Apabila menggunakan apl Chrome pada telefon Android anda, anda mungkin mahu melihat kod HTML untuk halaman web. Ini boleh membantu jika anda cuba menyelesaikan masalah dengan halaman atau ingin melihat cara halaman itu distrukturkan. Untuk melihat kod HTML untuk halaman web dalam Chrome pada telefon Android anda, ikut langkah ini:

1. Buka Chrome pada Android anda.
   
2. Taipkan “view-source:” diikuti dengan URL halaman yang anda inginkan tempat anda ingin melihat kod sumber. Contohnya, jika anda ingin melihat kod sumber untuk www.google.com, anda akan menaip "view-source:www.google.com" ke dalam bar alamat Chrome.
   

Ini akan membuka kod HTML untuk halaman tersebut dalam antara muka Alat Pembangun terbina dalam Chrome. Dari sana, anda boleh melihat dan mengedit kod seperti yang dikehendaki. Perlu diingat bahawa kaedah ini hanya akan berfungsi jika tapak web yang anda cuba lihat membenarkan akses kepada kod sumbernya. Jika tidak, anda tidak akan dapat melihat apa-apa selain mesej ralat.

Cara Melihat Kod HTML Halaman Web dalam Chrome pada iPad

Chrome pada apl iPad memudahkan anda melihat kod HTML mana-mana halaman web. Hanya ikuti langkah berikut:

1. Buka Chrome dan taip "sumber paparan:" diikuti dengan URL halaman yang anda mahu lihat. Contohnya, jika anda ingin melihat kod sumber untuk www.alphr.com, anda perlu menaip “view-source:www.alphr.com” ke dalam bar alamat Chrome.
   
2. Tekan butang "Pergi".
   

Ini sepatutnya memuatkan kod sumber halaman dalam tab baharu dalam Chrome. Dari sana, anda boleh menyimpan atau berkongsi kod seperti yang diperlukan.

Kod Sumber ialah Gam yang Menyatukan Halaman

HTML adalah asas kepada mana-mana laman web. Ia menyediakan struktur dan kandungan yang dilihat pelawat apabila mereka memuatkan halaman dalam penyemak imbas mereka.

Walaupun penampilan akhir halaman mungkin ditentukan oleh CSS atau bahasa penggayaan lain, kod HTML menentukan struktur dan kandungan asas halaman. Beberapa perubahan berpotensi memecahkan halaman. Atas sebab ini, adalah penting untuk mempunyai pemahaman yang baik tentang HTML semasa melihat atau membuat perubahan pada kod sumber.

Selain itu, perlu diingat bahawa semasa melihat kod HTML boleh membantu dalam sesetengah kes, perubahan yang dibuat pada kod tidak akan ditunjukkan pada halaman web langsung. Hanya perubahan yang diterbitkan oleh pentadbir tapak akan kelihatan kepada pelawat.

Pernahkah anda cuba melihat kod HTML mana-mana halaman web menggunakan mana-mana kaedah yang dibincangkan dalam tutorial ini? Bagaimana keadaannya?

Beritahu kami di bahagian komen.