Ada seperangkat alat penulisan web dan debugging yang tersedia di browser chrome sebagai alat bawaan yang dikenal sebagai alat pengembang Chrome. Ini menyediakan akses ke elemen-elemen browser dan aplikasi web. Kode JavaScript dapat di-debug di Developer Tools dengan mengatur breakpoint di tempat yang diperlukan.




Cara Mengakses Alat pengembang

  1. Klik kanan pada elemen halaman web mana pun dan pilih Periksa Elemen.
  2. Dari menu chrome, klik Alat (atau alat lainnya) lalu pilih Alat Pengembang.
  3. Ctrl + Shift + I di Windows dan Cmd + Opt + I di Mac juga akan membuka DevTools.
Ada delapan tab yang tersedia di jendela, yaitu :

  • Elemen: Semua elemen HTML dapat dilihat di tab Elemen. Ini memungkinkan peninjauan elemen DOM. Juga memungkinkan pengeditan saat bepergian.
  • Jaringan: Tab Jaringan memberikan pemahaman tentang sumber daya yang diminta dan diunduh melalui jaringan. Ini memungkinkan mengidentifikasi permintaan yang memakan waktu lebih lama dari yang diharapkan, karenanya membantu mengoptimalkan kode.
  • Sumber: Breakpoint dapat ditambahkan ke sumber melalui tab ini untuk men-debug kode javascript yang kompleks.
  • Linimasa: Tab ini memberikan gambaran umum tentang di mana waktu dihabiskan saat memuat halaman.
  • Profil: Tab ini membantu untuk profil waktu eksekusi dan penggunaan memori dari halaman web yang membantu dalam mengoptimalkan kode. Profiler yang tersedia di browser adalah:
  1. CPU profiler - menunjukkan di mana waktu eksekusi dihabiskan untuk fungsi JavaScript pada halaman.
  2. Heap profiler – menggambarkan distribusi memori oleh objek JavaScript dan elemen DOM terkait.
  3. JavaScript profiler – menunjukkan bagaimana waktu eksekusi skrip dihabiskan.
  • Sumber daya: Anda dapat memeriksa sumber daya yang dimuat di halaman web di halaman sumber daya. Ini juga memfasilitasi interaksi dengan Penyimpanan Lokal, Database HTML, Cache, penyimpanan, dll.
  • Audit: Tab Audit digunakan untuk menganalisis halaman saat sedang dimuat. Ini memberikan saran untuk mengurangi waktu memuat halaman.
  • Konsol: Konsol menyediakan fungsi di bawah ini untuk menguji halaman web.
  1. Informasi untuk membantu debugging
  2. Shell prompt untuk berinteraksi dengan dokumen.
  3. Mengevaluasi ekspresi JavaScript.

Tags

Post a Comment

Posting Komentar

Lebih baru Lebih lama