Men-debug aplikasi JavaScript atau TypeScript di Visual Studio

Anda dapat men-debug kode JavaScript dan TypeScript menggunakan Visual Studio. Anda dapat menekan titik henti, melampirkan debugger, memeriksa variabel, melihat tumpukan panggilan, dan menggunakan fitur penelusuran kesalahan lainnya.

Tip

Jika Anda belum menginstal Visual Studio, buka halaman unduhan Visual Studio untuk menginstalnya secara gratis.

Mengonfigurasi penelusuran kesalahan

Untuk proyek .esproj di Visual Studio 2022, Visual Studio Code menggunakan file launch.json untuk mengonfigurasi dan menyesuaikan debugger. launch.json adalah file konfigurasi debugger.

Visual Studio melampirkan debugger hanya ke kode pengguna. Untuk proyek .esproj , Anda dapat mengonfigurasi kode pengguna (juga disebut pengaturan Just My Code ) di Visual Studio menggunakan skipFiles pengaturan di launch.json. Ini berfungsi sama dengan pengaturan launch.json di Visual Studio Code. Untuk informasi selengkapnya tentang skipFiles dan opsi konfigurasi debugger lainnya, lihat Melompati Kode yang Tidak Menarik dan Atribut Konfigurasi Peluncuran.

Debug skrip sisi server

1. Dengan proyek Anda terbuka di Visual Studio, buka file JavaScript sisi server (seperti server.js), klik di selokan untuk mengatur titik henti:

   

   Titik henti adalah fitur paling mendasar dan penting dari debugging yang bisa diandalkan. Titik henti menunjukkan di mana Visual Studio harus menangguhkan kode yang sedang berjalan, sehingga Anda dapat melihat nilai variabel atau perilaku memori, atau apakah cabang kode sedang dijalankan atau tidak.

2. Untuk menjalankan aplikasi Anda, tekan F5 (Debug>Mulai Debugging).

   Debugger berhenti sejenak pada titik henti yang Anda tetapkan (IDE menyoroti pernyataan dengan latar belakang kuning). Sekarang, Anda dapat memeriksa status aplikasi dengan mengarahkan mouse ke atas variabel yang saat ini berada dalam cakupan, menggunakan jendela debugger seperti jendela Lokal dan Tonton .

   

3. Tekan F5 untuk melanjutkan aplikasi.

4. Jika Anda ingin menggunakan Alat Pengembang Chrome, tekan F12 di browser Chrome. Dengan menggunakan alat ini, Anda dapat memeriksa DOM atau berinteraksi dengan aplikasi menggunakan Konsol JavaScript.

Men-debug skrip sisi klien

Visual Studio menyediakan dukungan debug sisi klien hanya untuk Chrome dan Microsoft Edge. Dalam beberapa skenario, debugger secara otomatis menekan titik henti dalam kode JavaScript dan TypeScript dan skrip yang disematkan pada file HTML.

• Untuk men-debug skrip sisi klien di aplikasi ASP.NET, buka panelOpsi> dan perluas bagianUmum>>. Pilih opsi Aktifkan penelusuran kesalahan JavaScript untuk ASP.NET (Chrome dan Edge).

  Jika Anda lebih suka menggunakan Alat Pengembang Chrome atau Alat F12 untuk Microsoft Edge untuk men-debug skrip sisi klien, Anda harus menonaktifkan pengaturan ini.

  Untuk informasi selengkapnya, lihat posting blog ini untuk Google Chrome. Untuk penelusuran kesalahan TypeScript di ASP.NET Core, lihat Menambahkan TypeScript ke aplikasi ASP.NET Core yang sudah ada.

• Untuk proyek .esproj di Visual Studio 2022, Anda dapat men-debug skrip sisi klien menggunakan metode debugging standar untuk mencapai titik henti. Untuk mengonfigurasi penelusuran kesalahan, Anda dapat memodifikasi pengaturan launch.json, yang berfungsi sama seperti di VS Code. Untuk informasi selengkapnya tentang opsi konfigurasi debugger, lihat Meluncurkan atribut konfigurasi.

Note

Untuk ASP.NET dan ASP.NET Core, debugging skrip yang disematkan di . File CSHTML tidak didukung. Kode JavaScript harus dalam file terpisah untuk memungkinkan penelusuran kesalahan.

Menyiapkan aplikasi Anda untuk penelusuran kesalahan

Jika sumber Anda diminifikasi atau dibuat oleh transpiler seperti TypeScript atau Babel, gunakan peta sumber untuk proses debugging terbaik. Anda bahkan dapat melampirkan debugger ke skrip sisi klien yang sedang berjalan tanpa peta sumber. Namun, Anda mungkin hanya dapat mengatur dan menekan titik henti dalam file minified atau transpiled, bukan dalam file sumber. Misalnya, dalam aplikasi Vue.js, skrip yang telah diminifikasi akan diteruskan sebagai string ke pernyataan eval, dan tidak ada cara untuk menelusuri kode ini secara efektif menggunakan debugger Visual Studio kecuali Anda menggunakan source map. Untuk skenario debugging yang kompleks, Anda mungkin ingin menggunakan Chrome Developer Tools atau F12 Tools untuk Microsoft Edge sebagai gantinya.

Mengonfigurasi browser secara manual untuk debugging

Di Visual Studio 2022, prosedur yang dijelaskan di bagian ini hanya tersedia di aplikasi ASP.NET dan ASP.NET Core. Ini hanya diperlukan dalam skenario yang jarang di mana Anda perlu menyesuaikan pengaturan browser. Dalam proyek .esproj, browser dikonfigurasi untuk debugging secara default.

Untuk skenario ini, gunakan Microsoft Edge atau Chrome.

1. Tutup semua jendela untuk browser target, baik instans Microsoft Edge atau Chrome.

   Instans browser yang lain dapat mencegah browser terbuka saat debugging diaktifkan. (Ekstensi browser mungkin berjalan dan mencegat mode debug penuh, jadi Anda mungkin perlu membuka Task Manager untuk menemukan dan menutup instans Chrome atau Edge yang tidak terduga.)

   Untuk hasil terbaik, matikan semua instans Chrome, meskipun Anda bekerja dengan Microsoft Edge. Kedua browser menggunakan basis kode kromium yang sama.

2. Mulai browser Anda dengan debugging diaktifkan.

   Mulai dari Visual Studio 2019, Anda dapat mengatur --remote-debugging-port=9222 saat meluncurkan browser dengan memilih Telusuri Dengan...> dari toolbar Debug.

   

   Jika Anda tidak melihat perintah Telusuri Dengan... di toolbar Debug , pilih browser lain, lalu coba lagi.

   Dari kotak dialog Telusuri Dengan, pilih Tambahkan, lalu atur bendera di bidang Argumen . Gunakan nama ramah yang berbeda untuk browser, seperti Mode Debug Edge atau Mode Debug Chrome. Untuk detailnya, lihat Catatan Rilis.

   

   Pilih Telusuri untuk memulai aplikasi Anda dengan browser dalam mode debug.

   Atau, buka perintah Jalankan dari tombol Mulai Windows (klik kanan dan pilih Jalankan), dan masukkan perintah berikut:

   msedge --remote-debugging-port=9222

   or,

   chrome.exe --remote-debugging-port=9222

   Ini memulai browser Anda dengan mode debugging diaktifkan.

   Aplikasi belum berjalan, sehingga Anda mendapatkan halaman browser kosong. (Jika Anda memulai browser menggunakan perintah Jalankan, Anda perlu menempelkan URL yang benar untuk instans aplikasi Anda.)

Lampirkan debugger ke skrip sisi klien

Dalam beberapa skenario, Anda mungkin perlu melampirkan debugger ke aplikasi yang sedang berjalan.

Untuk melampirkan debugger dari Visual Studio dan menekan titik henti di kode sisi klien, perlu bantuan untuk mengidentifikasi proses yang benar. Berikut adalah salah satu cara untuk mengaktifkannya.

1. Pastikan aplikasi Anda berjalan di browser dalam mode debug, seperti yang dijelaskan di bagian sebelumnya.

   Jika Anda membuat konfigurasi browser dengan nama yang mudah diingat, pilih itu sebagai target debug Anda, lalu tekan Ctrl+F5 (Debug>Mulai Tanpa Debugging) untuk menjalankan aplikasi di browser.

2. Beralih ke Visual Studio lalu atur titik henti dalam kode sumber Anda, yang mungkin merupakan file JavaScript, file TypeScript, atau file JSX. (Atur titik henti dalam baris kode yang memungkinkan titik henti, seperti pernyataan pengembalian atau deklarasi var.)

   

   Untuk menemukan kode tertentu dalam file yang ditranspilasi, gunakan Ctrl+F (Edit>Temukan dan Ganti>Quick Find).

   Untuk kode sisi klien, untuk mencapai titik henti dalam file TypeScript, file .vue, atau JSX biasanya memerlukan penggunaan peta sumber. Peta sumber harus dikonfigurasi dengan benar untuk mendukung penelusuran kesalahan di Visual Studio.

3. Pilih Debug>Lampirkan ke Proses.

   Tip

   Mulai visual Studio 2017, setelah Anda melampirkan ke proses pertama kali dengan mengikuti langkah-langkah ini, Anda dapat dengan cepat memasang kembali ke proses yang sama dengan memilih Debug>Pasang Ulang ke Proses.

4. Dalam dialog Lampirkan ke Proses , pilih JavaScript dan TypeScript (Chrome Dev Tools/V8 Inspector) sebagai Jenis Koneksi.

   Target debugger, seperti http://localhost:9222, akan muncul di bidang Target Koneksi .

5. Dalam daftar instans browser, pilih proses browser dengan port host yang benar (https://localhost:7184/ dalam contoh ini), dan pilih Lampirkan.

   Port (misalnya, 7184) mungkin juga muncul di bidang Judul untuk membantu Anda memilih instans browser yang benar.

   Contoh berikut menunjukkan seperti apa tampilan ini pada browser Microsoft Edge.

   

   Tip

   Jika debugger tidak tersambung dan Anda melihat pesan "Gagal meluncurkan adaptor debug" atau "Tidak dapat tersambung ke proses. Operasi tidak legal dalam status saat ini.", gunakan Windows Task Manager untuk menutup semua instans browser target sebelum memulai browser dalam mode debugging. Ekstensi browser mungkin berjalan dan mencegah mode debug penuh.

6. Kode dengan titik henti mungkin telah dijalankan, refresh halaman browser Anda. Jika perlu, ambil tindakan agar kode dengan titik henti dieksekusi.

   Saat dijeda di debugger, Anda dapat memeriksa status aplikasi dengan mengarahkan mouse ke atas variabel dan menggunakan jendela debugger. Anda dapat memajukan debugger dengan menelusuri kode (F5, F10, dan F11). Untuk informasi selengkapnya tentang fitur penelusuran kesalahan dasar, lihat Pertama-tama lihat debugger.

   Anda mungkin mencapai titik henti dalam file yang ditranspilasi atau file sumber, tergantung pada jenis aplikasi Anda, langkah-langkah yang telah Anda ikuti sebelumnya, dan faktor lainnya seperti status peramban Anda. Bagaimanapun, Anda dapat menelusuri kode dan memeriksa variabel.

   • Jika Anda perlu memecah kode dalam TypeScript, JSX, atau .vue file sumber dan tidak dapat melakukannya, pastikan lingkungan Anda disiapkan dengan benar, seperti yang dijelaskan di bagian Peta sumber dari dokumentasi Visual Studio Code.

   • Jika Anda perlu memecah kode dalam file JavaScript yang ditranspilasi (misalnya, app-bundle.js) dan tidak dapat melakukannya, hapus file peta sumber, filename.js.map.

Debug JavaScript dalam file dinamis menggunakan Razor (ASP.NET)

Di Visual Studio 2022, Anda dapat men-debug halaman Razor menggunakan titik henti. Untuk informasi selengkapnya, lihat Menggunakan Alat Penelusuran Kesalahan di Visual Studio.

Konten terkait

Properti, React, Angular, Vue