Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Modern Debugging Experience: Bagian 1

by
Read Time:12 minsLanguages:
This post is part of a series called Modern Debugging Experience.
Modern Debugging Experience: Part 2

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)


Dalam seri tutorial dua bagian ini, kita akan melihat penulisan & debug kode JavaScript menggunakan perkakas modern seperti Chrome DevTools.

Pada bagian 1, Anda akan mendapatkan tampilan pengantar pada berbagai panel di DevTools dan alur kerja apa yang cocok untuk mereka. Juga akan ada fokus untuk menulis dan mengeksekusi kode JavaScript melalui browser daripada editor kode.

1. Apa Itu Browser DevTools?

Developer Tools adalah fitur yang disediakan oleh browser yang memliliki satu set utilitas untuk memeriksa, berinteraksi dengan dan debug halaman web. Browser DevTools biasanya dibundel dengan semua browser modern termasuk Chrome, Firefox, Safari, Opera, dan Internet Explorer. Tutorial ini akan fokus secara khusus pada bagian DevTools Chrome Canary, tapi semua fitur yang tercantum di sini akan menjadi bagian dari Chrome Stable segera.

Apa yang dapat DevTools ditawarkan kepada pengembang JavaScript?

Platform web terbuka memungkinkan Anda untuk Klik-Kanan> Inspect Elemen pada halaman web apa pun dan menemukan internal dari itu, tetapi JavaScript selalu lebih di luar jangkauan daripada CSS (Cascading Style Sheets). Sementara DevTools dikemas dengan fitur-fitur yang berkaitan dengan styling halaman, ada juga tumpukan fungsi yang kurang dikenal yang memungkinkan Anda untuk melihat, menulis, dan men-debug JavaScript dengan berbagai cara, baik itu di halaman Anda sendiri atau pada halaman situs pihak ketiga.

Mengapa menggunakan DevTools untuk alur kerja JavaScript Anda?

Jika Anda seorang pengembang front-end web, sebaiknya Anda menjadi sadar akan utilitas JavaScript yang DevTools yang ditawarkan. Include fitur tingkat:

  • setidaknya dua didedikasikan panel yang menggunakan kasus melayani hampir seluruhnya untuk JavaScript
  • lingkungan pengembangan yang cepat diatur, dengan lingkaran umpan balik yang cepat
  • memajukan kemampuan debugging dengan breakpoints

2. DevTools Overview

Bagian ini akan mencakup elemen UI DevTools, khususnya sumber Panel dan Panel konsol, karena ini adalah dua panel yang akan digunakan untuk sisa dari tutorial ini.

Sumber Panel Interface

Sources panel interfaceSources panel interfaceSources panel interface

Perhatikan beberapa tata letak karakteristik:

  • DevTools adalah dalam keadaan yang undocked. Anda dapat memilih untuk dock ke kiri, bawah atau kanan jendela utama.
  • Panel sumber di Panel sumber yang dipilih di sidebar kiri.
  • Panel di sidebar kanan berada dalam keadaan yang diperluas.

Panel sumber menyediakan Anda dengan editor kode, dan mendukung sintaks penyorotan untuk banyak format file yang umum seperti HTML, CSS, JavaScript, CoffeeScript, LESS, dan Sass. Code editor hadir di dalam panel utama. Tepat di atas panel utama Anda dapat melihat tab yang terkait dengan file yang terbuka.

Di Panel Sumber di dalam sidebar kiri ada pohon file yang biasanya menunjukkan aset yang telah diperiksa halaman yang dimuat. Aset dikelompokkan berdasarkan domain, dan folder dapat berada dalam keadaan yang diperluas atau diciutkan. Jika Anda mengklik satu kali aset, itu akan terbuka di editor kode.

Bilah sisi kanan berisi kontrol untuk debugging JavaScript, dan setiap panel dapat berada dalam keadaan diperluas atau diciutkan. Berbagai tingkat output ditampilkan di sini ketika JavaScript dijeda pada breakpoint.

Console Panel

Console panelConsole panelConsole panel

Panel konsol memungkinkan Anda untuk melihat output diproduksi oleh diagnostik logging (seperti console.log) tetapi juga untuk menulis dan mengevaluasi JavaScript dalam konteks halaman yang sedang diperiksa. Panel konsol mendukung kedua Console API dan Command Line API. Berikut adalah beberapa fungsi yang terkena oleh masing-masing API, bersama dengan deskripsi output mereka.

Console API

consolelogconsolelogconsolelog

consoleerror

Command Line API

command line APIcommand line APIcommand line API

Script

Bagian atas Panel konsol berisi beberapa kontrol seperti ditunjukkan di bawah.

Console panelConsole panelConsole panel
  • Tidak tampil simbol (lingkaran dengan garis miring terbalik) membersihkan konsol. Hal ini berguna karena ketika lebih banyak pesan dari yang diinginkan dalam pandangan dan Anda ingin menghapusnya. Anda juga dapat menggunakan pintasan Command-K untuk menghapusnya, atau melaksanakan fungsi clear(), yang merupakan bagian dari API baris perintah.
  • Filter membuka sebuah bar dengan penyaringan kontrol, termasuk kotak input. Jika Anda hanya tertarik untuk mencari pesan kesalahan, pilih opsi filter Errors. Atau masukkan string biasa digunakan sebagai filter.
  • Pilih menu (<top frame>) menyediakan pilihan untuk konteks eksekusi JavaScript yang tersedia untuk beralih ke. Gunakan ini bila Anda ingin Anda JavaScript untuk dievaluasi dalam konteks sebuah IFrame atau ekstensi Chrome misalnya.

Panel Konsol adalah salah satu dari beberapa panel yang dapat Anda hamparkan di atas panel lain di DevTools (Elemen, Jaringan, Sumber) untuk menyediakan alur kerja yang ditingkatkan. Jika Anda menemukan diri Anda secara teratur kembali ke Panel Konsol, buka panel Konsol dengan menekan tombol Escape.

3. Melihat JavaScript Menggunakan DevTools

Bagian ini akan fokus menggunakan DevTools untuk melihat resource JavaScript yang digunakan situs. Sebelum melanjutkan, disarankan Anda menonaktifkan cache browser melalui DevTools Untuk melakukan ini, arahkan ke Settings > General dan Aktifkan checkbox berjudul Disable cache (saat DevTools terbuka). Hal ini memastikan Anda selalu mendapatkan versi segar aset.

Alur Kerja di Situs Pihak Ketiga

Navigasikan ke HTML5Please.com, sebuah situs yang menjelaskan kesiapan fitur Web Platform. Buka DevTools menggunakan Command-Shift-I atau dengan memilih Inspect Element dari menu konteks halaman. Kepala di atas untuk Sources Panel dan perhatikan struktur pohon file yang ditampilkan di sidebar kiri. Hal ini tidak terdengar dari situs web untuk menyimpan JavaScript mereka dalam folder seperti "js" atau "script", begitu Anda sudah tahu di mana untuk melihat. Buka file script.js dalam folder js. Perhatikan beberapa fitur dari editor kode yang dapat membuktikan berguna ketika Anda melihat atau mengedit kode JavaScript:

  • full syntax highlighting
  • nomor baris dan kolom kursor
  • tab baru yang sesuai dengan file terbuka
  • kemunculan kata yang dipetakan ke pilihan saat ini
  • brace matching 
  • go-to definition
go-to definitiongo-to definitiongo-to definition

Gunakan fitur go-to definition untuk mencari atau menemukan metode atau fungsi JavaScript dengan cepat. Anda dapat membuka jendela modal go to definition melalui pintasan Command-Shift-P. Jika Anda tahu nama metode atau fungsi yang Anda mencari, ketik go-to definition di kotak pencarian; saat Anda mengetik, hasil akan diperbaharui secara real time. Setiap hasil berisi nama metode yang cocok (jika ada) dan nomor baris yang ditentukan. Gunakan Enter untuk memilih hasil pencarian, dan Anda kemudian mendarat di baris kode di mana fungsi tersebut didefinisikan.

Sekarang buka modernizr-2.0.min.js di folder js/libs. Fakta bahwa file ini adalah minified membuatnya lebih sulit untuk dilihat. Pilih Pretty Print agar DevTools menerapkan format lebih intuitif ke file, menggunakan jeda baris dan indentasi. Fitur Pretty Print bekerja untuk CSS dan JavaScript.

Simpan JavaScript Eksternal ke Sistem File

Setiap file JavaScript dalam pohon file memiliki menu konteks, jadi bukalah menggunakan klik kanan. Perhatikan beberapa opsi yang berguna untuk mengambil file secara offline untuk digunakan nanti.

  • Open link in new tab: menggunakan ini jika Anda ingin memeriksa informasi jaringan lebih lanjut di tab yang berdedikasi (melalui jaringan Panel).
  • Save As: gunakan ini jika Anda ingin membuat salinan file offline di sistem file Anda.
  • Copy Link Address: menggunakan ini jika Anda ingin berbagi URL di tempat lain.

Cari JavaScript di Network Panel

Network Panel, selain hanya menunjukkan kepada Anda apa yang resources halaman telah dimuat, juga akan menampilkan data dan informasi lainnya.

  • Initiator: apa yang menyebabkan skrip untuk diunduh
  • DOMContentLoaded (biru) dan Load events (merah): representasi berbasis timeline, visual Kapan peristiwa kebakaran
  • Size: ukuran aset, termasuk ukuran Gzip

Menggunakan HTML5Please.com sebagai contoh sebuah situs web, ikuti bersama dengan langkah-langkah berikut:

  1. Menavigasi ke Network Panel dan clear log.
  2. Refresh halaman.
  3. Filter untuk JavaScript log dengan memilih filter Scripts.

Script pertama, modernizr-2.0.min.js, memiliki nilai html5please.com/:17 untuk inisiator. Hal ini menunjukkan itu sumber HTML yang dimulai download script (bukan sebuah loader script, misalnya). Klik pada inisiator, dan Anda akan diarahkan ke baris kode di Panel sumber yang referensi file:

Jika skrip disisipkan secara dinamis (dengan pemuat skrip misalnya), kolom inisiator di Panel Jaringan dapat menyediakan susunan panggilan JavaScript yang berkaitan dengan panggilan yang terjadi hingga ke titik di mana skrip disisipkan secara dinamis. ke dalam DOM.

Initiator column in Network PanelInitiator column in Network PanelInitiator column in Network Panel

Anda dapat mengeklik setiap panggilan dalam tumpukan panggilan untuk menavigasi ke bagian kode yang relevan di Panel Sumber.

Code in the Sources PanelCode in the Sources PanelCode in the Sources Panel

4. Menulis JavaScript Menggunakan DevTools

Di bagian 'Melihat JavaScript menggunakan DevTools', saya menjelaskan cara melihat informasi, metadata, dan kode sumber pada aset JavaScript. Bagian ini akan memeriksa cara Anda dapat menulis JavaScript menggunakan DevTools.

Konsol Panel

Gunakan Console Panel untuk menulis satu kalimat JavaScript cepat dengan hasil yang langsung. JavaScript dijalankan dengan konteks halaman yang sedang diperiksa. Melaksanakan beberapa JavaScript dalam Panel konsol dengan menekan Enter setelah memasukkan beberapa kode.

Lihat Console API dan API Command Line untuk daftar tersedia metode dan fungsi.

Tips

Meskipun Panel Konsol relatif sederhana, ada beberapa kiat kecil untuk meningkatkan alur kerja Anda:

  • Menggunakan Shift-Enter untuk baris baru-ini memungkinkan Anda untuk menulis beberapa baris kode.
  • Jalankan keys(window) untuk mendeteksi variabel global pada halaman aktif.
  • Menggunakan $_ penolong untuk mengambil hasil terakhir perintah sebelumnya.

Anda dapat menemukan Panel Konsol untuk menjadi kandidat yang baik untuk bereksperimen dengan cepat dengan JavaScript untuk menemukan apa hasil dari ekspresi tertentu. Namun, ketika Anda mulai menulis JavaScript yang lebih kompleks, Anda dapat dengan mudah menemukan batasan:

  • Kurangnya highlighting sintaks dapat menurunkan readability.
  • Indentasi harus dilakukan secara manual dengan karakter spasi.
  • Fitur yang tidak ada biasanya ditampilkan dalam editor kode.

Panel Konsol tidak berniat untuk menjadi pengganti editor kode atau bahkan alternatif. Berikut ini daftar beberapa kasus di mana Panel Konsol dapat berguna:

  • menggunakan fitur autocomplete untuk pencarian properti
  • mengetahui perbedaan antara call() JavaScript dan metode apply() dengan mengeksekusi mereka inline dan mengamati hasil

Sources Panel

Panel utama panel sumber berisi kode editor dengan kemampuan pengeditan dasar.

CodeMirror

Editor itu sendiri didukung oleh CodeMirror, text editor yang kuat diimplementasikan menggunakan JavaScript. DevTools mengimpor editor CodeMirror ke basis kodenya sendiri dan secara selektif memungkinkan berbagai fitur yang pada gilirannya tersedia untuk setiap pengguna Chrome.

Saat mengedit JavaScript (di antara bahasa lain yang didukung), editor Panel Sumber berisi sejumlah utilitas seperti:

  • Autocomplete suggestions: menerima saran untuk kata yang mungkin Anda coba ketikkan. Ini didasarkan pada properti tertulis yang ada dalam file yang sama. Misalnya, document ini tidak disarankan setelah mengetik di docu kecuali jika sudah ada setidaknya satu terjadinya dokument word pada file yang sama.
  • Search and replace: untuk membuka kotak pencarian, klik Command-F. Hasil yang cocok yang digariskan dalam kode secara real time. Memeriksa checkbox Replace menyediakan kemampuan mencari dan mengganti.
  • Keyboard Shortcuts: Berbagai pintas ada, mirip dengan yang ditemukan dalam editor kode seperti Sublime Text. Misalnya, gunakan Command-/ beralih komentar, Command-D untuk memilih kata berikutnya yang mirip dengan kata yang di pilih, dan banyak lagi seperti yang didokumentasikan di halaman shortcut Chrome Developer Tools resmi.

Mengedit JavaScript Secara Langsung

Fitur ini, lebih dikenal sebagai Live Edit, memberi Anda kemampuan untuk mengedit halaman kode JavaScript melalui DevTools dan memiliki perubahan yang berlaku untuk halaman segera tanpa refresh halaman. Ada tidak ada UI tertentu menggunakan ini; Anda hanya menulis ulang bagian dari kode JavaScript dan tekan Command-S untuk menyimpannya.

Bagaimana cara kerjanya di balik layar dijelaskan di bawah ini, tetapi pertama-tama, pertimbangkan prasyarat berikut (ini tidak tergantung pada Live Edit):

  1. Halaman yang menggunakan script.js diload di Chrome melalui halaman web.
  2. script.js di parse, dievaluasi, dan disusun ke dalam kode mesin melalui JavaScript V8 Engine.

Inilah yang terjadi di balik layar fitur Edit Langsung, mempertimbangkan poin sebelumnya:

  1. Anda membuka script.js dalam editor kode DevTools. Menganggaplah ada tombol pada halaman web. Pada klik tombol, event listener mengeksekusi fungsi anonim.
  2. Anda memodifikasi fungsi anonim untuk menambahkan pernyataan console.log dan menyimpan file.
  3. Isi teks mentah script.js yang disuntikkan kembali ke V8 engine untuk diproses.
  4. Perbandingan dibuat antara script.js baru dan yang lama. Penghapusan, penambahan dan modifikasi yang disimpan.
  5. V8 mengkompilasi JavaScript modifikasi dan patch script.js dengan perubahan dikompilasi.

Live Edit berfungsi paling baik dengan sedikit modifikasi daripada membuat keseluruhan file JavaScript untuk aplikasi Anda. Skenario debug bekerja dengan baik dengan Live Edit.

Workspaces

Workspaces bukanlah sebuah komponen penting dari debug JavaScript melalui DevTools. Namun, tergantung pada kebutuhan Anda, itu dapat mempercepat alur kerja debugging Anda. Workspace adalah fitur dari DevTools yang memungkinkan Anda untuk memodifikasi isi dari folder pada sistem file dengan membuat perubahan kode di DevTools.

Jika Anda sedang melihat sebuah proyek yang disajikan secara lokal meskipun web server, seperti di http://localhost:3000/ dan proyek yang ada pada sistem file Anda di ~/development/project, misalnya, Anda dapat mengajar DevTools tentang pemetaan antara dua dan menggunakan kemampuan Live mengedit dengan kemampuan save-to-disk. Workspace memungkinkan alur kerja berikut:

  1. Setelah Anda memerintahkan DevTools tentang mapping antara laman yang sedang Anda lihat dan sumber pada sistem file Anda, Anda dapat melihat kode sumber di Source Panel.
  2. Anda mengalami kesalahan JavaScript sehingga ketika melakukan debug, Anda membuat perubahan di Source Panel.
  3. Anda daoat menyimpan perubahan Anda menggunakan Command-S.

Di langkah 3, menyimpan akan menimpa file sumber asli.

Ssource Maps

Source Maps memecahkan masalah yang umum ketika berhadapan dengan kode sumber yang diproses atau disusun menjadi sesuatu yang lain. Contohnya:

  • Kode JavaScript yang minified dan digabungkan sebagai bagian dari build sistem
  • Kode ECMAScript 6 yang transpiled ke dalam kode ES5 sehingga kompatibel dengan semua browser modern
  • Kode CoffeeScript yang akan disusun ke dalam JavaScript

Masalahnya adalah sebagai berikut: ketika melakukan debug pada versi kode yang diproses, akan sulit untuk memahami bagaimana kode sumber asli Anda memetakan ke apa yang Anda lihat selama proses debugging. Jika Anda mendapatkan kesalahan di konsol DevTools untuk situs web produksi, Anda biasanya harus mengakhiri versi kode JavaScript yang di-minified dan digabung, yang memiliki sedikit kemiripan dengan file sumber yang Anda tulis.

Source Map adalah file yang dihasilkan sebagai bagian dari proses kompilasi yang tersedia untuk kasus penggunaan yang tercantum sebelumnya. DevTools dapat membaca file Source Map untuk memahami bagaimana file yang dikompilasi memetakan ke file asli.

Dua kode snipet (sumber File—app.js dan Transpiled file—compiled.js) menunjukkan sumber peta debugger ramah kode.

Contoh 1. Source File—app.js

Perhatikan bahwa file sumber app.js menggunakan fitur kompatibel Ecmascript 6 yang dikenal sebagai Array iterator.

Contoh 2. Transpiled File—compiled.js

Perhatikan compiled.js yang direferensikan oleh tag script pada halaman HTML, dengan Traceur runtime, dan akhirnya dibuka di browser.

compiledjs screenshotcompiledjs screenshotcompiledjs screenshot

Bahkan JavaScript yang dikompilasi memiliki pernyataan console.log pada baris 6. DevTools dapat menunjukkan dengan tepat di mana pernyataan console.log ada dalam file sumber asli (Source Map debugging), yang pada baris 2. Breakpoint berfungsi seperti yang diharapkan. Di belakang layar, JavaScript dikompilasi dievaluasi dan dieksekusi, tapi DevTools menyajikan aset yang berbeda sebagai versi browser yang dievaluasi.

Snippets

Fitur snippet DevTools menyediakan cara cepat untuk menulis kode JavaScript yang lain dan menjalankannya. Semua JavaScript dijalankan melalui Snippet dijalankan dalam konteks halaman saat ini. Melaksanakan Snippet DevTools mirip dengan menjalankan Bookmarklet pada halaman. Anda mungkin merasa lebih baik menulis JavaScript tertentu dalam snippet sebagai lawan dari Panel Konsol karena alasan yang berkaitan dengan lingkungan pengeditan kode yang lebih baik. Cuplikan Anda disimpan dalam Penyimpanan Lokal dari DevTools.

Untuk menggunakan Snippet:

  1. Pastikan sidebar kiri terlihat dalam Sources Panel dan pilih tab Snippets di sidebar (bersama tab "Sources" dan "Content Scripts").
  2. Klik kanan di sidebar kiri dan pilih New untuk membuat Snippet baru.
  3. Beri nama snippet baru Anda.
  4. Tulis console.log('Hello'); dalam code editor.
  5. Tekan Command-Enter dan melihat hasil yang dihasilkan di Panel konsol.

Anda dapat menemukan sejumlah snippet sudah ditulis dalam repositori DevTools Snippets ini.

Itu untuk bagian 1 dari pengalaman Debugging Modern. Di bagian 2, kita akan mengambil melihat beberapa fitur debugging dan juga beberapa ekstensi yang dapat membantu dengan ini.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.