Cara Inspect Element Praktis

Cara Inspect Element Praktis Inspect element merupakan fitur browser yang lebih memungkinkan bagi pengguna untuk melakukan pemeriksaan kode html maupun CSS di suatu website. Cara inspect Element praktis ini bisa membantu Anda agar mengetahui beberapa kode warna yang sedang di gunakan oleh website tersebut.

Bisa juga mengetahui icon ataupun font yang sedang di gunakan. Ternyata inspect element juga lebih memungkinkan bagi Anda agar bisa mengubah seluruh kode CSS atau html yang ada di halaman tersebut. Bahkan Anda bebas mengutak-ngatik tampilannya. Seperti warna, teks atau yang lainnya.

Fungsi Inspect Element

Perubahan dari inspect element yang sudah Anda lakukan tersebut ternyata tidak mempengaruhi dari tampilan aslinya. Hal ini di karenakan untuk perubahan tersebut hanya akan berlaku di halaman website yang sedang di buka.

Sehingga pada saat melakukan refresh maupun menutup browser setelah perubahan maka tampilan website akan kembali normal seperti sedia kala. Inspect Element tidak hanya digunakan untuk melihat berbagai elemen di balik layar website saja. Melainkan ada fungsi lain yang di miliki oleh inspect Element.

Contohnya saja seperti berikut:

1. Menjaga Privasi

Anda dapat menyembunyikan rahasia pada saat mengambil screenshot dan di bagikan ke orang lain. Privasi yang di maksud yaitu seperti data pribadi atau info rahasia yang tidak ingin di ketahui oleh orang lain.

2. Mencari Inspirasi Desain

Tentunya semua orang akan merasa tertarik dan keinginan untuk mencari inspirasi desain. Ternyata dengan inspect element Anda dapat mengetahui berbagai jenis font maupun kode warna yang sedang digunakan pada sebuah website tertentu.

Untuk melakukan riset kata kunci, Anda dapat melihatnya dari CEO yang sedang di gunakan oleh kompetitor pada halaman mereka. Tentu hal ini sangatlah berguna bagi diri Anda yang sedang menggunakan inspect element  bukan?

3. Berlatih Coding

Ternyata Anda dapat praktek sekaligus belajar coding tanpa harus merasa khawatir jika mengalami kesalahan. Hal menariknya lagi dari fungsi inspect element yaitu Anda bisa secara langsung melihat dari hasil coding yang sudah Anda lakukan tersebut.

4. Audit Kode

Fungsi lain dari inspect element yaitu untuk melakukan audit kode. Pihak dari developer dapat melakukan pengecekan kode maupun link yang rusak di bagian halaman tersebut. Selain itu developer juga dapat melihat perubahan desain website yang sebelumnya menerapkannya secara permanen.

Cara Inspect Element Praktis

Cara Inspect Element Praktis

Untuk cara inspect Element praktis dapat di lakukan dengan beberapa cara. Untuk cara yang pertama bisa langsung klik kanan di halaman website yang sudah terbuka kemudian klik Insert. Sementara untuk cara yang kedua yaitu dengan menggunakan shortcut inspect Element.

Caranya dengan menekan tombol F12 yang ada di keyboard. Untuk kedua cara tersebut memang berlaku pada penggunaan browser Mozilla Firefox, Google Chrome, Opera Mini, maupun Microsoft Edge. Silahkan menggunakan browser yang paling cepat dan sering di gunakan agar lebih biasa.

Berikut ini beberapa langkah inspect element praktis yang bisa Anda coba di antaranya seperti berikut in:

1. Mencari Kode

Untuk bisa mencari kode tertentu yang sedang di gunakan pada sebuah website maka dapat di lakukan dengan cara yang sangatlah mudah.

  • Anda hanya cukup dengan mengklik tombol tiga titik yang letaknya ada di atas kanan.
  • Setelah itu Anda di minta untuk memilih search. Contohnya Anda berkeinginan untuk mencari kode warna yang di pakai, maka bisa mengetik colour yang ada pada bagian kolom search. Secara otomatis akan memunculkan seluruh kode warna yang sedang di gunakan oleh halaman tersebut. Sangat mudah bukan?

2. Mengganti Teks

  • Pada saat ingin mengganti sebuah teks maupun elemen yang lainnya maka jangan lupa untuk klik dulu icon kursor yang ada di panel DOM.
  • Setelah itu pilihlah teks yang hendak di ganti pada halaman web tersebut.
  • Kemudian klik dua kali di halaman Element.
  • Setelah itu ketik teks yang baru.
  • Langkah terakhir cukup dengan tekan tombol enter.
  • Secara otomatis teks pada halaman akan berubah sesuai yang kamu inginkan.
  • Proses selesai.

3. Mengganti Gambar

  • Untuk proses penggantian gambar bisa di lakukan dengan klik icon kursor yang ada di panel Dom.
  • Setelah itu klik gambar sesuai yang di inginkan untuk mengubah halaman website nya dua kali.
  • Kemudian srcset pada inspect elemen.
  • Setelah itu barulah Anda bisa memasukkan url gambar yang baru.
  • Kemudian tekan tombol enter.
  • Gambar yang sebelumnya bisa tergantikan dengan gambar terbaru yang sudah Anda pilih.
  • Proses selesai.

4. Mengganti Warna

  • Cara inspect element praktis proses penggantian warna bisa di lakukan dengan perubahan di panel. Untuk caranya Anda dapat klik bagian yang ingin di rubah warnanya atau yang bagian kotak warna.
  • Anda bisa memilih warna sesuai yang kamu sukai dari palet yang sudah di sediakan.
  • Untuk voila warna yang ada di bagian tersebut bisa berubah sesuai pilihan warna yang Anda pilih.
  • Proses selesai, kini Anda sudah bisa mengubah warna. Sangat praktis kan?

5. Mengganti Font

  • Proses penggantian font sangat bermanfaat untuk panel CSS di inspect element. Untuk cara melakukannya cukup dengan klik text yang ingin di ubah font-nya.
  • Setelah itu lakukan pencarian di baris kode font family dan tipe styles pada panel CSS.
  • Kemudian silahkan klik 2 kali di bagian nama font yang letaknya ada di sebelah samping font-family.
  • Selanjutnya masukkan nama font sesuai yang Anda pilih.
  • Lalu tekan tombol enter Anda bisa melihat font yang ada di website tersebut.
  • Nantinya akan mengalami perubahan selama font dari pengganti tersebut telah terinstal pada komputer yang Anda gunakan.

Alasan Mengapa Harus Menggunakan Inspect Element

Jika Anda adalah pengembang front end maupun spesialis pemasaran, maka keberadaan dari inspect Element pada Google Chrome ini menjadi sesuatu yang lebih memungkinkan bagi Anda untuk bermain kode secara langsung dari halaman website.

Dengan demikian maka Anda tidak perlu merasa takut akan merusaknya maupun mengambil tangkapan layar sebanyak dan sebisa mungkin. Agar bisa mempromosikan sebuah produk pada halaman website Android tentu berbeda dengan visi yang ada.

Bagi pengguna lain mungkin saja memiliki keinginan untuk melakukan pemeriksaan dari segi tampilan halaman website yang ada di Android. Sementara hal ini dapat di jadikan sebagai salah satu aspek yang mana inspect element tersebut sangatlah berguna.


Keberadaan dari inspect element ini dapat di manfaatkan jika Anda sedang membuat konten maupun ingin berbagi beberapa jenis situs ke situs yang lainnya tanpa harus mendownload maupun memposting konten lagi. Alasan terakhir mungkin saja Anda sedang jauh dari desktop.

Sehingga akan menjadi lebih mudah saat mengoperasikan inspect Element di Google Chrome Android. Selain mempunyai banyak fungsi, inspect Element juga mempunyai banyak manfaat pada saat digunakan.

Untuk itu cara inspect Element praktis haruslah di ketahui dengan baik. Namun pastikan terlebih dahulu bahwa Anda setidaknya harus paham dasar-dasar dari CSS atau html. Tujuannya supaya tidak kebingungan pada saat melakukan perubahan.

Bagikan
Share on facebook
Share on twitter
Share on whatsapp