Cara Menggunakan Inspect Element

Pautan Peranti

• Android
• Chromebook
• Mac
• Windows
• Peranti Tiada?

Kebanyakan orang tidak menyedari bahawa terdapat harta karun alat pembangun yang mereka gunakan dan alat itu tersembunyi dalam penyemak imbas kegemaran mereka.

Setiap pelayar web menawarkan alat pembangun untuk menyemak pengekodan tapak web. Walau bagaimanapun, ia adalah entiti asing kepada pengguna internet biasa. Lagipun siapa nak tengok coding website kan?

Ternyata, terdapat banyak perkara yang boleh anda pelajari dengan melihat pengekodan tapak web. Teruskan membaca untuk mengetahui ciri elemen periksa yang ditawarkan dan cara menggunakannya.

Kebanyakan penyemak imbas mempunyai alat untuk memeriksa elemen tapak web, tetapi semuanya berfungsi dengan cara yang sama.

Menggunakan Inspect Element dalam Google Chrome

1. Buka tapak web yang ingin anda periksa.
   
2. Klik kanan di mana-mana pada halaman dan pilih Inspect .
   
   ATAU
3. Klik pada tiga titik menegak di sudut kanan bar alat anda.
   
4. Pergi ke Lebih Banyak Alat .
   
5. Pilih Alat Pembangun .
   
   ATAU
6. Tekan kekunci pintasan papan kekunci F12 pada PC (atau CMD + Options + I pada Mac.)
   

Menggunakan Inspect Element dalam Microsoft Edge

1. Buka laman web.
   
2. Klik pada tiga titik menegak di penjuru kanan sebelah atas bar alat penyemak imbas.
   
3. Tatal ke bawah dan klik pada Lagi Alat .
   
4. Klik pada Alat Pembangun .
   
   ATAU
5. Klik kanan di mana-mana di tapak web dan klik pada Inspect .
   
   ATAU
6. Tekan Ctrl + Shift + I .
   

Mana-mana daripada tiga kaedah ini akan memberi anda hasil yang sama.

Jika anda melakukan ini dengan betul, anak tetingkap baharu terbuka di bahagian bawah penyemak imbas anda. Ini ialah Alat Pembangun dan termasuk tab Elemen. Ini adalah alat yang anda perlukan untuk Memeriksa Elemen.

Panel akan dibuka di bahagian bawah skrin anda sebagai lalai, tetapi anda sentiasa boleh menukar cara ia muncul. Ikuti langkah mudah ini untuk meletakkan semula panel Alat Pembangun:

1. Klik pada tiga titik mendatar di sudut atas panel Alat Pembangun.
   
2. Pilih bahagian dok (kiri, bawah atau kanan) atau nyahdok ke tetingkap yang berasingan.
   

Menuding kursor di sebelah tepi bingkai panel Alat Pembangun dan menyeret akan menyempitkan atau meluaskan ruang kerja. Contohnya, jika anda memilih untuk melabuhkan panel di sebelah kanan tetingkap penyemak imbas, cuba tuding pada sempadan kiri. Anda boleh menyeret panel untuk mengubah saiznya apabila anda melihat kursor anak panah.

Menggunakan Elemen Periksa (Khusus OS)

Walaupun banyak langkah yang terlibat mungkin telah diliputi dengan hanya menunjukkan kepada anda cara menggunakan Inspect Element dalam penyemak imbas, kami akan menunjukkan kepada anda cara pada kebanyakan OS juga.

Cara Menggunakan Inspect Element pada Chromebook

Penyemak imbas lalai pada Chromebook ialah Google, jadi ikut arahan penyemak imbas Chrome untuk mengakses Inspect Element . Berikut adalah sedikit kursus penyegaran untuk anda:

1. Buka laman web.
   
2. Klik pada tiga titik menegak di sudut kanan atas bar alat.
   
3. Pilih Lagi Alat .
   
4. Klik pada Alat Pembangun .
   

Anda juga boleh menggunakan kaedah klik kanan atau kekunci fungsi F12 untuk pergi ke Alat Pembangun dengan lebih cepat.

Cara Menggunakan Inspect Element pada Peranti Android

Menjalankan Inspect Element pada peranti Android sedikit berbeza. Lihat cara untuk pergi ke panel Inspect Element pada Android:

1. Tekan kekunci fungsi F12 .
   
2. Pilih Togol Bar Peranti .
   
3. Pilih peranti Android daripada menu lungsur.
   

Apabila anda memilih peranti Android tertentu, anda akan melihat bahawa versi mudah alih tapak web dimuatkan. Dari sini, anda bebas menggunakan ciri Inspect Element pada peranti Android anda dari keselesaan desktop anda.

Kaedah ini berfungsi untuk kedua-dua penyemak imbas Chrome dan Firefox kerana ia mempunyai ciri dalam Alat Pembangun mereka yang dipanggil Simulasi Peranti.

Ia juga berfungsi dengan cara yang sama untuk peranti iPhone. Anda hanya perlu memilih yang betul dalam menu lungsur.

Cara Menggunakan Inspect Element dalam Windows

Alat Inspect Element tidak semestinya khusus OS, tetapi ia khusus pelayar. Ini bermakna Alat Pembangun ialah ciri penyemak imbas yang anda gunakan dan tidak semestinya Windows. Walau bagaimanapun, anda boleh pergi ke panel Inspect Element tanpa mengira pelayar yang anda suka.

Jika anda menggunakan OS Windows, anda juga mungkin menggunakan penyemak imbas Microsoft Edge. Lihat cara untuk mengakses Inspect Element pada MS Edge:

1. Buka tapak web yang ingin anda periksa.
   
2. Ketik pada tiga titik menegak pada sudut tetingkap penyemak imbas.
   
3. Tatal ke bawah dan pilih Lagi Alat .
   
4. Klik pada Alat Pembangun .
   

Anda juga boleh menggunakan kekunci fungsi F12 untuk mengakses Inspect Element dengan lebih pantas. Juga, mengklik kanan pada halaman web dan memilih Periksa juga berfungsi.

Cara Menggunakan Inspect Element pada Mac

Jika anda menggunakan Mac, penyemak imbas pilihan anda mungkin Safari. Membuka Inspect Elements pada Safari sedikit berbeza daripada pada Chrome dan Firefox. Tetapi ia sama mudah dengan langkah-langkah ini:

1. Buka penyemak imbas Safari.
   
2. Klik pada Safari dalam tab pengepala dan pilih Keutamaan daripada menu lungsur.
   
3. Klik pada ikon gear Lanjutan yang terletak di bahagian atas skrin.
   
4. Tandai kotak yang menyatakan Tunjukkan menu Bangun dalam bar menu .
   

Melalui langkah-langkah ini membolehkan ciri Inspect Element pada penyemak imbas anda. Jika anda tidak mendayakan Inspect Element terlebih dahulu, anda tidak akan melihat pilihan apabila anda membuka tapak web.

Selepas anda melengkapkan langkah ini, hanya klik kanan pada mana-mana halaman web yang terbuka dan pilih Periksa. Anda juga boleh menggunakan arahan kekunci pantas: CMD + Option + I (periksa).

Cara Menggunakan Inspect Element pada iOS

Adakah anda ingin menggunakan ciri Inspect Elements untuk melihat cara versi mudah alih halaman web muncul pada iPhone? Anda boleh melakukan ini dan banyak lagi dengan hanya beberapa langkah mudah. Tetapi sebelum anda melihat elemen, anda perlu mendayakan Pemeriksa Web untuk peranti iOS anda:

1. Pergi ke Tetapan .
   
2. Sekarang, pilih Safari .
   
3. Tatal ke bawah dan ketik pada Menu Lanjutan .
   
4. Sekarang, ketik suis togol untuk menghidupkan Pemeriksa Web .
   

Selain itu, pastikan menu Develop didayakan pada Mac anda dengan mengikut langkah dalam bahagian di atas.

Selepas mendayakan kedua-dua peranti mudah alih iOS dan Mac, anda akan melihat menu Bangun di bar atas pada Mac anda. Klik padanya untuk melihat iPhone yang disambungkan dan halaman web aktif pada peranti. Memilih halaman web juga membuka tetingkap Pemeriksa Web untuk halaman yang sama pada skrin Mac anda.

Walau bagaimanapun, perlu diingat bahawa arahan ini hanya berfungsi untuk Safari yang menjalankan Mac, bukan Safari pada Windows.

Cara Menggunakan Inspect Element Apabila Ia Disekat

Kadangkala, anda akan mendapati bahawa anda tidak boleh memeriksa halaman web dan pilihan Periksa dikelabukan jika anda cuba klik kanan padanya. Anda mungkin berfikir bahawa ia telah disekat, tetapi terdapat banyak cara untuk mengatasinya:

Kaedah 1 – Matikan Javascript

1. Pergi ke Tetapan .
   
2. Cari JavaScript .
   
3. Matikan JavaScript .
   

Kaedah 2 – Akses Alat Pembangun dengan Jauh

Daripada mengklik kanan pada tetikus untuk Memeriksa, lakukan ini:

1. Pergi ke Tetapan dalam penyemak imbas anda.
   
2. Pilih Lagi Alat .
   
3. Tatal ke bawah dan klik pada Alat Pembangun .
   

Kaedah 3 – Menggunakan Kekunci Fungsi

Anda juga boleh cuba menggunakan kekunci fungsi F12 pada halaman web yang menyekat klik kanan untuk Inspect.

Anda mungkin perlu mencuba semua kaedah ini sebelum menemui kaedah yang sesuai untuk anda. Sebagai langkah terakhir, anda juga boleh cuba melihat kod sumber dengan menaip dalam view-source: [masukkan url penuh] .

Cara Menggunakan Inspect Element pada Chromebook Sekolah

Jika Chromebook anda dikeluarkan oleh sekolah, menggunakan ciri Inspect Element melibatkan beberapa langkah mudah:

1. Klik kanan atau ketik dua jari pada halaman web dan pilih Periksa .
   
2. Tekan Ctrl + Shift + I .
   
3. Cuba dan gunakan kaedah view-source:[url], seperti view-source:https://www.wikipedia.com .
   
   

Walau bagaimanapun, sesetengah sekolah dan organisasi menyekat ciri ini, jadi jika ia tidak berfungsi untuk anda, anda mungkin perlu menghubungi organisasi atau pentadbir sekolah anda.

Cara Menggunakan Inspect Element untuk Mencari Jawapan

Anda boleh menggunakan Inspect Element untuk mencari jawapan kepada pelbagai perkara seperti:

• Pratonton reka bentuk tapak pada peranti mudah alih.
• Ketahui kata kunci yang digunakan oleh pesaing.
• Ujian kelajuan.
• Menukar teks pada halaman web.
• Cari contoh pantas untuk menunjukkan kepada pembangun perkara yang anda perlukan.

Apabila anda melancarkan panel Inspect Element, anda akan melihat semua pengekodan untuk tapak web. Itu termasuk semua pengekodan JavaScript, CSS dan HTML yang terbina di dalamnya. Ia seperti melihat pengekodan sumber halaman web, kecuali anda boleh membuat perubahan pada kod tersebut. Selain itu, anda dapat melihat sebarang perubahan dilaksanakan dalam masa nyata.

Alat ini menjadikannya tidak ternilai untuk pemasar, pereka bentuk dan pembangun untuk melihat sebarang perubahan reka bentuk sebelum memuktamadkannya. Walau bagaimanapun, membuat perubahan dalam pengekodan dengan Inspect Element tidak kekal selama-lamanya. Apabila anda memuat semula halaman, ia akan kembali ke keadaan lalainya.

Soalan Lazim Tambahan

Jika anda bukan pakar dalam Inspect Element selepas membaca di atas, terdapat lebih banyak jawapan di sini.

Bagaimanakah Saya Menggunakan Perintah Inspect Element untuk Mencari Jawapan?

Satu-satunya cara untuk mencari jawapan menggunakan ciri Inspect Element adalah jika tapak web mendedahkannya serta-merta selepas penyerahan. Dalam contoh ini, jawapan terdapat dalam pengekodan.

Jika tidak, anda hanya melihat pengekodan untuk kuiz atau ujian apabila anda menggunakan ciri Inspect Element, serta sebarang jawapan yang anda serahkan.

Adakah Inspect Element Haram?

Tidak, alat Inspect Element tidak menyalahi undang-undang; ia direka untuk pembangun web. Melihat kod sumber untuk tapak web tidak menyalahi undang-undang; ia hanya menjadi isu jika anda menggunakan maklumat yang dikumpul untuk tujuan jahat, seperti mencuba eksploitasi, dsb.

Adakah Mungkin untuk Melumpuhkan Inspect Element dalam Penyemak Imbas?

Jawapan ringkasnya ialah tidak.

Anda tidak boleh melumpuhkan Inspect Element dalam penyemak imbas, tetapi anda boleh menetapkan parameter yang menghalang pengguna daripada melakukan tindakan tertentu seperti mengklik kanan pada halaman web. Terdapat banyak tutorial dalam talian untuk menetapkan skrip yang sesuai untuk melumpuhkan acara tertentu. Walau bagaimanapun, anda sebenarnya tidak boleh melumpuhkan ciri Inspect Element secara keseluruhannya.

Kenali Inardi Halaman Web

Menyemak ciri Inspect Element halaman web mungkin merupakan alat pembangun yang anda tidak pernah tahu yang anda perlukan – walaupun anda sendiri bukan pembangun. Ia mempunyai banyak aplikasi reka bentuk dan pemasaran yang boleh menjadikan tapak web anda berjalan lebih lancar. Dan mungkin memberi anda kelebihan pada pesaing.

Untuk apa anda menggunakan Inspect Element? Beritahu kami mengenainya di bahagian komen di bawah.