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 Show
Suka Komentar Menyimpan Menciak Membagikan 35. 29 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
Jadi, mari selami Langkah 1. Contoh Pengenalan ProyekUntuk 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
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 RaygunLaporan 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 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 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 PengembangLangkah 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 Coba masukkan 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 Langkah 4. Tambahkan Breakpoint ke Kode AndaSekarang 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 AcaraAnda 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 GarisMungkin 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 Titik Henti ProgramatikAnda 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 Titik Henti KesalahanAlat 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 AndaSekarang 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 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 Anda sekarang dapat menggunakan tombol "Langkah ke" untuk beralih ke panggilan ke fungsi Menavigasi Stack PanggilanSaat 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 AndaSekarang 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 TikusCara 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 PengamatAnda 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. ” CakupanPanel 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 PeristiwaFitur 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 MenghiburTerakhir, 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 BugBeralih ke tab Konsol dan mari kita mulai menguraikan garis yang menyebabkan kesalahan sehingga Anda dapat memperbaikinya menggunakan tab Konsol Pertama, periksa output dari panggilan _3 sehingga Anda bisa mendapatkan karakter pertama lalu panggil fungsi toUpperCase di atasnyaMengeksekusi ekspresi di Konsol menunjukkan bahwa ia mengembalikan larik kosong—dari sinilah kesalahan berasal. Karena mengembalikan array kosong dan kami mencoba memanggil 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 _RingkasanItu 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 men-debug JavaScript di browser IE?Klik kanan untuk 'Memeriksa Elemen', atau klik Alat Pengembang F12 dari ikon perkakas untuk membuka panel Alat Pengembang . Klik pada tab "Debugger" .
Bagaimana cara men-debug aplikasi web di Internet Explorer 11?Klik ikon pengaturan Gear di kanan atas Internet Explorer dan Pilih F12 Developer Tools dari menu drop-down. Anda juga dapat mengaktifkan alat pengembang internet explorer dengan menekan tombol fungsi F12 di halaman web yang Anda perlukan
Bagaimana cara mengaktifkan alat pengembang F12 di IE 11?Luncurkan IE. Masukkan URL WebGUI di bilah alamat IE dan login. 2. Setelah Anda siap membuat ulang masalah, klik Alat -> Alat Pengembang F12 untuk mengaktifkan Alat Pengembang .
Bagaimana cara menjalankan JavaScript dalam mode debug?Biasanya, Anda mengaktifkan proses debug di browser Anda dengan F12, dan memilih "Konsol" di menu debugger . |