Utama Krom Cara Melihat Sumber HTML di Google Chrome

Cara Melihat Sumber HTML di Google Chrome



Yang Perlu Diketahui

  • Klik kanan pada halaman web dan pilih Lihat sumber halaman .
  • Pintasan: Tekan Ctrl + DI DALAM (PC Windows) atau Memerintah + Pilihan + DI DALAM (Mac).
  • Untuk menggunakan alat pengembang Chrome, pilih Menu (tiga titik) > Lebih banyak alat > Alat pengembang .

Artikel ini menjelaskan cara mengakses kode sumber HTML situs web di browser web Google Chrome, serta mengakses dan menggunakan alat pengembang Chrome. Melihat kode sumber situs adalah cara terbaik bagi pemula untuk belajar HTML.

Lihat Kode Sumber di Chrome

Jadi bagaimana Anda melihat kode sumber sebuah situs web? Berikut petunjuk langkah demi langkah untuk melakukannya menggunakan browser Google Chrome.

  1. Buka Peramban web Google Chrome (Kalau kamu tidak punya Google Chrome terpasang , ini adalah unduhan gratis).

  2. Arahkan ke halaman web yang ingin Anda periksa .

  3. Klik kanan halaman dan lihat menu yang muncul. Dari menu itu, klik Lihat sumber halaman .

    Lihat Sumber Halaman dalam menu kontekstual untuk browser web Chrome
  4. Kode sumber untuk halaman tersebut sekarang akan muncul sebagai tab baru di browser.

  5. Alternatifnya, Anda juga dapat menggunakan pintasan keyboard Ctrl + DI DALAM pada PC untuk membuka jendela dengan kode sumber situs yang ditampilkan. Di Mac, pintasan ini adalah Memerintah + Pilihan + DI DALAM .

Hilary Allison / Kawat Hidup

bagaimana cara mengetahui apakah driver Anda mutakhir

Gunakan Alat Pengembang Chrome

Selain yang sederhanaLihat sumber halamankemampuan yang ditawarkan Google Chrome, Anda juga dapat memanfaatkan keunggulannya Alat pengembang untuk menggali lebih dalam suatu situs. Alat-alat ini memungkinkan Anda tidak hanya melihat HTML, tetapi juga CSS yang berlaku untuk elemen tampilan dalam dokumen HTML tersebut.

Untuk menggunakan alat pengembang Chrome:

  1. Membuka Google Chrome .

  2. Navigasi ke halaman web yang ingin Anda periksa .

  3. Pilih menu tiga titik di sudut kanan atas jendela browser.

  4. Dari menu, arahkan kursor ke atas Lebih banyak alat lalu pilih Alat pengembang di menu yang muncul.

    Item menu alat pengembang di Google Chrome
  5. Sebuah jendela akan terbuka yang memperlihatkan kode sumber HTML di sebelah kiri panel dan CSS terkait di sebelah kanan.

  6. Alternatifnya, jika Anda mengklik kanan sebuah elemen dalam halaman web dan pilih Memeriksa dari menu yang muncul, alat pengembang Chrome akan muncul dan menyorot bagian tertentu yang Anda pilih dalam HTML dengan CSS terkait ditampilkan di sebelah kanan. Ini sangat membantu jika Anda ingin mempelajari lebih lanjut tentang bagian tertentu dari sebuah situs.

    cara membatalkan langganan match com
Cara Memeriksa Elemen di Mac

Apakah Melihat Kode Sumber Legal?

Selama bertahun-tahun, banyak desainer web baru yang mempertanyakan apakah boleh melihat kode sumber situs dan menggunakannya untuk pendidikan mereka dan pada akhirnya untuk pekerjaan yang mereka lakukan. Meskipun menyalin kode situs secara grosir dan menyebarkannya sebagai milik Anda di situs web tentu saja tidak dapat diterima, menggunakan kode tersebut sebagai batu loncatan untuk belajar sebenarnya adalah seberapa banyak kemajuan yang telah dibuat dalam industri ini.

Seperti yang kami sebutkan di awal artikel ini, Anda akan kesulitan menemukan web profesional yang bekerja saat ini yang belum mempelajari sesuatu dengan melihat sumber situs! Ya, melihat kode sumber suatu situs adalah sah. Menggunakan kode itu sebagai sumber daya untuk membuat sesuatu yang serupa juga aman. Mengambil kode apa adanya dan menyebarkannya sebagai pekerjaan Anda adalah tempat Anda mulai menemui masalah.

Pada akhirnya, para profesional web belajar satu sama lain dan sering kali menyempurnakan karya yang mereka lihat dan terinspirasi, jadi jangan ragu untuk melihat kode sumber situs dan menggunakannya sebagai alat pembelajaran.

Lebih Dari Sekadar HTML

Satu hal yang perlu diingat adalah bahwa file sumber bisa sangat rumit (dan semakin kompleks situs web yang Anda lihat, kemungkinan besar semakin kompleks pula kode situs tersebut). Selain struktur HTML yang menyusun halaman, juga akan ada CSS (cascading style sheet) yang menentukan tampilan visual situs tersebut. Selain itu, banyak situs web saat ini akan menyertakan file skrip yang disertakan bersama HTML.

Kemungkinan ada beberapa file skrip yang disertakan; faktanya, masing-masing mendukung aspek situs yang berbeda. Sejujurnya, kode sumber suatu situs mungkin tampak berlebihan, terutama jika Anda masih baru dalam melakukan hal ini. Jangan frustrasi jika Anda tidak dapat segera mengetahui apa yang terjadi dengan situs tersebut. Melihat sumber HTML hanyalah langkah pertama dalam proses ini. Dengan sedikit pengalaman, Anda akan mulai memahami lebih baik bagaimana semua bagian ini cocok untuk membuat situs web yang Anda lihat di browser Anda. Semakin Anda memahami kodenya, Anda akan dapat mempelajarinya lebih lanjut, dan hal ini tidak akan terasa terlalu menakutkan bagi Anda.

cara instal google play store di amazon fire tv
Pertanyaan Umum
  • Bagaimana cara mengedit kode HTML di Chrome?

    Buka Alat Pengembang di Chrome dengan menekan Ctrl (atau Memerintah di Mac) + Pergeseran + I . Dari sana, tekan Ctrl ( Memerintah di Mac) + HAI dan pilih file sumber tersimpan yang ingin Anda edit untuk membukanya.

  • Bagaimana cara melihat kode sumber halaman di Chrome jika Lihat Sumber dinonaktifkan?

    Jika situs web telah menonaktifkan opsi Lihat Sumber, Anda mungkin masih dapat melihat-lihat. Dari bagian atas jendela browser pilih Melihat > Pengembang > Lihat sumber , yang seharusnya menampilkan kode sumber laman web.

  • Bagaimana cara melihat kode sumber situs di Chrome menggunakan perangkat Android saya?

    Navigasikan ke situs web yang ingin Anda lihat menggunakan aplikasi Chrome perangkat Anda, lalu pilih bilah alamat browser. Pindahkan kursor teks ke paling kiri—di depan URL—dan ketik Lihat sumber , lalu tekan Memasuki atau pilih Pergi .

Artikel Menarik

Pilihan Editor

Cara Menghubungkan Folder di Obsidian
Cara Menghubungkan Folder di Obsidian
Obsidian adalah aplikasi pencatatan populer yang membantu Anda mengatur tugas dan mengikuti jadwal Anda. Ini menggunakan brankas dan folder untuk memfungsikan dan menyimpan catatan Anda secara lokal di ponsel atau komputer Anda. Anda dapat menghubungkan ide-ide Anda
Google Pixel 2/2 XL – Cara Mencerminkan Layar Saya ke TV atau PC Saya
Google Pixel 2/2 XL – Cara Mencerminkan Layar Saya ke TV atau PC Saya
Tidak perlu menonton video, melihat foto, dan bermain game di layar kecil ponsel cerdas Anda. Anda dapat dengan mudah mencerminkan layar dan berbagi media Anda dengan teman dan anggota keluarga. Ini sangat mudah untuk
Ulasan Apple iPhone 8 Plus: Cepat tetapi jauh dari inspirasi
Ulasan Apple iPhone 8 Plus: Cepat tetapi jauh dari inspirasi
Pembaruan: Apple baru-baru ini menyegarkan jajaran iPhone 8 dengan sejumlah handset iPhone 8 dan iPhone 8 Plus (PRODUCT) RED Edisi Khusus. Anda dapat membeli handset dalam versi 64GB dan 256GB langsung dari Apple seharga £
Persyaratan Sistem NYATA untuk Windows 10
Persyaratan Sistem NYATA untuk Windows 10
Setelah merilis Windows 10 versi 1903, Microsoft telah memperbarui persyaratan sistem resmi untuk itu. Pengguna yang PCnya memiliki perangkat keras minimal yang diperlukan untuk menginstal Windows 10 mungkin telah memperhatikan bahwa OS secara harfiah tidak dapat digunakan karena berjalan sangat lambat. Secara teknis, ini akan berjalan dengan persyaratan minimal tetapi pengalamannya akan buruk.
Tambahkan Efek 3D ke Gambar dengan Foto di Windows 10
Tambahkan Efek 3D ke Gambar dengan Foto di Windows 10
Aplikasi Foto Windows 10 bawaan yang memungkinkan menambahkan efek 3D keren dan objek 3D ke gambar Anda. Inilah cara melakukannya.
Cara Menonaktifkan Mode Penyamaran di Chrome
Cara Menonaktifkan Mode Penyamaran di Chrome
Mode Penyamaran Google Chrome adalah fitur yang cukup rapi. Ini memungkinkan Anda untuk merahasiakan riwayat penelusuran Anda saat menggunakan komputer publik atau perangkat orang lain. Anda juga dapat menggunakannya di perangkat Anda sendiri untuk pribadi
Aktifkan Picture-in-Picture (PIP) untuk Kontrol Media Global di Edge
Aktifkan Picture-in-Picture (PIP) untuk Kontrol Media Global di Edge
Cara Mengaktifkan mode Picture-in-Picture (PIP) untuk Kontrol Media Global Microsoft Edge Fitur Kontrol Media Global di Microsoft Edge Chromium sekarang menyertakan tombol Picture-in-Picture, memungkinkan Anda untuk masuk ke mode PiP lebih cepat. Perubahan tersedia di Edge Canary mulai dari build 82.0.442.0. Berikut cara mengaktifkannya: Iklan Global Media Mengontrol Microsoft