Cara memeriksa kode javascript di elemen inspeksi

Kebanyakan orang tidak menyadari bahwa ada harta karun alat pengembang yang mereka miliki dan tersembunyi di browser favorit mereka

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

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

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

Menggunakan Elemen Inspeksi di Google Chrome

1. Buka situs web yang ingin Anda periksa
   
   
2. Klik kanan di mana saja pada halaman dan pilih Periksa
   
   
   
   ATAU
3. Klik pada tiga titik vertikal di sudut kanan bilah alat Anda
   
   
4. Buka Lebih Banyak Alat
   
   
5. Pilih Alat Pengembang
   
   
   
   ATAU
6. Tekan tombol pintasan keyboard F12 di PC (atau CMD + Opsi + I di Mac. )
   
   

Menggunakan Elemen Inspeksi di Microsoft Edge

1. Buka situs web
   
   
2. Klik pada tiga titik vertikal di sudut kanan atas toolbar browser
   
   
3. Gulir ke bawah dan klik Lebih Banyak Alat
   
   
4. Klik Alat Pengembang
   
   
   
   ATAU
5. Klik kanan di mana saja di situs web dan klik Periksa
   
   
   
   ATAU
6. Tekan Ctrl + Shift + I
   
   
   
   

Salah satu dari ketiga metode ini akan memberi Anda hasil yang sama

Jika Anda melakukannya dengan benar, panel baru akan terbuka di bagian bawah browser Anda. Ini adalah Alat Pengembang dan menyertakan 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

1. Klik pada tiga titik horizontal di sudut atas panel Alat Pengembang
   
   
2. Pilih sisi dermaga (kiri, bawah, atau kanan) atau lepaskan ke jendela terpisah
   
   

Mengarahkan kursor di sebelah tepi bingkai panel Alat Pengembang dan menyeret akan mempersempit atau memperluas ruang kerja. Misalnya, jika Anda memilih untuk merapatkan panel ke sisi kanan jendela browser, coba arahkan kursor ke tepi kiri. Anda dapat menyeret panel untuk mengubah ukurannya saat Anda melihat kursor panah

Menggunakan Elemen Inspeksi (Khusus OS)

Meskipun banyak langkah yang terlibat mungkin telah dicakup hanya dengan menunjukkan kepada Anda cara menggunakan Inspect Element di browser, kami tetap akan 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 Inspect Element. Ini sedikit kursus penyegaran untuk Anda

1. Buka situs web
   
   
2. Klik pada tiga titik vertikal di sudut kanan atas bilah alat
   
   
3. Pilih Alat Lainnya
   
   
4. Klik Alat Pengembang
   
   

Anda juga dapat menggunakan metode klik kanan atau tombol fungsi F12 untuk membuka Alat Pengembang lebih cepat

Cara Menggunakan Elemen Inspeksi di Perangkat Android

Menjalankan Inspect Element di perangkat Android sedikit berbeda. Lihat cara membuka panel Elemen Inspeksi di Android

1. Tekan tombol fungsi F12
   
   
2. Pilih Toggle Device Bar
   
   
3. Pilih perangkat Android dari menu drop-down
   
   

Saat Anda memilih perangkat Android tertentu, Anda akan melihat bahwa versi seluler dari situs web dimuat. Dari sini, Anda bebas menggunakan fitur Elemen Inspeksi di perangkat Android dari kenyamanan desktop Anda

Metode ini berfungsi untuk browser Chrome dan Firefox karena mereka memiliki fitur di Alat Pengembang mereka yang disebut Simulasi Perangkat

Ini juga bekerja dengan cara yang sama untuk perangkat iPhone. Anda hanya perlu memilih yang benar di menu drop-down

Cara Menggunakan Elemen Inspeksi di Windows

Alat Elemen Inspeksi tidak harus khusus untuk OS, tetapi khusus untuk browser. Itu artinya Alat Pengembang adalah fitur dari browser yang Anda gunakan dan belum tentu Windows. Namun, Anda dapat mengakses panel Elemen Inspeksi 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

1. Buka situs web yang ingin Anda periksa
   
   
2. Ketuk tiga titik vertikal di sudut jendela browser
   
   
3. Gulir ke bawah dan pilih Alat Lainnya
   
   
4. Klik Alat Pengembang
   
   

Anda juga dapat menggunakan tombol fungsi F12 untuk mengakses Elemen Inspeksi lebih cepat. Juga, mengklik kanan pada halaman web dan memilih Periksa juga berfungsi

Cara Menggunakan Elemen Inspeksi di Mac

Jika Anda menggunakan Mac, browser pilihan Anda mungkin adalah Safari. Membuka Inspect Elements di Safari sedikit berbeda dengan di Chrome dan Firefox. Tapi itu sesederhana itu dengan langkah-langkah ini

1. Buka browser Safari
   
   
2. Klik Safari di tab header dan pilih Preferences dari menu drop-down
   
   
3. Klik ikon roda gigi Lanjutan yang terletak di bagian atas layar
   
   
4. Centang kotak yang bertuliskan Tampilkan menu Kembangkan di bilah menu
   
   

Melalui langkah-langkah ini mengaktifkan fitur Inspect Element 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 Periksa. Anda juga dapat menggunakan perintah tombol cepat. CMD + Option + I (periksa)

Cara Menggunakan Elemen Inspeksi di iOS

Apakah Anda ingin menggunakan fitur Inspeksi Elemen untuk melihat tampilan versi seluler halaman web di iPhone? . Tetapi sebelum Anda melihat suatu elemen, Anda perlu mengaktifkan Web Inspector untuk perangkat iOS Anda

1. Pergi ke pengaturan
   
   
2. Sekarang, pilih Safari
   
   
3. Gulir ke bawah dan ketuk Menu Lanjutan
   
   
4. Sekarang, ketuk sakelar sakelar untuk mengaktifkan Inspektur Web
   
   

Selain itu, pastikan 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 Mac Anda. Klik untuk melihat iPhone yang terhubung dan halaman web aktif di perangkat. Memilih halaman web juga membuka jendela Inspektur Web 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

Kadang-kadang, Anda akan menemukan bahwa Anda tidak dapat memeriksa halaman web, dan pilihan Periksa berwarna abu-abu jika Anda mencoba mengeklik kanannya. Anda mungkin mengira itu diblokir, tetapi ada banyak cara untuk mengatasinya

Metode 1 – Matikan Javascript

1. Masuk ke Pengaturan
   
   
2. Cari JavaScript
   
   
3. Nonaktifkan JavaScript
   
   

Metode 2 – Akses Alat Pengembang Sepanjang Jalan

Alih-alih mengklik kanan mouse untuk Memeriksa, lakukan ini

1. Buka Pengaturan di browser Anda
   
   
2. Pilih Alat Lainnya
   
   
3. Gulir ke bawah dan klik alat Pengembang
   
   

Metode 3 – Menggunakan Tombol Fungsi

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

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

Cara Menggunakan Elemen Inspeksi di Chromebook Sekolah

Jika Chromebook Anda dikeluarkan oleh sekolah, menggunakan fitur Elemen Inspeksi melibatkan beberapa langkah sederhana

1. Klik kanan atau ketuk dua jari pada halaman web dan pilih Periksa
   
   
2. Tekan Ctrl + Shift + I
   
   
   
   
3. Coba dan gunakan sumber tampilan. metode [url], seperti view-source. https. // www. wikipedia. com
   
   
   

Namun, beberapa sekolah dan organisasi memblokir fitur ini, jadi jika fitur ini tidak berfungsi untuk Anda, Anda mungkin perlu menghubungi administrator organisasi atau sekolah Anda

Cara Menggunakan Elemen Inspeksi untuk Menemukan Jawaban

Anda dapat menggunakan Elemen Inspeksi untuk menemukan jawaban atas berbagai hal seperti

• Pratinjau desain situs di perangkat seluler
  
• Cari tahu kata kunci yang digunakan pesaing
  
• Tes kecepatan
  
• Mengubah teks pada halaman web
  
• Temukan contoh cepat untuk menunjukkan kepada pengembang apa yang Anda butuhkan

Saat Anda meluncurkan panel Elemen Inspeksi, 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 kodenya. Selain itu, Anda dapat melihat perubahan apa pun yang diterapkan secara real-time

Alat ini sangat berharga bagi pemasar, desainer, dan pengembang untuk melihat setiap perubahan desain sebelum menyelesaikannya. Namun, membuat perubahan dalam pengkodean dengan Inspect Element tidak bertahan selamanya. Saat Anda memuat ulang halaman, itu akan kembali ke keadaan default

FAQ tambahan

Jika Anda bukan ahli Inspeksi Elemen setelah membaca di atas, ada lebih banyak jawaban di sini

Bagaimana Saya Menggunakan Perintah Inspeksi Elemen 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 dalam pengkodean

Jika tidak, Anda cukup melihat pengkodean untuk kuis atau ujian saat Anda menggunakan fitur Inspeksi Elemen, serta jawaban apa pun yang Anda kirim

Apakah Elemen Inspeksi Ilegal?

Tidak, alat Elemen Inspeksi tidak ilegal; . Melihat kode sumber untuk situs web tidak ilegal;

Apakah Mungkin Menonaktifkan Elemen Inspeksi di Browser?

Jawaban singkatnya adalah tidak

Anda tidak dapat menonaktifkan Elemen Inspeksi di browser, tetapi Anda dapat menyetel parameter yang mencegah pengguna melakukan tindakan tertentu seperti mengklik kanan halaman web. Ada banyak tutorial online untuk mengatur skrip yang tepat untuk menonaktifkan acara tertentu. Namun, Anda sebenarnya tidak dapat menonaktifkan fitur Inspect Element secara keseluruhan

Kenali Jeroan Halaman Web

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

Bisakah Anda melihat kode JavaScript di elemen inspeksi?

Bagaimana cara memeriksa JavaScript saya?

Bagaimana cara melihat kode sumber JavaScript di Chrome?

Bagaimana cara memeriksa kode elemen?