Bagaimana cara melihat javascript di chrome?

Oleh karena itu, kami telah membahas proses debug JavaScript langkah demi langkah di Chrome dengan menggunakan Alat Pengembang Chrome. Sehingga Anda memiliki gagasan yang jelas tentang cara men-debug JS di Chrome

Apa itu Chrome DevTool?

Chrome DevTool adalah alat pengembang web bawaan yang membantu pengembang melengkapi, mengidentifikasi & men-debug program berbasis JavaScript di Chrome. Muncul dengan pembaruan waktu nyata, mengidentifikasi masalah, dan membantu meningkatkan kinerja situs web. Saat Anda membuka Chrome DevTool, panel di sisi kanan halaman web akan terbuka yang mencakup banyak fungsi, termasuk

• Elemen . Untuk memeriksa dan mengedit atribut DOM & gaya.
• Konsol . Digunakan untuk melihat & menjalankan kode javascript.
• Sumber . Digunakan untuk debug chrome js & breakpoint.
• Jaringan . Lihat & debug aktivitas terkait jaringan.
• Aplikasi . Identifikasi penyimpanan lokal, penyimpanan sesi, cookie, dll.
• Keamanan . Sertifikat debug dan masalah keamanan lainnya.
• Memori . Digunakan untuk melacak penggunaan memori dan memperbaiki bug.
• Kinerja . Analisis kecepatan & Optimasi.
• Audit . Audit aplikasi, kinerja, aksesibilitas, SEO, dll.

Ini adalah fungsi utama yang digunakan pengembang untuk Men-debug di Chrome.

Catatan. Penting untuk mempelajari beberapa pintasan keyboard seperti DevTools.

• Untuk membuka Elemen DevTools, tekan "Command + Option + C" (Mac) atau CTRL + Shift + C (OS Lain)
• Untuk membuka panel Konsol DevTools, tekan Command + Option + J (Mac) atau CTRL + Shift + J (OS Lain)

Bagaimana cara Debug JS di Chrome?

Jika Anda seorang pengembang yang berencana untuk men-debug JavaScript di chrome, berikut adalah beberapa cara cepat untuk menggunakan DevTools untuk men-debug NodeJS dengan chrome

1. Tambahkan Breakpoint

Tujuan utama menambahkan Breakpoints adalah untuk menjeda kode. Ini membantu pengembang untuk menguji setiap baris kode dan melanjutkan setiap kali proses selesai. Untuk program JavaScript besar, breakpoint terbukti berguna dalam mengidentifikasi bug

Tujuan utama menambahkan Breakpoints adalah untuk menjeda kode. Ini membantu pengembang untuk menguji setiap baris kode dan melanjutkan setiap kali proses selesai. Untuk program JavaScript besar, breakpoint terbukti berguna dalam mengidentifikasi bug.  

Berikut proses penambahan Breakpoint dengan contoh .

Pada Panel Sumber DevTools, klik panel navigasi kiri dan pilih. js untuk membuka baris kode untuk menambahkan breakpoint

Klik kanan pada baris di mana Anda ingin menambahkan breakpoint dan pilih “Add Breakpoint. ”

Oleh karena itu setelah menambahkan breakpoint, ketika kode berjalan, kode berhenti di breakpoint.  

2. Lihat/Buat Perubahan pada Properti Lokal, Penutupan, dan Global

Setelah Anda menjeda kode dengan menambahkan Breakpoints, saatnya untuk melihat & mengedit properti lokal, penutupan, dan global. Pada langkah ini, Anda dapat menguji fungsionalitas dan melihat apakah hasilnya memuaskan atau perlu diedit lebih lanjut. Dengan Breakpoints, lebih mudah menjalankan bagian kode tertentu untuk memeriksa fungsi.  

Dengan mengklik panel "Cakupan", sebuah panel terbuka yang menampilkan informasi berguna untuk memperbaiki bug.  

Baca Selengkapnya . Titik henti untuk Desain Web yang Responsif

3. Buat, Simpan, dan Jalankan Cuplikan

Sekarang, Anda dapat menggunakan Cuplikan yang membantu membuat, menyimpan, dan menjalankan skrip di bagian mana pun. Untuk menambahkan cuplikan, klik menu Cuplikan di panel kiri.  

Klik “+ Cuplikan Baru” dan tulis kode di panel tengah.  

Untuk menyimpan cuplikan, tekan Command + S (Mac) & Ctrl + S (OS lain)

Untuk menjalankan cuplikan, klik "Jalankan" dan tekan Command + Enter (Mac) atau Ctrl + Enter (OS lain)

4. Lihat Tumpukan Panggilan

Dengan Chrome DevTools, Anda dapat melihat tumpukan panggilan. Ini terutama digunakan untuk program JavaScript yang memiliki banyak fungsi asinkron dan menunjukkan kesalahan.  

Saat men-debug program besar, tumpukan panggilan adalah opsi bagus yang membantu melihat fungsi program dan memudahkan untuk mengidentifikasi kesalahan dari fungsi mana.  

Dengan mengklik Panel "Sumber", Anda dapat membuka Call Stack untuk melihat fungsinya.  

5. Blackboxing

Saat men-debug program javascript, beberapa skrip berfungsi tanpa menunjukkan kesalahan apa pun dan perlu diabaikan untuk debugging. Di sinilah penggunaan Blackboxing masuk, yang membantu Anda mengabaikan skrip spesifik ini dari debugging. Tanpa Blackboxing, sangat sibuk untuk mengomentari setiap baris kode.  

Untuk menggunakan Blackboxing, pilih file skrip yang ingin Anda abaikan

• Sekarang, klik pada panel kiri di Tab Sumber dan klik kanan pada panel tengah untuk “Tambahkan skrip ke daftar abaikan. ”

• Setelah Anda menggunakan Blackboxing untuk menambahkan skrip tertentu ke daftar abaikan, Anda dapat melakukan debug untuk mengidentifikasi & menyelesaikan kesalahan.  

Dengan Chrome DevTools, men-debug JS di Chrome menjadi proses yang lebih mudah.  

Beberapa Kesalahan Umum JavaScript dengan Solusi

Berikut adalah beberapa kesalahan umum yang terjadi di JavaScript sehingga Anda dapat mengidentifikasi dan menyelesaikan masalah ini dengan lebih cepat

Kesalahan terkait DOM

DOM juga dikenal sebagai Model Objek Dokumen. Ini memainkan peran utama dalam antarmuka situs web berbasis JavaScript. Ini menangani antarmuka untuk membuat situs web ramah pengguna, interaktif, dan responsif seluler. Setiap kali pengembang membangun program berbasis JavaScript, DOM muncul sebagai kesalahan paling umum yang harus dikerjakan oleh setiap pengembang

Baca Selengkapnya . Cara menemukan Bug di Situs Anda

Mari kita pahami dengan sebuah contoh

If the code below runs on the Chrome browser, it shows an error that counts as DOM error. This error shows because the Chrome browser isn’t aware of the

element. 

<!DOCTYPE html>
<html>
<body>
<script> 
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>

Now, this error can be easily resolved by adding

in the beginning of the script. 

Sepertinya

<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script> 
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script> 
</body>
</html>

_

Sekarang, kode dapat berjalan dengan sukses

Masalah Kompatibilitas Lintas-Browser

Masalah kompatibilitas lintas-browser adalah masalah utama yang dihadapi developer saat mengerjakan situs web atau aplikasi web berbasis JavaScript. Situs web berbasis JavaScript ini mungkin tidak kompatibel dengan browser web yang berbeda, jadi menyelesaikan masalah ini sangat penting.

Berikut adalah beberapa kesalahan lintas-browser umum yang terjadi di JavaScript

• Fitur JavaScript modern di browser lama. Saat pengembang membuat program berbasis JavaScript dengan fitur modern, program tersebut mungkin tidak mendukung versi browser lama.
• Mengendus Peramban. Sniffing browser juga dikenal sebagai Deteksi Browser. Dalam proses ini, setiap kali pengunjung datang ke situs web dari browser apa pun, sebuah kode dijalankan untuk menjalankan program yang mendukung browser tertentu. Namun, kode tersebut mungkin tidak berjalan dengan baik di browser yang berbeda.
• Menggunakan Perpustakaan. Ketika pengembang membuat program JavaScript apa pun, beberapa perpustakaan asli & pihak ketiga tidak didukung pada browser yang berbeda.

Larutan

BrowserStack Live adalah infrastruktur pengujian berbasis cloud tempat penguji QA dapat mengakses lingkungan pengujian yang kuat bersama dengan cloud perangkat nyata of  3,000+ real devices and browsers with different versions.

Tim dapat mengakses laporan yang cepat & akurat sehingga developer dapat mengidentifikasi dan mengatasi bug dengan cepat. Cukup buat akun gratis di BrowserStack, pilih perangkat atau browser apa saja, dan mulai uji coba di berbagai browser dan versi

Debug JS di Chrome dengan BrowserStack

Kesalahan berbasis sintaks

Sangat umum untuk melihat kesalahan sintaks dalam ratusan baris kode di mana kesalahan terjadi, seperti tanda kurung yang hilang, tanda kurung yang tidak cocok, atau kesalahan sintaks. Pengembang perlu menyelesaikan masalah ini

Untuk mengatasi masalah ini, pengembang harus mengikuti sintaks standar untuk mengurangi kemungkinan mendapatkan kesalahan

Mari kita pahami dengan sebuah contoh

Ketika kita menjalankan kode yang diberikan di bawah ini

if((x > y) && (y < 77) {
//more code here
}

Kemudian, Anda dapat melihat tanda kurung yang hilang yang menunjukkan kesalahan

Sintaks yang benar seharusnya

if ((x > y) && (y < 77)) {

        //more code here

    }

Sekarang, kode dapat berjalan dengan sukses tanpa menunjukkan kesalahan sintaks apa pun.  

Ini adalah beberapa kesalahan JavaScript paling umum yang dihadapi pengembang saat mengerjakan program JavaScript.  

Bacaan Lanjutan . 5 Tes yang Harus Anda Jalankan Sebelum Meluncurkan Situs Web

Kesimpulan

Untuk men-debug JavaScript di Chrome, DevTools adalah solusi satu atap yang mempermudah proses debug. Sehingga pengembang dapat mengidentifikasi dan memperbaiki bug pada program berbasis JavaScript. Debug seluler Chrome juga menjadi lebih mudah dengan hasil yang ditentukan.

Namun, jika Anda mencari kecepatan, interaktivitas, dan akurasi, BrowserStack Live adalah platform yang paling disukai untuk diuji oleh penguji QA . Cukup daftar untuk mendapatkan akun gratis, pilih kombinasi perangkat-browser-OS, dan mulai men-debug JS.

Harus Dibaca. 5 Cara untuk Menguji JavaScript Secara Instan di Peramban

Pengujian Manual Real Device Cloud

Apakah postingan ini bermanfaat?

Ya, Terima Kasih Tidak Juga

Kami menyesal mendengarnya. Silakan bagikan umpan balik Anda sehingga kami dapat melakukan yang lebih baik

Terima kasih atas umpan balik anda

Tag

Pengujian Manual Real Device Cloud

Artikel Terkait

Cara mengatasi Masalah Kompatibilitas Lintas Browser JavaScript

Masalah umum kompatibilitas browser Javascript dan cara mengatasinya. Uji JavaScript situs web Anda

Belajarlah lagi

Cara Mengurangi Waktu Muat Halaman di Javascript

Apakah JavaScript memperlambat situs web Anda?

Belajarlah lagi

Praktik Terbaik Jenkins yang harus diketahui setiap Pengembang

Mencari cara terbaik untuk menggunakan Jenkins secara efektif?

Bagaimana cara melihat kode JavaScript di Chrome?

Buka Chrome dan arahkan ke halaman web yang berisi JavaScript yang ingin Anda lihat. Klik kanan area kosong di halaman web dan pilih Periksa di menu munculan untuk membuka alat pengembang Chrome .

Bagaimana cara melihat kode JavaScript di situs web?

Jika ingin melihat kode Javascript, klik kanan halaman, lalu pilih Inspect, lalu arahkan ke baris javascript dengan menyorot atau memilih baris tersebut dengan. js dan kemudian posisikan penunjuk Anda di. js, klik kanan & pilih Reveal in Sources panel

Mengapa JavaScript tidak terbuka di Chrome?

Google Chrome . " In the "Settings" section click on the "Show advanced settings..." Di bawah "Privasi", klik "Pengaturan konten. ". Saat jendela dialog terbuka, cari bagian "JavaScript" dan pilih "Izinkan semua situs menjalankan JavaScript (disarankan)". Klik tombol "OK" untuk menutupnya.

Bisakah Anda melihat JavaScript di inspeksi?

Dengan fitur Inspect Element, Anda dapat melihat cara kerja bagian dalam situs web. Meskipun Anda hanya dapat melihat markup frontend seperti HTML, CSS, dan terkadang JavaScript , ini memberi Anda cara untuk melihat dengan tepat bagaimana pengembang membuat situs web.