Google Chrome dirancang tidak hanya untuk pengguna internet biasa tetapi juga untuk pengembang web, yang sering membuat situs web, mendesain blog, dll. Opsi Elemen Inspeksi^{(Inspect Element )} atau Inspeksi ^{(Inspect )}Google Chrome membantu pengguna menemukan beberapa informasi tentang situs web yang tersembunyi dari pandangan . Berikut adalah beberapa tips menggunakan Elemen Inspeksi^{(Inspect Element)} browser Google Chrome untuk PC Windows^{(Windows PC)} .

Periksa Elemen Google Chrome

1] Find hidden JavaScript/Media files

Banyak situs web menampilkan popup jika pengunjung tetap berada di halaman web selama lebih dari 15 atau 20 detik. Atau, sering kali gambar, iklan, atau ikon terbuka setelah mengklik di suatu tempat secara acak. Untuk menemukan file tersembunyi ini di halaman web, Anda dapat menggunakan tab Sources pada ^(Sources)Inspect Element . Ini menunjukkan daftar tampilan pohon di sisi kiri yang dapat dijelajahi.

2] Get HEX/RGB color code in Chrome

Terkadang kita mungkin menyukai sebuah warna dan ingin mengetahui kode warnanya. Anda dapat dengan mudah menemukan kode warna HEX atau RGB yang digunakan pada halaman web tertentu, menggunakan opsi asli di Google Chrome . Klik kanan^{(Right-click)} pada warna, dan klik Inspect . Sebagian besar waktu, Anda akan mendapatkan kode warna di sisi kanan dengan CSS lainnya . Jika Anda tidak melihatnya, Anda mungkin harus menggunakan beberapa perangkat lunak pemilih warna gratis.

TIPS^(TIP) : Lihat juga alat online Color Picker^{(Color Picker online tools)} ini .

3] Dapatkan kiat peningkatan kinerja halaman web^{(3] Get web page performance improvement tips)}

Semua orang suka mendarat di situs web yang terbuka dengan cepat. Jika Anda mendesain situs web Anda, Anda harus selalu mengingatnya. Ada banyak alat untuk memeriksa dan mengoptimalkan kecepatan pemuatan halaman. Namun, Google Chrome juga dilengkapi dengan alat bawaan yang memungkinkan pengguna mendapatkan kiat untuk meningkatkan kecepatan memuat situs web. Untuk mengakses alat ini, buka tab Audit^(Audits) , dan pastikan Pemanfaatan Jaringan^{(Network Utilization)} , Kinerja Halaman Web^{(Web Page Performance)} , dan Muat Ulang Halaman dan Audit saat Muat^{(Reload Page and Audit on Load)} dipilih. Kemudian klik tombol Jalankan . ^{(Run )}Ini akan memuat ulang halaman, dan menunjukkan kepada Anda beberapa informasi yang dapat digunakan untuk membuat halaman lebih cepat. Misalnya, Anda bisa mendapatkan semua sumber daya yang tidak memiliki kedaluwarsa cache, JavaScriptyang dapat digabungkan menjadi satu file, dan seterusnya.

4] Periksa responsivitas^{(4] Check responsiveness)}

Membuat halaman web responsif sangat penting, saat ini. Ada banyak alat yang dapat memeriksa apakah situs Anda benar-benar responsif atau tidak. Namun, alat Google Chrome ini membantu pengguna untuk mengetahui apakah situs tersebut responsif atau tidak , serta memeriksa bagaimana tampilannya di perangkat seluler tertentu. Buka situs web apa pun, dapatkan tab Inspect Element , klik tombol ^{(Inspect Element )}seluler^{(mobile )} , atur resolusi, atau pilih perangkat yang diinginkan untuk menguji halaman web.

5] Edit situs web langsung^{(5] Edit live website)}

Mari kita asumsikan bahwa Anda sedang membuat halaman web, tetapi Anda bingung tentang skema warna atau ukuran menu navigasi atau konten atau rasio bilah sisi. Anda dapat mengedit situs web langsung Anda menggunakan opsi Inspect Element dari Google Chrome . Meskipun Anda tidak dapat menyimpan perubahan di situs web langsung, Anda dapat melakukan semua pengeditan sehingga Anda dapat menggunakannya lebih lanjut. Untuk melakukannya, buka Inspect Element , pilih properti HTML dari sisi kiri dan buat perubahan gaya di sisi kanan. Jika Anda membuat perubahan apa pun di CSS , Anda dapat mengklik tautan file, salin seluruh kode dan tempel ke file asli.

Inspect Element dari Google Chrome adalah pendamping nyata dari setiap pengembang web. Tidak masalah apakah Anda sedang mengembangkan situs web satu halaman atau situs web dinamis, Anda pasti dapat menggunakan tips ini.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not juѕt for regular internet υsers but also for web developers, who often create a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome tidak responsif, Relaunch sekarang?

• Cara Memperbaiki Kesalahan File Download pada Google Chrome browser

• Cara Mengubah Default Print Settings di Google Chrome

• Cara Destroy Profile pada Browser Close di Google Chrome

• Anna Assistant adalah voice assistant yang sempurna untuk Google Chrome

• Cara Mengaktifkan dan Menonaktifkan Window Naming di Google Chrome

• Great Suspender secara otomatis akan menangguhkan tab pada Google Chrome

• Cara Mengaktifkan dan Menggunakan Commander feature di Google Chrome

• Fix Downloading Proxy Script error di Google Chrome

• Google Chrome Masalah dan masalah dengan Windows 10

• Cara Memeriksa Internet Connection Speed Anda Menggunakan Google Chrome

• Google Chrome tidak akan menghapus Browsing History and Data

• Jam Anda di depan atau jam Anda ada di belakang kesalahan pada Google Chrome

• Sesuaikan volume di Google Chrome tabs secara terpisah menggunakan Volume Master

• Cara Mengaktifkan Otomatis pada Spell Checker di Google Chrome

• Fix ERR_CACHE_MISS error Pesan pada Google Chrome

• Cara Memperbaiki AW, Snap! error message di Google Chrome browser

• Cara Mengaktifkan atau Disable Scrollable Tabstrip di Google Chrome

• Cara mencegah pengguna menginstal ekstensi di Google Chrome

• Google Chrome sedang menunggu cache - apa yang harus saya lakukan!?