Bagaimana cara men-debug javascript di internet explorer?

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

Menyukai

Komentar

Menyimpan

Menciak

Membagikan

35. 32 ribu Tampilan

Bergabunglah dengan komunitas DZone dan dapatkan pengalaman anggota penuh

Artikel 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

1. Contoh Pengenalan Proyek
2. Menganalisis Laporan Kesalahan Raygun
3. Jelajahi Anatomi Alat Pengembang
4. Tambahkan Breakpoint ke Kode Anda
5. Telusuri Kode Anda
6. Tentukan Status Aplikasi Anda
7. 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

var saveButton = document.getElementById('saveButton');
var firstNameField = document.getElementById('firstName');
var middleNameField = document.getElementById('middleName');
var lastNameField = document.getElementById('lastName');

function onSaveButtonClick(){
    var firstName = firstNameField.value;
    var middleName = middleNameField.value;
    var lastName = lastNameField.value;

    // capitalise the names
    firstName = capitalizeString(firstName);
    middleName = capitalizeString(middleName);
    lastName = capitalizeString(lastName);
    doSave(firstName, middleName, lastName);
}
function capitalizeString(value){
    return value.split('')[0].toUpperCase() + value.slice(1);
}
function doSave(firstName, middleName, lastName){
    alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}
saveButton.addEventListener('click', onSaveButtonClick);

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);
}

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

Bagaimana cara mengaktifkan debugging JavaScript di Internet Explorer?

Bisakah Anda men-debug JavaScript di browser?

Bagaimana cara men-debug JavaScript di tepi IE?

Bagaimana Anda men-debug sepotong JavaScript di browser *?