Tips Menggunakan Inspect Element di Browser Google Chrome

Dengan asumsi Anda ingin tips menggunakan fitur Elemen Inspeksi di Browser Google Chrome: Klik kanan pada elemen yang ingin Anda periksa dan pilih 'Periksa' dari menu drop-down. Anda juga dapat menggunakan pintasan keyboard Ctrl+Shift+I (Windows) atau Cmd+Opt+I (Mac) untuk membuka Inspektur. Setelah Inspektur terbuka, Anda akan melihat HTML untuk halaman di sebelah kiri dan CSS di sebelah kanan. Anda dapat membuat perubahan pada HTML dan CSS di Inspektur dan melihat perubahan tersebut segera berlaku pada halaman. Untuk keluar dari Inspektur, cukup klik X di pojok kanan atas.

Google Chrome tidak hanya untuk pengguna web umum, tetapi juga untuk web developer yang sering membuat website, membuat blog, dll. Periksa elemen atau Memeriksa Opsi Google Chrome membantu pengguna menemukan beberapa informasi tentang situs web yang tersembunyi dari tampilan. Berikut adalah beberapa tips untuk menggunakan Inspect Element di browser Google Chrome untuk PC Windows.

Periksa elemen Google Chrome

1] Temukan File JavaScript/Media Tersembunyi

hapus profil pengguna windows 10

Banyak situs web menampilkan pop-up jika pengunjung tetap membuka halaman web selama lebih dari 15 atau 20 detik. Atau, dalam banyak kasus, gambar, iklan, atau ikon terbuka setelah tidak sengaja mengklik di suatu tempat. Untuk menemukan file tersembunyi ini di halaman web, Anda dapat menggunakan Sumber Periksa tab Elemen. Daftar seperti pohon ditampilkan di sebelah kiri, yang dapat Anda jelajahi.

peta apel untuk windows 10

2] Dapatkan kode warna HEX/RGB di Chrome

Terkadang kita mungkin menyukai suatu warna dan ingin mengetahui kode warnanya. Anda dapat dengan mudah menemukan kode warna HEX atau RGB yang digunakan pada halaman web tertentu menggunakan opsi bawaan di Google Chrome. Klik kanan warna dan pilih Memeriksa . Dalam kebanyakan kasus, Anda akan mendapatkan kode warna di sisi kanan dengan CSS yang berbeda. Jika Anda tidak melihatnya, Anda mungkin perlu menggunakan perangkat lunak pemilih warna gratis.

TIP : Lihatlah ini Alat Pemilih Warna Online Sama.

3] Dapatkan Tip untuk Meningkatkan Kinerja Halaman Web

ikon globe windows 10

Semua orang suka mengunjungi situs yang terbuka dengan cepat. Jika Anda mendesain situs web Anda, Anda harus selalu mengingat hal ini. Ada banyak alat untuk menguji dan mengoptimalkan kecepatan memuat halaman. Namun, Google Chrome juga memiliki alat bawaan yang memungkinkan pengguna mendapatkan kiat untuk meningkatkan kecepatan pemuatan situs web. Untuk mengakses alat ini, buka Audit tab dan pastikan Penggunaan jaringan , Performa halaman web , Saya Muat ulang halaman dan audit saat dimuat terpilih. Kemudian klik berlari tombol. Ini akan memuat ulang halaman dan menampilkan beberapa informasi yang dapat digunakan untuk mempercepat halaman. Misalnya, Anda bisa mendapatkan semua resource yang cache-nya belum kadaluarsa, JavaScript yang bisa digabungkan menjadi satu file, dan sebagainya.

4] Uji Daya Tanggap

Saat ini, sangat penting untuk membuat halaman web responsif. Ada banyak alat yang dapat memeriksa apakah situs Anda sepenuhnya responsif. Namun, alat Google Chrome ini membantu pengguna mengetahui apakah sebuah situs responsif atau tidak dan juga periksa tampilannya pada perangkat seluler tertentu. Buka situs apa saja, dapatkan Periksa elemen tab, klik seluler klik tombol, atur resolusi, atau pilih perangkat yang diinginkan untuk memeriksa halaman web.

nonaktifkan boot aman windows 10

5] Edit situs web langsung

Katakanlah Anda sedang membuat halaman web, tetapi Anda tidak tahu apa itu skema warna, ukuran menu navigasi, konten, atau rasio aspek sidebar. Anda dapat mengedit situs web langsung Anda menggunakan opsi Periksa Elemen di Google Chrome. Meskipun Anda tidak dapat menyimpan perubahan ke situs web langsung, Anda dapat melakukan semua pengeditan sehingga Anda dapat menggunakannya nanti. Untuk melakukannya, buka Elemen Inspeksi, pilih properti HTML di sisi kiri, dan buat perubahan gaya di sisi kanan. Jika Anda membuat perubahan pada CSS, Anda dapat mengeklik tautan ke file, menyalin semua kode, dan menempelkannya ke file asli.

Inspect Element dari Google Chrome adalah pendamping sejati setiap pengembang web. Apakah Anda sedang mendesain situs web satu halaman atau situs web dinamis, Anda pasti bisa mendapatkan keuntungan dari tips ini.