Aktifkan debugging javascript di visual studio 2022

Artikel ini akan fokus pada debug kode JavaScript Visual Studio. Secara tradisional Visual Studio dikenal sebagai IDE yang kuat untuk C#. NET dan VB. NET tetapi tanpa banyak dukungan untuk JavaScript. Namun ini telah berubah dalam iterasi baru-baru ini dan sekarang Anda dapat menggunakan Visual Studio untuk men-debug JavaScript di lingkungan yang sama seperti kode C# Anda. Ini menjadikannya alat terintegrasi yang sangat berguna yang akan mempercepat proses pencarian dan perbaikan bug Anda

Raygun memungkinkan Anda mendeteksi dan mendiagnosis kesalahan dan masalah kinerja di basis kode Anda dengan mudah

Butuh beberapa menit untuk menambahkan Raygun ke perangkat lunak Anda. Waspadai masalah yang memengaruhi pengguna akhir dan ulangi masalah 1.000x lebih cepat daripada menggunakan log dan informasi yang tidak lengkap dari pengguna. Pelajari lebih lanjut dan coba Raygun gratis selama 14 hari

Langkah-langkah yang akan kita ikuti adalah

1. Contoh Pengenalan Proyek
2. Menganalisis Laporan Kesalahan Raygun
3. Jelajahi Anatomi alat debugging Visual Studio
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 Visual Studio, 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 penyimpanan

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 info 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 Stacktrace

Bagian Pesan dari Stacktrace adalah ikhtisar singkat tentang apa yang salah. Dalam hal ini, metode toUpperCase_ dipanggil pada nilai yang tidak ditentukan

Stacktrace 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 Debugging Visual Studio

Langkah pertama adalah membuka proyek Visual Studio dan memulai aplikasi dengan mengklik tombol. Dengan aplikasi berjalan sekarang kita dapat membuka semua jendela debug yang akan saya gunakan. Buka menu Debug dan kemudian submenu Windows

Klik item JavaScript Console, Call Stack, Watch 1, Locals, Output dan Breakpoints secara bergantian sehingga semuanya terbuka di bagian bawah jendela Visual Studio

Aktifkan jendela Konsol JavaScript dengan mengklik tabnya. Tab ini 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 JavaScript adalah alat debugging yang berharga karena Anda dapat menggunakannya sebagai alas awal untuk mencoba kode dan mengevaluasi variabel saat Anda mendiagnosis masalah Anda

Karena kami berada di lingkungan yang familier untuk men-debug kode sisi server, Anda dapat menemukan dan menavigasi kode sisi klien dengan cara yang persis sama menggunakan Solution Explorer. Mengklik dua kali pada file akan membukanya di panel tengah

Di aplikasi, Anda tahu masalahnya terletak pada file index.js_, jadi pilih dari daftar Solution Explorer untuk melihat kontennya

Langkah 4. Tambahkan Breakpoint ke Kode Anda

Sekarang Anda dapat melihat kode Anda, kami ingin dapat melewatinya satu baris pada satu waktu untuk melihat di mana ada kesalahan. 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

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 area abu-abu di samping 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. Pendekatan ini berguna untuk memperkenalkan breakpoint secara kondisional, misalnya pada iterasi loop tertentu

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

Secara default Visual Studio akan memunculkan peringatan jika pengecualian yang tidak tertangani telah terjadi di halaman Anda. Dari kotak dialog ini Anda dapat memilih untuk berhenti pada titik ini sehingga Anda dapat menyelidiki penyebabnya

Langkah 5. Langkah Melalui Kode Anda

Sekarang kita tahu cara membobol kode kita, sekarang kita ingin melewati setiap baris sehingga kita dapat 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 debug

Melanjutkan eksekusi kode Anda dan berlanjut hingga breakpoint berikutnya Melangkah melewati baris saat ini, memindahkan kita ke baris berikutnya Melangkah ke pemanggilan fungsi berikutnya yang ada di baris tersebut Melangkah keluar dari pemanggilan fungsi saat ini, mencadangkan callstack 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 yang 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 jendela Call Stack yang Anda buka sebelumnya, yang mencantumkan semua fungsi yang telah dilewati untuk sampai ke titik ini dalam kode Anda—persis sama dengan Callstack yang ditampilkan dalam laporan kesalahan Raygun

Anda cukup mengklik dua kali item dalam daftar ini dan Anda akan dipindahkan kembali ke fungsi tersebut. 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 Watch 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 menambahkan ini dengan mengklik dua kali di baris kosong panel Tontonan dan mengetikkan ekspresi atau dengan memilih ekspresi, mengklik kanan dan memilih "Tambahkan Tontonan"

Penduduk setempat

Panel Lokal menampilkan daftar variabel yang saat ini berada dalam cakupan dan nilai terkaitnya. Ini mirip dengan panel Watch tetapi dihasilkan secara otomatis oleh Visual Studio secara otomatis. Panel Lokal bagus untuk mengidentifikasi variabel lokal dan menyimpan Anda secara eksplisit menambahkannya ke daftar Pantauan

Konsol JavaScript

Terakhir, tab Konsol JavaScript adalah alat yang hebat untuk memeriksa nilai ekspresi dan bereksperimen dengan kode. Cukup beralih kembali ke tab Konsol JavaScript, ketikkan beberapa kode dan tekan enter. Visual Studio akan mengeksekusi kode dalam konteks dan ruang lingkup breakpoint saat ini

Langkah 7. Perbaiki Bug

Beralih ke tab Konsol JavaScript dan mari kita mulai menguraikan garis yang menyebabkan kesalahan sehingga Anda dapat memperbaikinya menggunakan tab Konsol JavaScript

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 JavaScript 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 JavaScript

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 singkat ini untuk men-debug JavaScript di Visual Studio. Meskipun Visual Studio terutama dikenal sebagai IDE sisi server, ia sangat kaya fitur dalam hal debugging JavaScript

Jika Anda sudah bekerja dengan Visual Studio maka memiliki satu lingkungan debugging untuk kode back-end dan front-end adalah keuntungan besar

Bagaimana cara mengaktifkan debugging JavaScript dalam kode Visual Studio?

Bagaimana cara mematikan debug JavaScript di Visual Studio 2022?

Bisakah kita men-debug JavaScript di Visual Studio?