Sementara IE tidak pernah memiliki reputasi terbaik sebagai browser yang ramah pengembang, versi terbarunya telah membuat banyak langkah besar di bidang itu.
oleh
Stuart Ashworth
·Jun. 25, 18 · TutorialMenyukai
Komentar
Menyimpan
Menciak
Membagikan
35. 32 ribu Tampilan
Bergabunglah dengan komunitas DZone dan dapatkan pengalaman anggota penuh
Gabung GratisArtikel ini akan berfokus pada debug kode JavaScript di dalam Alat Pengembang Internet Explorer 11. Terlepas dari kritik yang diterima Internet Explorer secara teratur, alat pengembang yang dibangun di IE11 menjadikan pengembangan dan debugging kode di browser sebagai tugas yang tidak ditakuti dengan cara yang sama seperti di tahun-tahun sebelumnya. Alat peramban membanggakan banyak fitur dari peramban lain yang lebih berfokus pada pengembang seperti Chrome dan Firefox
Pada artikel ini, kami akan bekerja melalui debugging contoh di Internet Explorer
Langkah-langkah yang akan kita ikuti adalah
- Contoh Pengenalan Proyek
- Menganalisis Laporan Kesalahan Raygun
- Jelajahi Anatomi Alat Pengembang
- Tambahkan Breakpoint ke Kode Anda
- Telusuri Kode Anda
- Tentukan Status Aplikasi Anda
- Perbaiki Bug
Jadi, mari selami
Langkah 1. Contoh Pengenalan Proyek
Untuk mendemonstrasikan cara men-debug aplikasi dengan Alat Pengembang Internet Explorer, saya akan menggunakan formulir Add Person sederhana. Formulir ini memungkinkan Anda memasukkan nama depan, tengah, dan belakang. Saat mengklik tombol 'Simpan', formulir akan melakukan sedikit pemrosesan, dan data akan dikirim ke server (imajiner) Anda
Kode untuk formulir ini memiliki tiga fungsi
- Penangan klik
- Fungsi string kapitalisasi
- Fungsi simpan
Sayangnya, setelah mengirimkan ini ke produksi pada Jumat malam, Anda mulai melihat laporan kesalahan masuk ke dasbor Anda. Ada bug, dan Anda harus memperbaikinya. Cepat
Langkah 2. Menganalisis Laporan Kesalahan Raygun
Laporan kesalahan yang masuk ke Raygun memiliki banyak informasi yang dapat Anda gunakan untuk menemukan dan memperbaiki kesalahan, jadi mari kita lihat apa yang sedang kita hadapi
Informasi yang Anda perlukan untuk men-debug kesalahan terletak di modul Stack trace
Bagian Message dari Stack trace adalah ikhtisar singkat tentang apa yang salah. Dalam hal ini, metode toUpperCase_ dipanggil pada nilai yang tidak ditentukan
Pelacakan tumpukan memberi tahu Anda di mana kesalahan terjadi dan urutan pemanggilan fungsi yang mengarah ke sana. Seperti yang Anda lihat pada tangkapan layar di atas, kesalahan terjadi pada fungsi capitalizeString pada baris 20 dari file index.js
Mengetahui baris mana yang memicu kesalahan berarti Anda dapat melompat langsung ke tempat terjadinya kesalahan dan mulai menggali apa yang menyebabkan masalah
Langkah 3. Menjelajahi Anatomi Alat Pengembang
Langkah pertama adalah meluncurkan aplikasi di Internet Explorer dan membuka Alat Pengembang. Anda dapat melakukan ini dengan keyboard menggunakan tombol F12 atau dengan memilih "Alat Pengembang F12" di menu "Alat"
Alat Pengembang sekarang akan terbuka di dalam tab browser, dan tab DOM Explorer akan aktif. Ubah ke tab Konsol dengan mengklik namanya. Tab Konsol memungkinkan Anda untuk mengeksekusi kode JavaScript sewenang-wenang kapan saja atau untuk melihat keluaran apa pun dari panggilan console.log
Coba masukkan alert('Hello!'); dan tekan Enter—Anda akan melihat lansiran langsung muncul
Tab Konsol adalah alat debugging yang berharga, sehingga Anda dapat menggunakannya sebagai alas awal untuk mencoba kode dan mengevaluasi variabel saat Anda mendiagnosis masalah Anda
Untuk men-debug kode, pertama-tama Anda harus dapat menelusuri kode sumber di Alat Pengembang. Anda melakukan ini di tab Debugger
Anda dapat mengakses tampilan hierarki dari semua file sumber yang dimuat ke halaman dengan mengklik tombol di kiri atas tab. Anda dapat menavigasi file di sini seperti yang Anda lakukan di IDE, karena konten ditampilkan di panel tengah
Panel kanan memberi Anda semua opsi debug, yang akan saya bicarakan nanti
Jika Anda memiliki banyak file, Anda dapat mencarinya dengan mengetikkan nama file ke dalam kotak teks di bagian atas browser file
Di aplikasi, Anda tahu masalahnya terletak pada file index.js, jadi pilih dari daftar file untuk melihat isinya
Langkah 4. Tambahkan Breakpoint ke Kode Anda
Sekarang setelah Anda dapat melihat kode Anda, kami ingin dapat melewatinya satu per satu untuk melihat di mana ada yang salah. Untuk melakukan ini, kami menggunakan breakpoint. Breakpoint adalah penanda pada titik tertentu dalam kode yang menghentikan eksekusi sehingga Anda dapat memeriksa status kode pada titik waktu tersebut, dan melanjutkan eksekusi baris demi baris
Ada beberapa cara berbeda untuk menambahkan breakpoint yang akan saya bahas di sini
Titik Henti Acara
Anda dapat memaksa eksekusi berhenti saat peristiwa tertentu (atau kumpulan peristiwa) terjadi di halaman. Menggunakan bagian Breakpoints di panel debugging, Anda dapat mengklik tombol "Tambahkan breakpoint acara" dan pilih acara yang ingin Anda hentikan dari daftar. Secara opsional, Anda dapat menambahkan ekspresi kondisi untuk mencegah eksekusi dihentikan setiap saat
Breakpoint Garis
Mungkin cara yang paling umum untuk menambahkan breakpoint adalah menemukan jalur tertentu yang ingin Anda hentikan dan menambahkannya di sana. Arahkan ke file dan baris yang Anda minati dan klik nomor baris. Penanda merah akan ditambahkan pada baris itu dan eksekusi akan berhenti setiap kali menyentuh baris kode ini. Pada tangkapan layar di bawah ini akan berhenti di Baris 7 dari index.js
Titik Henti Programatik
Anda juga dapat menambahkan breakpoint secara terprogram yang dapat berguna jika Anda tidak ingin menelusuri kode Anda di Alat Pengembang saat Anda memilikinya di IDE Anda. Anda juga dapat menggunakan pendekatan ini untuk memasukkan breakpoint secara kondisional, misalnya, pada iterasi loop tertentu, atau jika kode berjalan saat memuat halaman dan tidak ada waktu untuk menambahkan breakpoint secara manual
Untuk melakukan ini, tambahkan pernyataan debugger; di posisi yang ingin Anda hentikan eksekusinya. Kode di bawah ini akan memiliki efek yang sama dengan Line Breakpoint di atas
Titik Henti Kesalahan
Alat Pengembang memiliki fitur praktis yang akan menghentikan eksekusi saat menemukan pengecualian dalam kode Anda, memungkinkan Anda untuk memeriksa apa yang terjadi pada saat terjadi kesalahan. Anda bahkan dapat memilih untuk berhenti pada pengecualian yang sudah ditangani oleh pernyataan try/catch
Untuk mengaktifkan fitur ini, klik ikon tanda berhenti dengan simbol jeda di dalamnya dan pilih opsi yang Anda inginkan dari daftar. Ini akan menjadi biru saat diaktifkan
Langkah 5. Langkah Melalui Kode Anda
Sekarang kita tahu cara membobol kode kita, kita ingin melewati setiap baris sehingga kita bisa mengetahui apa yang salah. Pertama, beri breakpoint pada Baris 7 - tepat di dalam handler klik tombol Add sehingga kita bisa mulai dari awal
Pada bagian sebelumnya, kami menyimpulkan dari laporan kesalahan Raygun bahwa kesalahan berasal dari metode capitalizeString. Metode ini dipanggil tiga kali, jadi contoh mana yang salah? . Anda tahu bahwa baris 13 berkaitan dengan nilai Nama Tengah. Oleh karena itu, Anda harus memfokuskan upaya Anda untuk mereproduksi kesalahan dengan menyusun input Anda dengan benar
Dengan pengetahuan ekstra ini, Anda dapat mengisi kolom Nama Depan dan Belakang tetapi kosongkan Nama Tengah untuk melihat apakah ini memicu kesalahan
Tekan tombol Simpan. Dari sini, tab Sumber akan terbuka di mana Anda dapat melihat breakpoint diaktifkan. Anda sekarang dapat mulai menelusuri kode. Untuk melakukan ini, Anda menggunakan empat tombol di panel debugging
Melanjutkan eksekusi kode Anda dan berlanjut hingga breakpoint berikutnya
Melangkahi baris saat ini, memindahkan kita ke baris berikutnya
Melangkah ke pemanggilan fungsi selanjutnya yang ada di baris tersebut
Melangkah keluar dari panggilan fungsi saat ini, cadangkan tumpukan panggilan satu tingkat
Anda akan menggunakan ini untuk melangkah ke fungsi capitalizeString Anda. Jadi dari Line 7, gunakan tombol “Step over” sampai kita sampai ke Line 13. Garis aktif ditunjukkan dengan latar belakang kuning dan panah oranye menunjuk ke sana
Anda sekarang dapat menggunakan tombol "Langkah ke" untuk beralih ke panggilan ke fungsi capitalizeString
Menavigasi Stack Panggilan
Saat Anda menelusuri kode seperti ini, Anda mungkin ingin melompat kembali ke fungsi induk untuk memeriksa apa yang terjadi pada saat itu. Untuk melakukan ini, gunakan bagian Tumpukan panggilan, yang mencantumkan semua fungsi yang telah dilewati untuk sampai ke titik ini dalam kode Anda—sama persis dengan tumpukan Panggilan yang ditunjukkan dalam laporan kesalahan Raygun
Anda cukup mengklik item dalam daftar ini dan Anda akan dipindahkan kembali ke fungsi itu. Ingatlah bahwa posisi saat ini dalam eksekusi tidak berubah, jadi penggunaan tombol Step Over akan dilanjutkan dari atas tumpukan panggilan
Langkah 6. Tentukan Status Aplikasi Anda
Sekarang Anda telah menavigasi ke tempat kesalahan Anda terjadi, kami perlu memeriksa status aplikasi dan mencari tahu apa yang menyebabkan kesalahan tersebut
Ada banyak opsi untuk mencari tahu apa isi variabel nilai dan mengevaluasi ekspresi sebelum kode berpindah. Kami akan melihat masing-masing secara bergiliran
Arahkan Tikus
Cara paling sederhana untuk menentukan nilai suatu variabel adalah dengan mengarahkan mouse ke atasnya dan tooltip akan muncul dengan nilai tersebut. Anda bahkan dapat memilih sekelompok ekspresi dan mengarahkan kursor ke atasnya untuk mendapatkan output dari ekspresi tersebut
Pengamat
Anda dapat menambahkan ekspresi ke panel Watches yang menampilkan nilai ekspresi saat ini saat Anda menelusuri kode. Ini berguna untuk melacak bagaimana ekspresi yang lebih kompleks berubah dari waktu ke waktu
Anda menambahkannya dengan mengeklik tombol di bagian atas panel, mengeklik teks "Tambah Jam Tangan" di bagian bawah atau dengan memilih ekspresi, mengeklik kanan dan memilih "Tambah Jam Tangan. ”
Cakupan
Panel Jam Tangan juga menampilkan daftar variabel yang saat ini berada dalam cakupan dan nilai terkaitnya. Ini mirip dengan jam tangan yang ditambahkan secara manual tetapi dibuat secara otomatis oleh Alat Pengembang. Bagian ini bagus untuk mengidentifikasi variabel lokal dan menyelamatkan Anda dari menambahkannya secara eksplisit ke daftar Pantau
Tracepoint Peristiwa
Fitur unik untuk Alat Pengembang IE 11 adalah Tracepoint Peristiwa yang memungkinkan Anda menentukan ekspresi untuk dievaluasi dan dikeluarkan ke konsol setiap kali peristiwa yang dipilih terjadi. Misalnya, Anda dapat menampilkan datetime saat ini saat peristiwa mouse terjadi
Untuk menambahkan Tracepoint Peristiwa, klik tombol dari bagian Breakpoints. Dari jendela yang terbuka, pilih peristiwa yang ingin Anda lacak, lalu masukkan ekspresi ke keluaran
Menghibur
Terakhir, tab Konsol adalah alat yang hebat untuk memeriksa nilai ekspresi dan bereksperimen dengan kode. Cukup beralih kembali ke tab Konsol, ketik beberapa kode, dan tekan enter. Alat Pengembang akan mengeksekusi kode dalam konteks dan cakupan breakpoint saat ini
Langkah 7. Perbaiki Bug
Beralih ke tab Konsol dan mari kita mulai menguraikan garis yang menyebabkan kesalahan sehingga Anda dapat memperbaikinya menggunakan tab Konsol
Pertama, periksa output dari panggilan function capitalizeString(value){ if(!value || value.length === 0){ return ''; } return value.split('')[0].toUpperCase() + value.slice(1); }_3 sehingga Anda bisa mendapatkan karakter pertama lalu panggil fungsi toUpperCase di atasnya
Mengeksekusi ekspresi di Konsol menunjukkan bahwa ia mengembalikan larik kosong—dari sinilah kesalahan berasal. Karena mengembalikan array kosong dan kami mencoba memanggil toUpperCase pada item pertama (yang tidak ditentukan, karena tidak ada item) yang memberi Anda kesalahan
Anda dapat memverifikasi ini dengan memasukkan ekspresi lengkap ke Konsol
Jadi, untuk memperbaiki masalah, Anda perlu memeriksa apakah string tersebut kosong atau tidak terdefinisi. Jika ya, Anda perlu mengembalikan string kosong tanpa melakukan pemrosesan apa pun
function capitalizeString(value){ if(!value || value.length === 0){ return ''; } return value.split('')[0].toUpperCase() + value.slice(1); }_Ringkasan
Itu mengakhiri pengantar cepat untuk men-debug JavaScript di Alat Pengembang Internet Explorer 11. Alat pengembang ini merupakan lompatan maju yang disambut baik dalam pengalaman pengembang di Internet Explorer yang selalu menjadi sesuatu yang ditakuti
Alatnya sangat lengkap jika dibandingkan dengan penawaran browser lain dan bahkan menyertakan beberapa fitur uniknya sendiri