Bagaimana saya bisa melihat semua css?

Belajar itu menyenangkan dan belajar tentang halaman web yang Anda sukai di internet akan menambah kesenangan. Apakah Anda pernah terpana dengan elemen di halaman web dan tertarik untuk mengetahui bagaimana elemen itu dibuat? . Peramban modern seperti Chrome menawarkan alat yang sangat mudah dan potensial untuk menganalisis laman web. Ini adalah keterampilan praktis yang sangat dibutuhkan untuk menganalisis anatomi halaman web

Meskipun tujuan utama dari alat ini adalah untuk memecahkan masalah Anda sendiri, desain juga dapat digunakan untuk memahami bagaimana para ahli mendesain konten mereka sehingga Anda dapat mempelajari konsepnya. Pada artikel ini mari kita bahas ilustrasi langkah demi langkah melihat kode sumber HTML halaman web menggunakan browser web Google Chrome. Jika Anda menggunakan browser lain, pelajari lebih lanjut tentang cara melihat kode sumber di Mac Safari dan Mozilla Firefox

Lihat Kode Sumber Halaman Web di Google Chrome

Sebelum menjelajahi kode sumber, penting untuk memahami komponen halaman web. Ini akan membantu untuk membaca kode sumber dan Anda dapat dengan mudah menemukan item yang Anda cari dalam kode. Selain melihat kode sumber laman web, Anda juga dapat mengedit konten secara langsung di Chrome untuk tujuan pengujian. Mari kita bahas semua topik ini secara rinci di bagian berikut

1. Komponen Halaman Web

Laman web terdiri dari bagian-bagian berikut secara umum

• Konten halaman – Teks, gambar, video, dll. ditandai dengan HTML
• Penyelarasan dan tampilan visual – Umumnya dikontrol dengan CSS
• Skrip – memicu tindakan baik di sisi klien atau server

CSS dapat digunakan dalam tiga cara berbeda di halaman web

• Gaya sebaris – memengaruhi tampilan visual elemen individual
• Gaya internal – memengaruhi semua elemen di halaman
• Lembar gaya eksternal – memengaruhi semua elemen di situs web

Anda dapat mempelajari bagaimana urutan gaya CSS akan memengaruhi tampilan halaman web. Skrip juga dapat digunakan dengan berbagai cara yang mirip dengan CSS. Kode sumber laman web berisi semua komponen ini dan Anda dapat melihatnya dengan berbagai cara

2. Melihat Gaya HTML, Inline, dan CSS Internal

Untuk melihat konten HTML, gaya sebaris dan internal halaman web, buka halaman web di browser Chrome. Klik kanan di mana saja pada halaman dan pilih opsi "Lihat Sumber Halaman" seperti yang ditunjukkan pada gambar di bawah

Catatan. Jika Anda mengklik kanan di dalam iframe, browser akan menampilkan opsi "Lihat Sumber Bingkai" alih-alih "Lihat Sumber Halaman"

Ini akan membuka jendela baru yang akan menampilkan konten dan gaya HTML yang ditandai dari setiap elemen yang digunakan pada halaman web tersebut. Beberapa situs akan menunjukkan kepada Anda tampilan sumber yang cukup jelas tetapi sebagian besar situs terbaru akan menampilkan kode sumber tanpa jeda baris dan spasi. Ini adalah versi kode sumber yang diperkecil dan dikompresi, saat ini hampir semua situs web menggunakan format ini untuk memperkecil ukuran dan meningkatkan kecepatan pemuatan halaman

Seperti yang Anda lihat pada tangkapan layar di bawah, Chrome menampilkan semua kode sumber dalam satu baris tanpa jeda dan spasi

3. Melihat Stylesheet Eksternal

Cara paling populer dan direkomendasikan untuk menggunakan CSS adalah menautkan stylesheet eksternal ke konten HTML. Untuk mengetahui stylesheet eksternal yang digunakan pada halaman web, cari tag “tautan” pada kode sumber. Klik tautan yang diakhiri dengan “. css” untuk melihat semua elemen gaya yang ditentukan di stylesheet

Sebuah situs web dapat menggunakan stylesheet eksternal dalam format yang berbeda. Sebagian besar file CSS diakhiri dengan nomor versi atau teks tambahan seperti “. css?Ver1. 3”. Terkadang versi file CSS yang diperkecil berakhir seperti “. min. css” juga dapat digunakan untuk memuat halaman dengan cepat

Meskipun tautan ditampilkan sebagai relatif pada kode sumber, mengekliknya akan membuka lembar gaya sumber dengan URL absolut (URL lengkap dengan nama domain)

4. Pintasan Chrome untuk Melihat Kode Sumber Halaman

Anda dapat melihat kode sumber laman apa pun langsung dari bilah alamat browser Chrome dengan menambahkan awalan “view-source. ” ke URL laman mana pun. Dengan cara ini Anda bahkan dapat melihat kode sumber halaman yang dilindungi klik kanan juga

view-source:webpage URL

URL yang dimasukkan akan dialihkan secara otomatis untuk mengambil konten, jika halaman tersebut memiliki pengalihan 301 yang tepat. Misalnya, memasukkan “view-source. situs Anda. com”, dapat dialihkan secara otomatis ke “view-source. https. // www. situs Anda. com”

5. Melihat Kode Sumber dengan Alat Pengembang

Metode yang dijelaskan di atas akan menyediakan kode HTML / CSS sumber tanpa menautkan ke elemen individual yang ada di halaman web. Merupakan tugas yang sulit untuk mengetahui gaya yang digunakan untuk elemen tertentu dengan tampilan kode sumber CSS

Mirip dengan browser lain, Google Chrome menawarkan alat pengembang untuk mengakses kode CSS yang ditautkan ke elemen tertentu di halaman web. Klik kanan pada elemen apa pun di halaman web dan pilih opsi "Periksa elemen" atau "Periksa" untuk membuka konsol pengembang di bagian bawah halaman web seperti yang ditunjukkan pada gambar di bawah ini. Anda juga dapat membuka konsol pengembang dari jalur menu “Pengaturan > Alat lainnya > Alat pengembang“

1. Klik kanan pada elemen dan pilih opsi "Periksa".
2. Lihat HTML dan gaya sebaris di bawah tab "Elemen".
3. Lihat gaya eksternal di bagian "Gaya".
4. Klik ikon "seluler" untuk melihat situs di perangkat seluler dan periksa HTML / CSS sumber yang sesuai untuk konten seluler

Konsol dibagi menjadi dua bagian dengan berbagai tab yang tersedia di bawah setiap bagian. Bagian sisi kiri menampilkan konten HTML halaman di bawah tab "Elemen" dan bagian sisi kanan menampilkan CSS di bawah tab "Gaya". Mengklik tautan CSS apa pun akan membuka lembar gaya di bagian kiri di bawah tab "Sumber".

Untuk melihat kode CSS dari elemen tertentu, pilih "Kotak Panah" di pojok kiri atas (temukan lensa di bagian bawah pada platform Windows) dari konsol dan klik elemen apa saja yang akan disorot pada mouse hover. Tindakan ini akan secara otomatis menampilkan kode CSS yang ditautkan ke elemen yang dipilih

6. Melihat CSS Seluler

Karena gaya untuk elemen di desktop dan perangkat seluler dapat bervariasi, konsol pengembang menawarkan opsi untuk mengalihkan tampilan ke sebagian besar perangkat populer seperti iPhone, iPad, Samsung Galaxy, dan Google Nexus. Setelah perangkat yang diperlukan dipilih dari dropdown, kode CSS terkait yang tersedia di halaman tersebut untuk perangkat tersebut akan ditampilkan

1. Klik pada tombol toggle device toolbar
2. Pilih perangkat dari dropdown atau klik opsi "Edit" untuk menambahkan perangkat Anda sendiri yang tidak tersedia di daftar default. Anda dapat memeriksa dimensi perangkat dari perangkat yang dipilih
3. Menambah atau mengurangi persentase untuk menyesuaikan tampilan browser
4. Klik tombol "Putar" untuk beralih antara tampilan potret dan lanskap
5. Periksa pratinjau pilihan Anda. Klik kanan pada elemen yang ingin Anda lihat sumber selulernya dan klik opsi "Periksa".
6. Ubah elemen untuk melihat sumber. Mengarahkan kursor ke kode HTML akan menyorot elemen yang sesuai di panel browser pratinjau
7. Temukan kode CSS sumber dari elemen yang dipilih. CSS seluler harus dimulai dengan aturan “@media”. Jika tidak ada aturan “@media” maka CSS umum juga akan diterapkan pada perangkat seluler

7. Tampilan Cetak Cantik dari File CSS dan JavaScript yang Diperkecil

Saat ini sudah umum untuk menggunakan versi file CSS dan JavaScript yang diperkecil di situs web. Ini akan menghapus komentar, spasi, jeda baris yang tidak perlu, dan menjadikan file sebagai. min. css atau. min. js. Juga mekanisme caching yang digunakan di situs web melakukan penghapusan ruang yang serupa. Meskipun semua ini dilakukan untuk meningkatkan kecepatan halaman, hal ini membuat CSS dan skrip tidak dapat dibaca oleh mereka yang mencari sumber halaman. Chrome mengatasi masalah ini dengan menawarkan tombol “Cetak Cantik”. Mengklik tombol "Cetak Cantik" akan mengembalikan file yang diperkecil ke versi yang dapat dibaca sehingga Anda dapat dengan mudah melewatinya

Berikut adalah contoh tampilan skrip yang diperkecil di konsol pengembang. Lihat style sheet atau skrip yang ditautkan di bawah tab "Sumber". Klik tanda kurung gelang ganda {}

Anda akan melihat tampilan cetak skrip yang cantik seperti di bawah ini

Catatan. Beberapa halaman web mencegah klik kanan untuk menghindari penyalinan konten, dalam hal ini Anda dapat mengakses sumber halaman menggunakan opsi menu konsol pengembang di Chrome

8. Memodifikasi Konten Halaman Web Langsung Online

Keuntungan terbesar konsol pengembang Chrome adalah bermain-main di halaman langsung dan mempratinjau perubahan langsung di browser. Anda dapat langsung mengubah atau menambahkan gaya CSS di konsol pengembang untuk melihat efeknya di halaman aktif. Misalnya, Anda dapat mengubah "ukuran font" dari elemen "badan" dan melihat perubahan ukuran font diselaraskan dengan tepat. Ini adalah opsi yang sangat berguna dan menghemat banyak waktu tanpa memengaruhi pengalaman pengguna yang sebenarnya. Jika tidak, Anda mungkin perlu mengubahnya di situs langsung berdasarkan iterasi untuk menemukan gaya yang sesuai

Pemilih warna juga merupakan salah satu favorit pengembang web. Anda dapat mengubah warna elemen secara online dan mempratinjau secara instan. Anda dapat menyalin kode warna RGB atau HEX dan menggunakannya pada desain Anda seperti seorang profesional

Klik kanan pada elemen HTML dan edit langsung menggunakan opsi "Edit sebagai HTML" untuk menambah atau menghapus konten secara online

Pelajari lebih lanjut cara melihat struktur tanggapan HTTP di konsol pengembang Chrome

Kata Akhir

Kami harap artikel ini membantu Anda memahami cara melihat kode sumber di Chrome. Ingat, melihat kode sumber adalah tindakan yang sangat umum dan semua pengguna dapat melakukannya. Tetapi menggunakan konsol pengembang mengharuskan Anda menginvestasikan banyak waktu untuk belajar. Juga Chrome memperbarui fitur di setiap versi yang membuat proses pembelajaran terus berlanjut. Tapi ini harus sangat menarik dan menyenangkan untuk memahami dan memecahkan masalah konsep desain web

Bagaimana saya bisa melihat semua CSS situs web?

Bagaimana cara melihat kode CSS?

Bagaimana cara mendapatkan CSS lengkap dalam elemen inspeksi?

Bagaimana cara mendapatkan semua CSS dari halaman di Chrome?