{"id":13841,"date":"2023-05-13T10:23:00","date_gmt":"2023-05-13T03:23:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=13841"},"modified":"2023-05-09T14:22:51","modified_gmt":"2023-05-09T07:22:51","slug":"cara-inspect-element","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/cara-inspect-element\/","title":{"rendered":"Cara Inspect Element Secara Cepat dan Praktis"},"content":{"rendered":"\n<p>Ada yang sudah pernah mencoba fitur <em>inspect element <\/em>di <em>browser <\/em>kalian? Asli, itu fitur keren banget, loh! Sebab, kalian bisa memeriksa berbagai elemen \u201ctak kasat mata\u201d dari sebuah website. Cara <em>inspect element<\/em> juga mudah sekali ternyata. Tak usah lama-lama, langsung simak yuk <strong>Cara Inspect Element secara Cepat dan Praktis&nbsp;<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu Inspect Element?<\/strong><\/h2>\n\n\n\n<p><em>Inspect element <\/em>adalah fitur <em>browser <\/em>yang memungkinkan untuk memeriksa kode HTML dan CSS pada suatu website. Artinya, kalian bisa mengetahui berbagai kode warna yang digunakan website tersebut, jenis <em>font <\/em>atau ikon yang dipakai, dan masih banyak lagi.<\/p>\n\n\n\n<p><em>Inspect element <\/em>juga memungkinkan untuk mengubah sementara semua kode HTML dan CSS di halaman tersebut. Artinya, kalian bebas mengutak-atik tampilannya. Mulai dari mengganti warna, mengganti teks, menghapus gambar, dan sebagainya.<\/p>\n\n\n\n<p><em>Wait<\/em>, sebelum mengubah kodenya, pahami dulu dasar HTML maupun CSS, ya. Jadi, kalian bisa tahu perubahan apa yang dilakukan. Sebab, fitur mengubah <em>inspect element<\/em> ini sebenarnya ditujukan untuk <em><a href=\"https:\/\/www.jetorbit.com\/blog\/pengertian-web-developer-dan-skill-yang-dibutuhkan\/\">web developer<\/a><\/em>.<\/p>\n\n\n\n<p>FYI, perubahan yang dilakukan akan ditampilkan secara<em> real-time <\/em>ya pada <em>browser<\/em>.<\/p>\n\n\n\n<p>Tenang, perubahan tersebut tidak berpengaruh pada tampilan aslinya karena hanya berlaku pada halaman website yang sedang dibuka, kok. Jadi, saat me-<em>refresh<\/em> atau menutup browser setelah perubahan pada <em>inspect element<\/em>, tampilan website tersebut akan kembali normal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Manfaat Inspect Element<\/strong><\/h2>\n\n\n\n<p>Berikut ini manfaat <em>inspect element<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Melihat dan menyesuaikan tampilan website.<\/li><li>Memastikan website sudah <em>responsive<\/em>.<\/li><li>Mengukur kecepatan halaman website pada tab Network.<\/li><li>Mengetahui <em>error code <\/em>JavaScript (<em>debugging<\/em> JavaScript) lewat tab Console.<\/li><li>Mengukur performa memori dan CPU halaman website.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fungsi Inspect Element<\/strong><\/h2>\n\n\n\n<p>Berikut ini fungsi secara lengkapnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Mengedit Website:<\/strong> <em>developer <\/em>bisa melihat bagaimana perubahan desain website sebelum menerapkannya secara permanen.<\/li><li><strong>Melakukan Audit Kode: <\/strong>&nbsp;<em>developer <\/em>bisa ecek link atau kode yang rusak pada halaman tersebut.<\/li><li><strong>Berlatih&nbsp;Coding: <\/strong>sedang belajar <em>coding<\/em>? Kalian bisa praktek tanpa perlu khawatir melakukan kesalahan. Kalian juga bisa melihat langsung hasilnya.<\/li><li><strong>Melakukan Riset Kata Kunci<\/strong>: kalian bisa melihat kata kunci SEO apa yang dipakai oleh kompetitor di halaman mereka.<\/li><li><strong>Mencari Inspirasi Desain: <\/strong>mengetahui jenis <em>font <\/em>atau kode warna yang dipakai di website tertentu yang membuat kalian tertarik.<\/li><li><strong>Menjaga Privasi: <\/strong>bisa menyembunyikan info pribadi atau info rahasia saat mengambil <em>screenshot <\/em>untuk dibagikan ke orang lain.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Inspect Element<\/strong><\/h2>\n\n\n\n<p>FYI, ada dua cara menggunakan Chrome <em>inspect element <\/em>praktis yang bisa dicoba. Pertama, klik kanan pada halaman website yang terbuka lalu klik <strong>Inspect<\/strong>. Kedua, gunakan<em> shortcut inspect element<\/em> dengan menekan tombol <strong>F12 <\/strong>di keyboard kalian.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"435\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-1.png\" alt=\"Cara Inspect Element\" class=\"wp-image-13842\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-1.png 1022w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-1-800x341.png 800w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/a><\/figure><\/div>\n\n\n<p>Kedua cara menggunakan Chrome Inspect Element tersebut berlaku untuk browser Google Chrome, Mozilla Firefox, Opera, Brave, dan Microsoft Edge.&nbsp;<\/p>\n\n\n\n<p>Setelah itu, halaman inspect element akan terbuka dan menunjukkan panel dengan berbagai pengaturan. Namun yang utama adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Panel\u200c \u200cDOM\u200c: <\/strong>panel \u200cyang\u200c \u200cberfungsi\u200c \u200cuntuk\u200c \u200cmelihat\u200c \u200cdan\u200c \u200cmengubah\u200c \u200celemen\u200c\u200c HTML.\u200c \u200c<\/li><li><strong>Panel\u200c \u200cCSS\u200c: <\/strong>\u200cpanel yang \u200cberfungsi\u200c \u200cuntuk\u200c \u200cmelihat\u200c \u200cdan\u200c \u200cmengubah\u200c\u200c kode\u200c \u200cCSS.\u200c \u200cDi\u200c \u200csini,\u200c \u200cbisa\u200c \u200cmengubah\u200c \u200ctampilan\u200c \u200chalaman\u200c, \u200cseperti\u200c \u200cfont,\u200c \u200cwarna,\u200c \u200cmargin,\u200c\u200c dan\u200c \u200csemacamnya.\u200c \u200c<\/li><li><strong>Panel\u200c \u200cConsole: <\/strong>panel yang berisi \u200ccatatan\u200c \u200c(log)\u200c \u200cstatus\u200c \u200ckode\u200c \u200cdi\u200c \u200chalaman\u200c \u200ctersebut.\u200c Kalau panel ini tidak muncul otomatis, kalian bisa klik tombol tiga titik dan pilih <strong>Show Console Drawer<\/strong>.<\/li><\/ul>\n\n\n\n<p>Lalu, apa saja yang bisa dilakukan saat <em>inspect element<\/em>?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mencari\u200c \u200cKode\u200c \u200cTertentu\u200c \u200c<\/strong><\/h3>\n\n\n\n<p>Saat ingin mencari kode yang digunakan di sebuah website dengan mudah, cukup klik tombol tiga titik di kanan atas dan pilih <strong>Search <\/strong>seperti gambar di bawah:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"247\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-2.png\" alt=\"Cara Inspect Element\" class=\"wp-image-13843\" \/><\/a><\/figure><\/div>\n\n\n<p>Sebagai contoh, ingin mencari semua kode warna yang dipakai. Ya kalian ketikkan saja \u201ccolor\u201d di kolom, maka akan muncul semua kode warna yang digunakan di halaman tersebut.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"553\" height=\"204\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-3.png\" alt=\"Cara Inspect Element\" class=\"wp-image-13844\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Mengganti Teks<\/strong><\/h3>\n\n\n\n<p>Untuk mengganti teks atau elemen lain, klik dulu ikon kursor pada panel DOM:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"163\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-4.png\" alt=\"ganti teks\" class=\"wp-image-13845\" \/><\/a><\/figure><\/div>\n\n\n<p>Lalu, pilih teks yang ingin diganti di halaman website tersebut. Setelah itu, klik dua kali pada halaman elemen dan ketikkan teks yang baru. Kemudian tekan <strong>Enter<\/strong>.<\/p>\n\n\n\n<p>Yeayy, sekarang teks di halaman sudah berubah sesuai keinginan kalian.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mengganti Gambar<\/strong><\/h3>\n\n\n\n<p>Klik ikon kursor di panel DOM. Lalu, klik gambar yang ingin kalian ubah di halaman websitenya.&nbsp;<\/p>\n\n\n\n<p>Klik dua kali link setelah <strong>srcset <\/strong>di <em>inspect element<\/em>. Lalu, masukkan URL gambar yang baru dan tekan tombol <strong>Enter<\/strong>.<\/p>\n\n\n\n<p>Hasilnya ya gambar sebelumnya akan tergantikan dengan gambar terbaru.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mengganti Warna<\/strong><\/h3>\n\n\n\n<p>Untuk mengganti warna, kalian perlu melakukan perubahan pada panel CSS. Caranya, bisa klik bagian yang ingin diubah warnanya.&nbsp;<\/p>\n\n\n\n<p>Langkahnya adalah pada tab Styles di Panel CSS, carilah baris kode yang sesuai.&nbsp;<\/p>\n\n\n\n<p>Klik pada kotak berwarna lalu pilih warna yang kalian suka dari <em>palette <\/em>yang disediakan.<\/p>\n\n\n\n<p>Nah, nantinya warna di bagian tersebut sudah berubah sesuai dengan pilihan warna kalian.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mengganti Font<\/strong><\/h3>\n\n\n\n<p>Penggantian font juga memanfaatkan panel CSS pada <em>inspect element<\/em>. Caranya, klik teks yang ingin kalian ubah <em>font<\/em>-nya.&nbsp;<\/p>\n\n\n\n<p>Lakukan pencarian baris kode <strong>font-family<\/strong> tab <strong>Styles <\/strong>di Panel CSS.<\/p>\n\n\n\n<p>Klik dua kali pada nama <em>font <\/em>di samping <strong>font-family<\/strong>. Lalu, masukkan nama <em>font <\/em>pilihan kalian, dan tekan tombol <strong>Enter<\/strong>.<\/p>\n\n\n\n<p>Kalian akan melihat <em>font <\/em>di website tersebut berubah, selama <em>font <\/em>pengganti sudah terinstall di komputer kalian.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Debugging JavaScript<\/strong><\/h3>\n\n\n\n<p><em>Inspect element<\/em> juga bermanfaat untuk melakukan pengecekan pada catatan (log) status kode di halaman tersebut. Hal ini penting jika ingin melakukan <em>debugging <\/em><a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a>. Sebab, kalian akan mendapatkan informasi kalau ada <em>error <\/em>yang terjadi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Melakukan Pengecekan Website Responsif<\/strong><\/h3>\n\n\n\n<p>Anyway, kalian juga bisa menguji apakah website tersebut sudah responsif.<\/p>\n\n\n\n<p>Caranya, silakan klik pada ikon device untuk beralih dari menu desktop ke mobile dan sebaliknya.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"239\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2023\/05\/Cara-Inspect-Element-5.png\" alt=\"website responsif\" class=\"wp-image-13846\" \/><\/a><\/figure><\/div>\n\n\n<p>Jika tampilan di versi <em>mobile <\/em>terlihat baik, artinya website kalian sudah <em>mobile responsive<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sudah Mencoba Inspect Element?<\/strong><\/h2>\n\n\n\n<p>Fitur<em> inspect element<\/em> memungkinkan kalian melihat kode pada sebuah website.&nbsp;<\/p>\n\n\n\n<p>Caranya juga cukup mudah, cukup dengan klik kanan di halaman website yang sedang dikunjungi lalu klik <strong>Inspect<\/strong>. Anyway, fitur <em>inspect element <\/em>ternyata juga memiliki banyak manfaat.<\/p>\n\n\n\n<p>Oia, kenalan yuk sama Aplikasi Ujian Online milik Jetorbit, <a href=\"https:\/\/ujione.id\/\" target=\"_blank\" rel=\"noopener\">Ujione<\/a>! Berbasis Cloud Pertama di Indonesia! Jadi, bisa melaksanakan ulangan harian, quiz, ujian akhir, dan tugas bisa dari aplikasi Android, IOS, dan juga web. Kalian tidak perlu menyiapkan perangkat server\/hosting lagi, lho. Pokoknya dijamin mudah!\u00a0<\/p>\n\n\n\n<p>Selamat mencoba dan tunggu info-info menarik lainnya dari kami, ya \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ada yang sudah pernah mencoba fitur inspect element di browser kalian? Asli, itu fitur keren banget, loh! Sebab, kalian bisa memeriksa berbagai elemen \u201ctak kasat mata\u201d dari sebuah website. Cara inspect element juga mudah sekali ternyata. Tak usah lama-lama, langsung simak yuk Cara Inspect Element secara Cepat dan Praktis&nbsp; Apa Itu Inspect Element? Inspect element &#8230; <a title=\"Cara Inspect Element Secara Cepat dan Praktis\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/cara-inspect-element\/\" aria-label=\"Read more about Cara Inspect Element Secara Cepat dan Praktis\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":13849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[4738,4741,283,4740,7,3069,3070,4739],"class_list":["post-13841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-inspect-element","tag-cara-inspect-element","tag-domain-murah","tag-fungsi-inspect-element","tag-hosting-murah","tag-inspect-element","tag-inspect-element-adalah","tag-manfaat-inspect-element","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\/13841","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=13841"}],"version-history":[{"count":2,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13841\/revisions"}],"predecessor-version":[{"id":13875,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/13841\/revisions\/13875"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/13849"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=13841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=13841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=13841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}