{"id":14636,"date":"2023-09-18T05:53:07","date_gmt":"2023-09-17T22:53:07","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=14636"},"modified":"2023-10-06T10:35:06","modified_gmt":"2023-10-06T03:35:06","slug":"apa-itu-inspect-element","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/apa-itu-inspect-element\/","title":{"rendered":"Apa Itu Inspect Element, Manfaat, dan Cara Menggunakannya"},"content":{"rendered":"

Pasti pernah dong ya kalian melihat tampilan suatu website terlihat eye-catching atau ciamik. <\/span>Anyway<\/span><\/i>, tampilan tersebut tidak terlepas dari <\/span>script-script<\/span><\/i> penyusun di belakang layar. Ingin meniru tampilannya? Gampang! Manfaatkan saja<\/span> inspect element<\/span><\/i> dari <\/span>browser<\/span><\/i>. Okay, tak usah pakai lama, langsung simak yuk <\/span>Apa Itu Inspect Element, Manfaat, dan Cara Menggunakannya<\/b><\/p>\n

Apa Itu Inspect Element?<\/b>\u00a0<\/span><\/h2>\n

Kalian sudah tahu kah bahwa <\/span>inspect element<\/span><\/i> merupakan senjata rahasia profesional web? Jadi, para pembuat atau desainer website sering menggunakannya untuk memperbaiki <\/span>bug<\/span><\/i>, menyesuaikan antarmuka web yang dibangun, dan juga digunakan untuk mengintip balik layar web pesaing.\u00a0 Kalian bisa melihat <\/span>script <\/span><\/i>HTML dan CSS yang membentuk halaman web tersebut dengan menggunakan <\/span>tools <\/span><\/i>ini.\u00a0<\/span><\/p>\n

Manfaat Inspect Element\u00a0<\/b><\/h2>\n

Berikut ini manfaat-manfaat dari <\/span>inspect element:<\/span><\/i><\/p>\n

    \n
  1. \n

    Untuk Mengolah Tampilan Website atau CSS\u00a0<\/b><\/h3>\n<\/li>\n<\/ol>\n

    Saat\u00a0 ingin melakukan penyesuaian pada tampilan website yang kalian miliki, khususnya pada code CSS, silakan manfaatkan <\/span>tools <\/span><\/i>ini.\u00a0<\/span><\/p>\n

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

    FYI, tampilan yang disajikan bersifat sementara ya dan akan kembali ke tampilan asli ketika kalian <\/span>refresh browser<\/span><\/i>. Makanya, ketika kalian sudah menemukan\u00a0 kode CSS yang cucok dengan kebutuhan, kalian salin kodenya ke <\/span>script <\/span><\/i>CSS website kalian.\u00a0<\/span><\/p>\n

      \n
    1. \n

      Uji Coba Tampilan Responsif\u00a0<\/b><\/h3>\n<\/li>\n<\/ol>\n

      Inspect element<\/span><\/i> juga digunakan untuk menentukan tampilan website kalian di versi mobile maupun tab. Ada tampilan yang kurang berkenan? Eitsss, santuy, kalian bisa loh menyesuaikan kode CSS-nya sampai memperoleh tampilan yang\u00a0 kalian inginkan.<\/span><\/p>\n

        \n
      1. \n

        Mengukur Kecepatan Website\u00a0<\/b><\/h3>\n<\/li>\n<\/ol>\n

        Melalui tab <\/span>Network<\/b>, bisa diketahui seberapa lama halaman website dibuka oleh <\/span>browser<\/span><\/i>. Besarnya ukuran file yang di-<\/span>download<\/span><\/i> oleh <\/span>browser <\/span><\/i>akan membuat halaman web lebih lama untuk dibuka.<\/span><\/p>\n

        FYI, kalian juga bisa mengetahui kecepatan akses halaman web melalui tab <\/span>Network <\/b>ini.\u00a0<\/span><\/p>\n

          \n
        1. \n

          Debugging Javascript\u00a0<\/b><\/h3>\n<\/li>\n<\/ol>\n

          Kalian bisa memantau apabila ada <\/span>error code <\/span><\/i>Javascript dengan menggunakan<\/span> inspect element<\/span><\/i>, loh. Melalui tab <\/span>Console, <\/b>kalian akan mengetahui letak <\/span>error<\/span><\/i> dan bisa langsung melakukan perbaikan.\u00a0<\/span><\/p>\n

          Tanpa <\/span>tools <\/span><\/i>ini, saat terjadi <\/span>error code<\/span><\/i> Javascript<\/a> maka tampilan <\/span>browser <\/span><\/i>yang sering ditemui adalah tampilan halaman kosong saja.\u00a0<\/span><\/p>\n

            \n
          1. \n

            Audit Web\u00a0<\/b><\/h3>\n<\/li>\n<\/ol>\n

            Di Google Chrome, bisa ditemukan fitur ini di tab <\/span>Audit<\/b>. Tab Audit digunakan untuk mengetahui <\/span>resource <\/span><\/i>apa saja yang digunakan dan tidak digunakan oleh website kalian. Nah, dengan tool tersebut kalian bisa melakukan optimasi kinerja website.\u00a0<\/span><\/p>\n

              \n
            1. \n

              Mengukur Performa Memori dan CPU\u00a0<\/b><\/h3>\n<\/li>\n<\/ol>\n

              Oia, kalian juga bisa mengukur performa memori dan CPU halaman website saat membuka melalui menu <\/span>Timeline <\/b>bagi pengguna Google Chrome dan melalui menu <\/span>Performance <\/b>bagi pengguna Firefox.<\/span><\/p>\n

              Cara Menggunakan Inspect Element\u00a0<\/b><\/h2>\n

              Berikut ini cara menggunakan <\/span>inspect element<\/span><\/i> melalui <\/span>browser<\/span><\/i>:\u00a0<\/span><\/p>\n

              Cara Inspect Element Chrome\u00a0<\/b><\/h3>\n