Cara Menggunakan Elemen Inspeksi

Tautan Perangkat
AndroidiPhoneChromebookMacWindowsPerangkat Hilang?
Kebanyakan orang tidak menyadari bahwa ada harta karun berupa alat pengembang yang mereka miliki, dan itu tersembunyi di peramban favorit mereka.

Setiap peramban web menawarkan alat pengembang untuk memeriksa pengkodean situs web, namun, itu adalah entitas asing untuk rata-rata pengguna internet. Lagi pula, siapa yang ingin melihat pengkodean situs web, bukan?

Ternyata, ada banyak hal yang dapat Anda pelajari dengan melihat pengkodean situs web. Baca terus untuk mengetahui apa yang ditawarkan fitur elemen inspeksi dan cara menggunakannya.

Cara Menggunakan Elemen Inspeksi di Browser Tertentu

Sebagian besar browser memiliki alat untuk memeriksa elemen situs web, tetapi semuanya umumnya bekerja dengan cara yang sama.

Menggunakan Elemen Inspeksi di Google Chrome
Buka situs web yang ingin Anda periksa.Klik kanan di mana saja pada halaman dan pilih Inspect.ORKlik pada tiga titik vertikal di sudut kanan toolbar Anda.Buka Alat Lainnya.Pilih Alat Pengembang.ORTekan tombol pintasan keyboard F12 di PC (atau CMD + Opsi + I di Mac.)
Menggunakan Elemen Inspeksi di Microsoft Edge
Buka situs web.Klik tiga titik vertikal di sudut kanan atas bilah alat browser.Gulir ke bawah dan klik Lainnya Alat.Klik Alat Pengembang.ORKlik kanan di mana saja di situs web dan klik Inspeksi.ORTekan Ctrl + Shift + I.
Salah satu dari ketiga metode ini akan memberi Anda hasil yang sama.

Jika Anda melakukannya dengan benar, Anda akan melihat yang baru panel terbuka di bagian bawah browser Anda. Ini adalah Alat Pengembang dan termasuk tab Elemen. Ini adalah alat yang Anda butuhkan untuk Memeriksa Elemen.

Panel akan terbuka di bagian bawah layar Anda sebagai default, tetapi Anda selalu dapat mengubah tampilannya. Ikuti langkah-langkah sederhana ini untuk memposisikan ulang panel Alat Pengembang:
Klik pada tiga titik vertikal di sudut atas panel Alat Pengembang.Pilih sisi dok (kiri, bawah, atau kanan) atau lepas dok ke jendela terpisah.
Mengarahkan kursor ke sebelah ke tepi bingkai panel Alat Pengembang dan menyeret akan mempersempit atau memperlebar ruang kerja. Misalnya, jika Anda memilih untuk memasang panel ke sisi kanan jendela browser, coba arahkan kursor ke batas kiri. Anda dapat menyeret panel untuk mengubah ukurannya ketika Anda melihat kursor panah.

Menggunakan Elemen Inspeksi (Khusus OS)

Meskipun banyak langkah yang terlibat mungkin telah dibahas dengan hanya menunjukkan kepada Anda cara menggunakan Elemen Inspeksi di browser, di mana ia ada tempat pertama, tapi kami akan tetap menunjukkan caranya di sebagian besar OS.

Cara Menggunakan Elemen Inspeksi di Chromebook

Browser default di Chromebook adalah Google, jadi ikuti petunjuk browser Chrome untuk mengakses Elemen Inspeksi. Berikut ini sedikit penyegaran untuk Anda:
Buka situs web.Klik pada tiga garis vertikal di sudut kanan atas bilah alat.Pilih Alat Lainnya.Klik Alat Pengembang.
Anda juga dapat menggunakan metode klik kanan atau tombol fungsi F12 untuk masuk ke Alat Pengembang lebih cepat.

Cara Menggunakan Elemen Inspeksi di Perangkat Android

Menjalankan Elemen Inspeksi pada perangkat Android sedikit berbeda. Lihat cara membuka panel Inspect Element di Android:
Tekan tombol fungsi F12.Pilih Toggle Device Bar.Pilih perangkat Android dari menu tarik-turun.
Ketika Anda memilih perangkat Android tertentu, Anda akan melihat bahwa perangkat seluler versi beban situs web. Dari sini, Anda bebas menggunakan fitur Elemen Inspeksi di perangkat Android Anda dari kenyamanan desktop.

Metode ini berfungsi untuk browser Chrome dan Firefox karena keduanya memiliki fitur di Alat Pengembang yang disebut Device Simulation.

Ini juga berfungsi di cara yang sama untuk perangkat iPhone. Anda hanya perlu memilih yang tepat di menu tarik-turun.

Cara Menggunakan Elemen Inspeksi di Windows

Alat Elemen Inspeksi tidak harus spesifik OS tetapi spesifik browser. Itu berarti Alat Pengembang adalah fitur browser yang Anda gunakan dan belum tentu Windows. Namun, Anda dapat membuka panel Inspect Element terlepas dari browser mana yang Anda sukai.

Jika Anda menggunakan OS Windows, kemungkinan besar Anda juga akan menggunakan browser Microsoft Edge. Lihat cara mengakses Inspect Element di MS Edge:
Buka situs web yang ingin Anda periksa.Ketuk tiga titik vertikal di sudut jendela browser.Gulir ke bawah dan pilih Alat Lainnya.Klik Alat Pengembang.
Anda juga dapat gunakan tombol fungsi F12 jika Anda ingin mengakses Elemen Inspeksi lebih cepat. Juga, mengklik kanan pada halaman web dan memilih Inspect juga berfungsi.

Cara Menggunakan Elemen Inspect pada Mac

Jika Anda menggunakan Mac, browser pilihan Anda mungkin Safari. Membuka Inspect Elements di Safari sedikit berbeda dengan di Chrome dan Firefox. Tapi itu sesederhana dengan langkah-langkah ini:
Buka browser Safari.Klik Safari di tab header dan pilih Preferences dari menu drop-down.Klik ikon roda gigi Lanjutan yang terletak di bagian atas layar.Centang kotak yang bertuliskan Tampilkan menu Kembangkan di bilah menu.
Melalui langkah-langkah ini akan mengaktifkan fitur Elemen Inspeksi di browser Anda. Jika Anda tidak mengaktifkan Inspect Element terlebih dahulu, Anda tidak akan melihat opsi saat membuka situs web.

Setelah Anda menyelesaikan langkah ini, cukup klik kanan pada halaman web yang terbuka dan pilih Inspect. Anda juga dapat menggunakan perintah tombol cepat: CMD + Option + I (inspect).

Cara Menggunakan Inspect Element di iPhone

Apakah Anda ingin menggunakan fitur Inspect Elements untuk melihat tampilan halaman web versi seluler di iPhone? Anda dapat melakukan ini dan banyak lagi hanya dengan beberapa langkah sederhana. Tetapi sebelum Anda melihat suatu elemen, Anda harus mengaktifkan Web Inspector untuk perangkat iOS Anda:
Buka Pengaturan. Sekarang, pilih Safari. Gulir ke bawah dan ketuk pada Menu Lanjutan. Sekarang, ketuk sakelar sakelar untuk mengaktifkan Inspektur Web .
Juga, Anda perlu memastikan bahwa menu Kembangkan diaktifkan di Mac Anda dengan mengikuti langkah-langkah di bagian di atas.

Setelah mengaktifkan perangkat seluler iOS dan Mac, Anda akan melihat menu Kembangkan di bilah atas di Mac Anda. Klik untuk melihat iPhone yang terhubung dan halaman web aktif di perangkat. Memilih halaman web juga membuka jendela Web Inspector untuk halaman yang sama di layar Mac Anda.

Perlu diingat, bahwa petunjuk ini hanya berfungsi untuk Safari yang menjalankan Mac, bukan Safari di Windows.

Cara Menggunakan Elemen Inspeksi Saat Diblokir

Terkadang, Anda akan menemukan bahwa Anda tidak dapat memeriksa halaman web dan pilihan Inspect berwarna abu-abu jika Anda mencoba mengeklik kanannya. Anda mungkin berpikir bahwa itu diblokir, tetapi ada banyak cara untuk mengatasinya:

Method 1 – Matikan Javascript
Masuk ke Settings.Search “JavaScript”.Matikan JavaScript.
Method 2 – Akses Developer Tools dengan Long Way

Alih-alih mengklik kanan mouse untuk Periksa, lakukan ini:
Buka Pengaturan di browser Anda.Pilih Alat Lainnya.Gulir ke bawah dan klik Alat Pengembang.
Metode 3 – Menggunakan Fungsi Key

Anda juga dapat mencoba menggunakan tombol fungsi F12 di halaman web yang memblokir klik kanan untuk Pemeriksaan .

Anda mungkin harus mencoba semua metode ini sebelum menemukan metode yang cocok untuk Anda. Sebagai upaya terakhir, Anda juga dapat mencoba melihat kode sumber dengan mengetikkan sumber tampilan: [masukkan url lengkap].

Cara Menggunakan Elemen Inspeksi di Discord

Memeriksa coding Anda di Discord adalah proses yang mudah. Cukup gunakan perintah Ctrl + Shift + I atau tombol F12 pada halaman Discord.

Cara Menggunakan Elemen Inspeksi di Chromebook Sekolah

Jika Chromebook dikeluarkan oleh sekolah, menggunakan fitur Elemen Inspeksi melibatkan beberapa langkah sederhana:
Klik kanan atau dua -ketuk jari pada halaman web dan pilih Inspect.Tekan Ctrl + Shift + I.Coba dan gunakan metode view-source:[url], seperti “view-source:https://www.wikipedia.com“, tanpa the quotes.
Namun, beberapa sekolah dan organisasi memblokir fitur ini. Jadi, jika tidak berhasil, Anda mungkin perlu menghubungi organisasi atau administrator sekolah Anda.

Cara Menggunakan Elemen Inspeksi untuk Menemukan Jawaban

Anda dapat menggunakan Elemen Inspeksi untuk menemukan jawaban atas berbagai hal seperti:
Mereview desain situs di perangkat seluler.Temukan kata kunci yang digunakan pesaing.Tes kecepatan.Mengubah teks di halaman web.Temukan contoh cepat untuk menunjukkan kepada pengembang apa yang Anda butuhkan.
Saat Anda meluncurkan panel Inspect Element, Anda akan melihat semua pengkodean untuk situs web . Itu termasuk semua pengkodean JavaScript, CSS, dan HTML yang ada di dalamnya. Ini seperti melihat kode sumber halaman web, kecuali Anda dapat membuat perubahan pada kode tersebut. Selain itu, Anda dapat melihat perubahan apa pun yang diterapkan secara real-time.

Alat ini membuatnya sangat berharga bagi pemasar, perancang, dan pengembang untuk melihat perubahan desain apa pun sebelum menyelesaikannya. Namun, membuat perubahan dalam pengkodean dengan Elemen Inspeksi tidak bertahan selamanya. Saat Anda memuat ulang halaman, halaman akan kembali ke keadaan default.

FAQ Tambahan
Bagaimana Cara Menggunakan Perintah Elemen Inspeksi untuk Menemukan Jawaban?

Satu-satunya cara untuk menemukan jawaban menggunakan fitur Elemen Inspeksi adalah jika situs web langsung mengungkapkannya setelah pengiriman. Dalam hal ini, jawaban ada di coding.

Jika tidak, Anda cukup melihat kode untuk kuis atau tes saat menggunakan fitur Elemen Inspeksi, serta jawaban apa pun yang Anda kirimkan.
Apakah Elemen Inspeksi Ilegal?

Tidak, Alat Inspect Element tidak ilegal, ini dirancang untuk pengembang web. Melihat kode sumber untuk situs web tidak ilegal, itu hanya menjadi masalah jika Anda menggunakan informasi yang dikumpulkan untuk tujuan jahat, seperti mencoba eksploitasi, dll.
Apakah Mungkin Menonaktifkan Elemen Pemeriksaan di Browser?

Jawaban singkatnya adalah tidak.

Anda tidak dapat menonaktifkan Elemen Inspeksi di browser. Tetapi Anda dapat mengatur parameter yang mencegah pengguna melakukan tindakan tertentu seperti mengklik kanan pada halaman web. Ada banyak tutorial online untuk mengatur skrip yang tepat untuk menonaktifkan acara tertentu. Namun, Anda tidak dapat benar-benar menonaktifkan fitur Elemen Inspeksi secara keseluruhan.

Mengenal Bagian Dalam Halaman Web

Memeriksa fitur Elemen Inspeksi halaman web mungkin merupakan alat pengembang yang Anda tidak pernah tahu Anda butuhkan – bahkan jika Anda tidak membutuhkannya. t pengembang sendiri. Ini memiliki banyak aplikasi desain dan pemasaran yang dapat membuat situs web Anda berjalan lebih lancar. Dan mungkin memberi Anda keunggulan pada pesaing.

Untuk apa Anda menggunakan Elemen Inspeksi? Beri tahu kami tentang hal itu di bagian komentar di bawah.

Wagiman Wiryosukiro

Petani Sistem Informasi, tukang las plugin & themes Wordpress. Co-Founder SistemInformasi.biz. Saat ini aktif sebagai Developer & kontributor di OpenMandriva Linux.

You may also like...

%d bloggers like this: