{"id":9858,"date":"2022-04-29T01:57:00","date_gmt":"2022-04-28T18:57:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=9858"},"modified":"2022-07-05T15:17:26","modified_gmt":"2022-07-05T08:17:26","slug":"manfaat-inspect-element-dan-cara-menggunakannya","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/manfaat-inspect-element-dan-cara-menggunakannya\/","title":{"rendered":"Manfaat Inspect Element dan Cara Menggunakannya"},"content":{"rendered":"\n

Kalian tahukah bahwa terciptanya tampilan halaman website yang keren, tak terlepas dari script-script<\/em> penyusun yang ada di belakang layarnya? Saat menjumpai halaman website yang keren, kalian bisa saja meniru tampilannya. Caranya mudah kok, yakni dengan memanfaatkan inspect element<\/em> bawaan dari browser. Okay, ketahui lebih lanjut yuk tentang Manfaat Inspect Element dan Cara Menggunakannya<\/strong><\/p>\n\n\n\n

Apa Itu Inspect <\/a>Element?\u00a0<\/strong><\/h2>\n\n\n\n

Inspect element <\/em>adalah senjata rahasia profesional web. Para pembuat atau desainer website, sering menggunakannya untuk memperbaiki bug<\/em>, menyesuaikan interface <\/em>web yang dibangun, dan untuk mengintip balik layar web pesaing. Dengan menggunakan tools <\/em>ini, memungkinkan untuk melihat script HTML dan CSS yang membentuk halaman web tersebut. <\/p>\n\n\n\n

Kalian bisa juga bereksperimen dengan mengubah konten website secara temporary<\/em>, misalnya mengubah warna background<\/em>, jenis font<\/em>, maupun layout <\/em>menggunakan inspect<\/em>. Untuk mengembalikan ke keadaan semula, kalian cukup melakukan refresh <\/em>halaman website-nya dan semua akan kembali seperti semula.<\/p>\n\n\n\n

Manfaat Inspect Element <\/strong><\/h2>\n\n\n\n

Berikut ini adalah manfaat-manfaat lainnya dari inspect element:<\/em><\/p>\n\n\n\n

1. Untuk Mengolah Tampilan Website\/ CSS<\/strong><\/h3>\n\n\n\n

Ketika ingin melakukan penyesuaian pada tampilan website yang kalian miliki, khususnya pada code CSS, kalian bisa memanfaatkan tools <\/em>ini, lho.<\/p>\n\n\n

\n
\"manfaat<\/a><\/figure><\/div>\n\n\n

Dengan menggunakannya browser, akan langsung mengeksekusi dan menyajikan tampilan sesuai kode kalian. Fitur ini akan memudahkan dalam menggunakan fitur-fitur, seperti autocomplete<\/em>, filter, color picker, visual model box,<\/em> dan sebagainya.<\/p>\n\n\n\n

Tampilan yang disajikan bersifat sementara dan akan kembali ke tampilan asli ketika melakukan refresh browser<\/em>-nya. Maka, ketika sudah menemukan  kode CSS yang pas, tinggal menyalin kodenya ke script CSS website kalian.<\/p>\n\n\n\n

2. Uji Coba Tampilan Responsif<\/strong><\/h3>\n\n\n\n

Inspect element<\/em> juga digunakan untuk menentukan tampilan website kalian di versi mobile ataupun tab. Apabila ada tampilan yang kurang berkenan, kalian bisa kok menyesuaikan kode CSS-nya hingga memperoleh tampilan yang diinginkan.<\/p>\n\n\n

\n
\"manfaat<\/a><\/figure><\/div>\n\n\n

3. Mengukur Kecepatan Website<\/strong><\/h3>\n\n\n\n

Melalui tab Network<\/strong>, kalian bisa mengetahui seberapa lama halaman website dibuka oleh browser<\/em>. Besarnya ukuran file yang di-download<\/em> oleh browser akan membuat halaman web lebih lama untuk dibuka. Melalui tab Network ini, kalian juga bisa mengetahui kecepatan akses halaman web tersebut.<\/p>\n\n\n

\n
\"manfaat<\/a><\/figure><\/div>\n\n\n

4. Debugging Javascript <\/strong><\/h3>\n\n\n\n

Kalian bisa memantau bila ada error code<\/em> Javascript dengan menggunakan inspect element<\/em>. Melalui tab \u201cConsole<\/strong>\u201d, kalian akan mengetahui letak error<\/em>-nya, dan bisa langsung melakukan perbaikan. Maka, saat terjadi error code<\/em> Javascript tampilan browser yang sering kali ditemui adalah tampilan halaman kosong saja jika tanpa tools <\/em>ini.<\/p>\n\n\n\n

5. Audit Web<\/strong><\/h3>\n\n\n\n

Di Google Chrome, kalian bisa temukan fitur ini di tab Audit<\/strong>. Tab Audit digunakan untuk mengetahui resource <\/em>apa saja yang digunakan dan tidak digunakan oleh website kalian. Kalian bisa melakukan optimasi kinerja website dengan fitur ini.<\/p>\n\n\n\n

6. Mengukur Performa Memori dan CPU<\/strong><\/h3>\n\n\n\n

Kalian bisa mengukur performa memori dan CPU halaman website ketika dibuka melalui menu Timeline <\/strong>jika kalian pengguna Google Chrome dan melalui menu Performance <\/strong>bagi kalian pengguna Firefox.<\/p>\n\n\n\n

Cara Menggunakan Inspect Element<\/strong><\/h2>\n\n\n\n

Berikut ini cara menggunakan inspect element<\/em> melalui browser<\/em>.<\/p>\n\n\n\n

Cara Inspect Element Chrome<\/strong><\/h3>\n\n\n\n
  1. Buka browser <\/em>Chrome lalu ketikkan alamat website hendak dicek.<\/li>
  2. Klik kanan lalu pilih Inspect. Ada juga cara pintas untuk membukanya, yaitu gunakan Control + Shift + C <\/strong>bagi kalian pengguna Windows dan gunakan Command + Option + C<\/strong> bagi pengguna Mac.<\/li>
  3. Selanjutnya, kalian bisa klik tab kotak elemen sesuai dengan kebutuhan. Kalian juga bisa mengubah tampilan kotak editor seperti di bagian kanan, kiri, bawah maupun membuka dengan halaman sendiri, dengan cara klik titik tiga pada bagian kanan menu inspect.  <\/li><\/ol>\n\n\n
    \n
    \"manfaat<\/a><\/figure><\/div>\n\n\n

    Cara Inspect Element Chrome Android<\/strong><\/h3>\n\n\n\n
    1. Buka aplikasi chrome pada HP Android yang kalian gunakan.<\/li>
    2. Akses ke halaman website yang ingin kalian cek inspect.<\/li>
    3. Tambahkan view-source:<\/strong> di awal link URL websitenya. Contoh view-source: https:\/\/www.jetorbit.com\/<\/a> <\/li>
    4. Setelah itu tekan enter. Nantinya akan muncul kode script seperti screenshot <\/em>berikut: <\/li><\/ol>\n\n\n
      \n
      \"manfaat<\/a><\/figure><\/div>\n\n\n

      Kalian juga bisa menggunakan aplikasi tambahan di Google Play Store untuk mendapatkan tampilan inspect element <\/em>yang lebih baik.<\/p>\n\n\n\n

      Cara Inspect Element Firefox<\/strong><\/h3>\n\n\n\n

      Cara penggunaan pada browser Firefox hampir dengan dengan Google Chrome, yaitu:<\/p>\n\n\n\n

      1. Buka alamat website yang akan kalian cek menggunakan browser Firefox. <\/li>
      2. Klik kanan => Inspect Element (Q).<\/li><\/ol>\n\n\n\n

        Selanjutnya kalian bisa melakukan pengecekan tampilan melalui tools <\/em>tersebut.<\/p>\n\n\n\n

        Gimana, sangat bermanfaat kan dalam menyesuaikan tampilan website? Kalian tak perlu takut dalam bereksperimen karena tampilan yang berubah hanyalah tampilan di sisi browser kalian kok dan tidak berpengaruh pada script <\/em>website kalian. Nah, saat kalian sudah mendapatkan formula yang tepat, silakan terapkan ke script <\/em>website kalian. Okay, semoga bermanfaat dan selamat mencoba.<\/p>\n\n\n\n

        Oia, ada info penting sangat, nih! Jetorbit punya Paket Website Toko Online<\/a>, lho. Kalian bisa menjual apa saja dengan toko online milik kalian sendiri! Mudah digunakan oleh siapa saja yang tentunya disertai dengan dukungan bantuan terbaik yang kalian dapatkan. Tenang, kami juga menyediakan VPS yang bisa kalian cek di sini<\/a>.<\/p>\n\n\n\n

        Kalo lepi kalian kena trojan<\/p>\n\n\n\n

        Segera lawan agar tak ada penyesalan<\/p>\n\n\n\n

        Saat ini kan masih musim hujan<\/p>\n\n\n\n

        Jangan lupa ya jaga kesehatan kalian<\/p>\n","protected":false},"excerpt":{"rendered":"

        Kalian tahukah bahwa terciptanya tampilan halaman website yang keren, tak terlepas dari script-script penyusun yang ada di belakang layarnya? Saat menjumpai halaman website yang keren, kalian bisa saja meniru tampilannya. Caranya mudah kok, yakni dengan memanfaatkan inspect element bawaan dari browser. Okay, ketahui lebih lanjut yuk tentang Manfaat Inspect Element dan Cara Menggunakannya Apa Itu … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":10025,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[283,7,3069,3070,3073,3072,3071],"class_list":["post-9858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-domain-murah","tag-hosting-murah","tag-inspect-element","tag-inspect-element-adalah","tag-inspect-element-chrome","tag-inspect-element-chrome-android","tag-inspect-element-firefox","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/9858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=9858"}],"version-history":[{"count":4,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/9858\/revisions"}],"predecessor-version":[{"id":11023,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/9858\/revisions\/11023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/10025"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=9858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=9858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=9858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}