Cara Melihat Sumber HTML di Google Chrome

Baik Anda seorang desainer web yang melakukan debug pada kode sumber situs Anda atau hanya ingin tahu tentang seperti apa tampilan kode situs, Anda dapat melihat sumber HTML langsung di Google Chrome. Ada dua cara untuk melihat sumber HTML: Lihat Sumber dan Periksa menggunakan Alat Pengembang.

Lihat Sumber Menggunakan View Page Source

Jalankan Chrome dan lompat ke halaman web yang Anda inginkan untuk melihat kode sumber HTML. Klik kanan halaman dan klik "Lihat Sumber Halaman", atau tekan Ctrl + U, untuk melihat sumber halaman di tab baru.

Tab baru terbuka bersama dengan semua HTML untuk halaman web, benar-benar diperluas dan tidak diformat.

Jika Anda mencari elemen atau bagian tertentu dalam sumber HTML, menggunakan View Source membosankan dan tidak praktis, terutama jika halaman tersebut menggunakan banyak JavaScript dan CSS.

Periksa Sumber Menggunakan Alat Pengembang

Metode ini menggunakan panel Alat Pengembang di Chrome dan merupakan pendekatan yang jauh lebih bersih untuk melihat kode sumber. HTML lebih mudah dibaca di sini berkat pemformatan tambahan dan kemampuan untuk menciutkan elemen yang tidak ingin Anda lihat.

Buka Chrome dan buka halaman yang ingin Anda periksa; lalu tekan Ctrl + Shift + i. Panel berlabuh akan terbuka di samping halaman web yang Anda lihat.

Klik panah abu-abu kecil di samping elemen untuk memperluasnya lebih jauh.

Jika Anda tidak ingin melihat kode halaman lengkap secara default, tetapi memeriksa elemen tertentu di HTML, klik kanan ruang di halaman tersebut, lalu klik "Periksa".

Saat panel terbuka kali ini, ia langsung menuju ke bagian kode yang berisi elemen yang Anda klik.

Jika Anda ingin mengubah posisi dok, Anda dapat memindahkannya ke bawah, kiri, kanan, atau bahkan melepasnya ke jendela terpisah. Klik ikon menu (tiga titik), lalu pilih salah satu dari dok ke jendela terpisah, dok ke kiri, dok ke bawah, atau dok ke kanan.

Itu saja yang ada untuk itu. Saat Anda selesai melihat kodenya, tutup tab View Source atau klik 'X' di panel Developer Tools untuk kembali ke halaman web Anda.