Cara Melihat Kode HTML Di Chrome

Sign up and earn $1000 a day ⋙

Tautan Perangkat

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.

Cara Melihat Kode HTML Di Chrome

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.
    Cara Melihat Kode HTML Di Chrome
  2. Klik kanan pada halaman dan pilih View Page Source, atau tekan Ctrl + U pada keyboard Anda untuk membuka kode sumber di tab baru.
    Cara Melihat Kode HTML Di Chrome

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.
    Cara Melihat Kode HTML Di Chrome
  2. Tekan Ctrl + Shift + I pada keyboard Anda. Panel Alat Pengembang akan terbuka di dok di samping halaman web yang sedang Anda lihat.
    Cara Melihat Kode HTML Di Chrome
  3. Klik pada tab "Elemen" di bagian atas panel. Ini akan menampilkan kode sumber HTML untuk halaman web.
    Cara Melihat Kode HTML Di Chrome
  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."
    Cara Melihat Kode HTML Di Chrome

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.
    Cara Melihat Kode HTML Di Chrome
  2. Klik kanan pada halaman dan pilih "Periksa."
    Cara Melihat Kode HTML Di Chrome
  3. Panel baru akan terbuka di bagian bawah layar yang menampilkan kode HTML.
    Cara Melihat Kode HTML Di Chrome
  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.
    Cara Melihat Kode HTML Di Chrome
  5. Untuk menutup panel, klik "X" di pojok kanan atas.
    Cara Melihat Kode HTML Di Chrome

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

  1. Buka Google Chrome dan arahkan ke halaman web yang ingin Anda periksa.
    Cara Melihat Kode HTML Di Chrome
  2. Klik ikon menu (tiga titik) di pojok kanan atas browser dan pilih Alat Lainnya dan Alat Pengembang dari menu tarik-turun.
    Cara Melihat Kode HTML Di Chrome
  3. Panel Alat Pengembang akan terbuka di bagian bawah layar. Pilih "Elemen" di bagian atas panel.
    Cara Melihat Kode HTML Di Chrome
  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.
    Cara Melihat Kode HTML Di Chrome

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.
    Cara Melihat Kode HTML Di Chrome
  2. Ketuk sekali di bilah alamat untuk memulai mode edit.
    Cara Melihat Kode HTML Di Chrome
  3. Pindahkan kursor ke bagian depan URL.
    Cara Melihat Kode HTML Di Chrome
  4. Ketik "View-source" lalu tekan tombol "Go". Kode HTML untuk halaman web akan ditampilkan di Chrome.
    Cara Melihat Kode HTML 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.
    Cara Melihat Kode HTML Di Chrome
  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.
    Cara Melihat Kode HTML Di 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.
    Cara Melihat Kode HTML Di Chrome
  2. Tekan tombol "Pergi".
    Cara Melihat Kode HTML Di Chrome

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.

Sign up and earn $1000 a day ⋙

Leave a Comment

Apakah Platform Lintas Gerbang 3 Baldur? Belum

Apakah Platform Lintas Gerbang 3 Baldur? Belum

Setelah banyak hype dan antisipasi, “Baldur's Gate 3” telah dirilis. Tapi, sebelum terjun ke dalam permainannya, banyak pemain yang ingin mengetahui apakah itu benar atau tidak

Cara Memperbaiki DS4Windows Tidak Mendeteksi Kesalahan Pengontrol

Cara Memperbaiki DS4Windows Tidak Mendeteksi Kesalahan Pengontrol

Apakah Anda mengalami masalah dengan koneksi pengontrol Anda? Anda siap bermain, tetapi tanpa menggunakan pengontrol, permainan akan berakhir. Anda bukan satu-satunya gamer

Cara Reset Keterampilan Di Diablo 4

Cara Reset Keterampilan Di Diablo 4

Pernahkah Anda mencari cara untuk memodifikasi build pemain Anda tanpa membuat ulang karakter baru di “Diablo 4”? Nah, Anda beruntung. Permainan ini memungkinkan Anda

Cara Menyesuaikan Kecerahan Pada PC Windows 10

Cara Menyesuaikan Kecerahan Pada PC Windows 10

Pengaturan kecerahan layar adalah fitur penting, apa pun perangkat yang Anda gunakan. Namun yang terpenting adalah mengetahui tingkat kecerahannya

Cara Mendapatkan Yama Di Buah Blox

Cara Mendapatkan Yama Di Buah Blox

Yama adalah salah satu Katana Terkutuk dalam game dan menyandang status Legendaris. Memegang senjata ampuh di dunia terbuka “Blox Fruits” akan menawarkan Anda

Cara Memperbaiki Adaptor Jaringan Windows 10 yang Hilang

Cara Memperbaiki Adaptor Jaringan Windows 10 yang Hilang

Adaptor jaringan pada sistem operasi Windows merupakan perangkat vital yang memastikan koneksi jaringan berjalan lancar. Sejak adaptor jaringan menerima

Cara Mendapatkan Bantuan Di Windows

Cara Mendapatkan Bantuan Di Windows

Meskipun Anda sudah lama menggunakan Windows, terkadang Anda mungkin menghadapi tantangan yang memerlukan bantuan ahli. Apakah Anda sedang menghadapinya

Cara Melihat Kata Sandi Wi-Fi Tersimpan di Windows 11

Cara Melihat Kata Sandi Wi-Fi Tersimpan di Windows 11

Ada beberapa hal yang lebih membuat frustrasi daripada terkunci dari jaringan internet Anda. Jika Anda belum menuliskan kata sandinya, Anda berisiko kehilangan akses

Di mana Menemukan Lokasi Wallpaper Windows Di PC Anda

Di mana Menemukan Lokasi Wallpaper Windows Di PC Anda

Inilah lokasi wallpaper Windows untuk Windows 8 dan 10, sehingga Anda dapat menggunakan gambar beresolusi tinggi ini dengan perangkat lain atau versi Windows yang lebih lama.

Cara Menguji Kamera Pada PC Windows 10

Cara Menguji Kamera Pada PC Windows 10

Jika Anda ingin mengambil gambar dengan PC Windows 10, Anda perlu menguji fungsi kamera terlebih dahulu. Apakah Anda hanya ingin mengambil foto selfie

Cara Menghapus File Sementara Di PC Windows 10 Atau 11

Cara Menghapus File Sementara Di PC Windows 10 Atau 11

Setelah komputer Anda mulai lamban, itu tandanya Anda perlu mengosongkan sebagian ruang. Biasanya, menghapus file-file sementara adalah awal yang baik.

Ringkasan pintasan aplikasi Film & TV di Windows 10

Ringkasan pintasan aplikasi Film & TV di Windows 10

Ringkasan pintasan aplikasi Film & TV di Windows 10, Ringkasan pintasan aplikasi Film & TV di Windows 10 untuk memberi Anda pengalaman yang luar biasa. Mungkin

Cara memperbaiki kesalahan Pesan Gagal Memuat pada Discord untuk Windows

Cara memperbaiki kesalahan Pesan Gagal Memuat pada Discord untuk Windows

Cara memperbaiki kesalahan Pesan Gagal Memuat di Discord untuk Windows, Discord tidak menyenangkan jika Anda tidak dapat membaca apa yang ditulis orang lain. Berikut cara memperbaiki kesalahan Pesan

Cara menampilkan ikon PC ini di desktop Windows 11

Cara menampilkan ikon PC ini di desktop Windows 11

Cara Menampilkan Ikon PC Ini di Desktop Windows 11, Selama proses penggunaan Windows 11, banyak pengguna yang perlu mengakses PC ini (manajemen).

Cara mencari informasi di Windows Registry dengan cepat

Cara mencari informasi di Windows Registry dengan cepat

Cara mencari informasi di Windows Registry dengan cepat, Apakah Anda kesulitan mencari informasi di Windows Registry? Jadi di bawah ini adalah cara cepat untuk menemukan registri