Cara Melihat Kode HTML Di Chrome

Tautan Perangkat

• Android
• iPhone
• Chromebook
• Mac
• Windows
• Perangkat Hilang?

Apakah Anda ingin tahu tentang apa yang membuat halaman web? Ingin tahu cara mengubah ukuran atau warna font di situs web Anda? Dengan melihat kode HTML laman web, Anda dapat melakukan semua hal ini dan banyak lagi.

Dalam tutorial ini, kami akan menunjukkan cara melihat kode HTML laman web di Chrome.

Melihat Kode HTML di Chrome

Saat menulis dalam HTML, kode sumber adalah serangkaian tag dan atribut yang digunakan untuk menentukan struktur dan konten halaman web.

Kode sumber dibaca oleh browser web dan diterjemahkan ke dalam halaman web grafis yang Anda lihat di layar. Selain menentukan tampilan dan nuansa halaman web, kode sumber juga dapat digunakan untuk menambahkan interaktivitas, seperti jendela pop-up, formulir, dan menu drop-down.

Meskipun rata-rata pengguna internet mungkin tidak perlu melihat kode sumber HTML halaman web, ada beberapa alasan beberapa orang ingin melakukannya.

Untuk developer, melihat kode sumber dapat menjadi cara yang berguna untuk memahami struktur halaman dan menentukan elemen gaya dan skrip mana yang digunakan. Untuk desainer, akan bermanfaat untuk melihat bagaimana desainer lain menggunakan HTML untuk membuat tata letak yang efektif.

Dalam beberapa kasus, pengguna mungkin juga ingin melihat kode sumber untuk memecahkan masalah kesalahan atau mempelajari lebih lanjut tentang cara kerja situs web atau aplikasi web tertentu. Apa pun alasannya, melihat kode sumber HTML merupakan proses yang relatif sederhana di Chrome.

Cara Melihat Kode HTML Halaman Web di Chrome di PC Windows

Sistem operasi Windows adalah salah satu sistem Chrome yang paling kompatibel. Chrome dibangun di atas proyek Chromium sumber terbuka, di mana Microsoft merupakan kontributor utamanya. Kompatibilitas ini meluas ke ranah HTML, di mana browser populer memungkinkan pengguna untuk melihat kode HTML dari situs web mana pun.

Anda dapat melihat kode HTML dengan dua cara.

Menggunakan Lihat Sumber Halaman

Metode ini mudah:

1. Buka Chrome dan arahkan ke halaman tempat Anda ingin melihat kode sumber HTML.
   
2. Klik kanan pada halaman dan pilih View Page Source, atau tekan Ctrl + U pada keyboard Anda untuk membuka kode sumber di tab baru.
   

Kode sumber akan muncul di tab baru, dan Anda dapat menggulirnya untuk melihat markup HTML untuk halaman tersebut.

Menggunakan Alat Pengembang

Untuk memeriksa kode sumber laman web menggunakan Alat Pengembang di Google Chrome, ikuti langkah-langkah berikut.

1. Buka Google Chrome dan arahkan ke halaman web yang ingin Anda periksa.
   
2. Tekan Ctrl + Shift + I pada keyboard Anda. Panel Alat Pengembang akan terbuka di dok di samping halaman web yang sedang Anda lihat.
   
3. Klik pada tab "Elemen" di bagian atas panel. Ini akan menampilkan kode sumber HTML untuk halaman web.
   
4. Anda sekarang dapat meninjau kode sumber untuk halaman tersebut. Untuk menciutkan elemen, klik segitiga di samping nama tagnya. Untuk melihat informasi lebih lanjut tentang suatu komponen, klik kanan padanya dan pilih "Periksa."
   

Perlu diingat bahwa metode ini paling baik untuk halaman HTML; Anda dapat melihat kode sumber dari jenis laman web lain, tetapi pemformatannya mungkin lebih sulit untuk dibaca.

Cara Melihat Kode HTML Halaman Web di Chrome di Mac

Jika Anda seorang pengembang web, penting untuk dapat melihat kode HTML laman web. Ini memungkinkan Anda melihat struktur halaman dan memecahkan masalah apa pun yang mungkin muncul. Untungnya, ini mudah dilakukan di Chrome di Mac. Cukup ikuti langkah-langkah ini:

1. Buka Chrome dan arahkan ke halaman web tempat Anda ingin melihat kode HTML.
   
2. Klik kanan pada halaman dan pilih "Periksa."
   
3. Panel baru akan terbuka di bagian bawah layar yang menampilkan kode HTML.
   
4. Anda juga dapat mengeklik elemen tertentu dalam kode HTML untuk melihat gayanya pada halaman. Misalnya, Anda dapat melihat gaya CSS mana yang diterapkan ke suatu elemen dengan memilihnya, lalu mengeklik tab "Gaya" di panel yang terbuka.
   
5. Untuk menutup panel, klik "X" di pojok kanan atas.
   

Atau, Anda dapat menggunakan Alat Pengembang Chrome untuk melihat kode sumber.

1. Buka Google Chrome dan arahkan ke halaman web yang ingin Anda periksa.
   
2. Klik ikon menu (tiga titik) di pojok kanan atas browser dan pilih Alat Lainnya dan Alat Pengembang dari menu tarik-turun.
   
3. Panel Alat Pengembang akan terbuka di bagian bawah layar. Pilih "Elemen" di bagian atas panel.
   
4. Anda sekarang akan melihat kode HTML untuk halaman saat ini yang ditampilkan di panel Elemen. Anda dapat menggunakan opsi berbeda di panel untuk memeriksa dan men-debug kode sesuai kebutuhan.
   

Hanya dengan beberapa klik, Anda dapat dengan mudah melihat kode HTML untuk laman web apa pun di Chrome di Mac. Ini dapat membantu saat Anda mencoba memecahkan masalah pengembangan web atau ingin melihat lebih dekat bagaimana situs web tertentu dibuat.

Cara Melihat Kode HTML Halaman Web di Chrome di Aplikasi iPhone

Jika Anda menggunakan iPhone, Anda dapat melihat kode HTML laman mana pun di Chrome dengan dua cara:

Mengutak-atik URL

Anda dapat dengan mudah melihat kode HTML halaman mana pun dengan melakukan sedikit penyesuaian pada URL:

1. Buka Chrome dan navigasikan ke halaman web yang kode HTML-nya ingin Anda lihat.
   
2. Ketuk sekali di bilah alamat untuk memulai mode edit.
   
3. Pindahkan kursor ke bagian depan URL.
   
4. Ketik "View-source" lalu tekan tombol "Go". Kode HTML untuk halaman web akan ditampilkan di Chrome.
   

Menggunakan Alat Pengembang

Alat Pengembang Chrome juga tersedia di iOS, tetapi serangkaian langkah berbeda diperlukan untuk meluncurkannya dibandingkan dengan PC.

1. Ketuk tiga titik di sudut kanan atas layar dan pilih "Pengaturan."
2. Gulir ke bawah dan ketuk "Lanjutan", lalu aktifkan sakelar di samping "Alat pengembang".
3. Ketuk dan tahan area kosong halaman, lalu pilih "Periksa Elemen". Ini akan membuka panel samping dengan kode HTML untuk halaman itu.

Cara Melihat Kode HTML Halaman Web di Chrome di Aplikasi Android

Saat menggunakan aplikasi Chrome di ponsel Android, Anda mungkin ingin melihat kode HTML untuk laman web. Ini dapat membantu jika Anda mencoba memecahkan masalah dengan halaman atau ingin melihat bagaimana struktur halaman. Untuk melihat kode HTML laman web di Chrome pada ponsel Android Anda, ikuti langkah-langkah berikut:

1. Buka Chrome di Android Anda.
   
2. Ketik "view-source:" diikuti dengan URL halaman yang Anda inginkan di mana Anda ingin melihat kode sumbernya. Misalnya, jika Anda ingin melihat kode sumber untuk www.google.com, Anda harus mengetikkan “view-source:www.google.com” di bilah alamat Chrome.
   

Ini akan membuka kode HTML untuk halaman itu di antarmuka Alat Pengembang bawaan Chrome. Dari sana, Anda dapat melihat dan mengedit kode sesuai keinginan. Ingatlah bahwa metode ini hanya akan berfungsi jika situs web yang ingin Anda lihat mengizinkan akses ke kode sumbernya. Jika tidak, Anda tidak akan dapat melihat apa pun selain pesan kesalahan.

Cara Melihat Kode HTML Halaman Web di Chrome di iPad

Chrome di aplikasi iPad memudahkan untuk melihat kode HTML laman web mana pun. Cukup ikuti langkah-langkah ini:

1. Buka Chrome dan ketik “view-source:” diikuti dengan URL halaman yang ingin Anda lihat. Misalnya, jika Anda ingin melihat kode sumber untuk www.alphr.com, Anda perlu mengetikkan “view-source:www.alphr.com” di bilah alamat Chrome.
   
2. Tekan tombol "Pergi".
   

Ini harus memuat kode sumber halaman di tab baru di dalam Chrome. Dari sana, Anda dapat menyimpan atau membagikan kode sesuai kebutuhan.

Kode Sumber Adalah Lem Yang Menyatukan Halaman

HTML adalah dasar dari situs web apa pun. Ini memberikan struktur dan konten yang dilihat pengunjung saat mereka memuat halaman di browser mereka.

Meskipun tampilan akhir halaman dapat ditentukan oleh CSS atau bahasa gaya lainnya, kode HTML menentukan struktur dasar dan konten halaman. Beberapa perubahan berpotensi merusak halaman. Untuk alasan ini, penting untuk memiliki pemahaman yang baik tentang HTML saat melihat atau membuat perubahan pada kode sumber.

Selain itu, perlu diingat bahwa saat melihat kode HTML dapat membantu dalam beberapa kasus, perubahan yang dilakukan pada kode tidak akan terlihat di laman web langsung. Hanya perubahan yang dipublikasikan oleh administrator situs yang akan terlihat oleh pengunjung.

Sudahkah Anda mencoba melihat kode HTML halaman web mana pun menggunakan salah satu metode yang dibahas dalam tutorial ini? Bagaimana hasilnya?

Beri tahu kami di bagian komentar.