Cara Melihat Kode HTML di Chrome
Tautan Perangkat
Apakah Anda ingin tahu tentang apa yang membentuk 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 di 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.
Sementara rata-rata internet pengguna mungkin tidak perlu melihat kode sumber HTML laman web, ada beberapa alasan beberapa orang mungkin ingin melakukannya.
Bagi pengembang, melihat kode sumber dapat menjadi cara yang berguna untuk memahami struktur laman dan tentukan elemen gaya dan skrip mana yang digunakan. Bagi 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 atau mempelajari lebih lanjut tentang bagaimana suatu situs web atau aplikasi web berfungsi. Apa pun alasannya, melihat kode sumber HTML adalah 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 situs web mana pun.
Anda dapat melihat kode HTML dengan dua cara.
Menggunakan Halaman Tampilan Sumber
Metode ini sangat mudah:
Buka Chrome dan buka halaman tempat Anda ingin melihat kode sumber HTML.
Klik kanan pada halaman dan pilih Lihat Sumber Halaman, atau tekan Ctrl + U pada keyboard untuk membuka kode sumber di tab baru.
Kode sumber akan muncul di tab baru, dan Anda dapat menggulirnya untuk melihat markup HTML untuk laman tersebut.
Menggunakan Alat Pengembang
Untuk memeriksa kode sumber suatu halaman web menggunakan Alat Pengembang di Google Chrome, ikuti t dia melangkah ke bawah.
Buka Google Chrome dan buka halaman web yang ingin Anda periksa.Tekan Ctrl + Shift + I di keyboard Anda. Panel Alat Pengembang akan terbuka di dok di samping laman web yang sedang Anda lihat.
Klik tab”Elemen”di bagian atas panel. Ini akan menampilkan kode sumber HTML untuk halaman web. 
Sekarang Anda dapat meninjau kode sumber untuk laman tersebut. Untuk menciutkan elemen, klik segitiga di samping nama tagnya. Untuk melihat informasi selengkapnya tentang komponen , klik kanan padanya dan pilih “Periksa.”
Harap diingat bahwa metode ini paling baik untuk laman HTML; Anda dapat melihat kode sumber dari jenis halaman 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:
Buka Chrome dan buka halaman web tempat Anda ingin melihat kode HTML.
Klik kanan pada halaman dan pilih “Periksa.”
Panel baru akan terbuka di bagian bawah layar yang menampilkan kode HTML.
Anda juga dapat mengeklik elemen tertentu di kode HTML untuk melihat gayanya pada laman. Misalnya, Anda dapat melihat gaya CSS mana yang diterapkan ke suatu elemen dengan memilihnya, lalu mengeklik Hai n tab “Gaya”di panel yang terbuka.
Untuk menutup panel, klik “X”di pojok kanan atas.
Atau, Anda dapat menggunakan Alat Pengembang Chrome untuk melihat kode sumber.
Buka Google Chrome dan arahkan ke laman web yang ingin Anda periksa.
Klik ikon menu (tiga titik) di pojok kanan atas browser dan pilih Alat Lainnya dan Alat Pengembang dari menu tarik-turun.
Panel Alat Pengembang akan terbuka di bagian bawah layar. Pilih “Elemen”di bagian atas panel.
Sekarang Anda akan lihat kode HTML untuk halaman saat ini yang ditampilkan di panel Elemen. Anda dapat menggunakan berbagai opsi 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 pada Mac. Ini dapat membantu saat Anda sedang 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 halaman mana pun di Chro saya dengan dua cara:
Menyesuaikan URL
Anda dapat dengan mudah melihat kode HTML laman mana pun dengan melakukan sedikit penyesuaian pada URL:
Buka Chrome dan navigasikan ke halaman web yang kode HTML-nya ingin Anda lihat.
Ketuk sekali di bilah alamat untuk memulai mode edit.
Pindahkan kursor ke bagian depan URL.
Ketik “View-source”lalu tekan tombol”Mulai”. Kode HTML untuk laman web akan ditampilkan di Chrome.
Menggunakan Alat Pengembang
Alat Pengembang Chrome juga tersedia di iOS, tetapi serangkaian langkah yang berbeda diperlukan untuk meluncurkannya dibandingkan dengan PC.
Ketuk tiga titik di kanan atas sudut layar dan pilih”Pengaturan”. Gulir ke bawah dan ketuk”Lanjutan”, lalu aktifkan sakelar di samping”Alat pengembang”. Ketuk dan tahan area kosong halaman, lalu pilih”Periksa Elemen”. Ini akan membuka panel samping dengan kode HTML untuk halaman tersebut.
Cara Melihat Kode HTML Halaman Web di Chrome di Aplikasi Android
Saat menggunakan aplikasi Chrome di ponsel Android Anda, Anda mungkin ingin melihat kode HTML untuk halaman 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 berikut:
Buka Chrome di Android Anda.
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, ketikkan “view-source:www.google.com”di bilah alamat Chrome.
Ini akan membuka kode HTML untuk laman tersebut 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 halaman web mana pun. Cukup ikuti langkah berikut:
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”ke bilah alamat Chrome.
Tekan tombol “Go”.
Ini akan memuat halaman kode sumber di tab baru dalam Chrome. Dari sana, Anda dapat menyimpan atau membagikan kode sesuai kebutuhan.
Kode Sumber Adalah Perekat yang Menyatukan Halaman
HTML adalah fondasinya situs web apa pun. Ini memberikan struktur dan konten yang dilihat pengunjung saat mereka memuat laman di browser mereka.
Meskipun tampilan akhir laman dapat ditentukan oleh CSS atau bahasa penataan gaya lainnya, kode HTML menentukan pa struktur dasar dan konten ge. Beberapa perubahan berpotensi merusak halaman. Karena 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 dibuat untuk kode tidak akan tercermin pada halaman web langsung. Hanya perubahan yang diterbitkan oleh administrator situs yang akan terlihat oleh pengunjung.
Sudahkah Anda mencoba melihat kode HTML laman web apa pun menggunakan salah satu metode yang dibahas dalam tutorial ini? Bagaimana hasilnya?
Beri tahu kami di bagian komentar.
Penafian: Beberapa halaman di situs ini mungkin menyertakan tautan afiliasi. Ini tidak memengaruhi editorial kami dengan cara apa pun.
