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 pengunduhan 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 Atribut konfigurasi Kode yang Tidak Menarik dan Meluncurkan.

Men-debug skrip server sampingan

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 dasar dan esensial dari penelusuran kesalahan yang andal. 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 Melakukan Debug).

   Debugger dijeda pada titik henti yang Anda tetapkan (IDE menyoroti pernyataan di 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 penelusuran kesalahan 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, pilih Opsi>Alat>Penelusuran Kesalahan, lalu pilih Aktifkan Penelusuran Kesalahan JavaScript untuk ASP.NET (Chrome, Edge, dan IE).

  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 aplikasi Node.js dan proyek JavaScript lainnya, ikuti langkah-langkah yang dijelaskan di sini.

Catatan

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

Siapkan aplikasi Anda untuk melakukan debug

Jika sumber Anda dikurangi atau dibuat oleh transpiler seperti TypeScript atau Babel, gunakan peta sumber untuk pengalaman penelusuran kesalahan 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 dikurangi akan diteruskan sebagai string ke eval pernyataan, dan tidak ada cara untuk menelusuri kode ini secara efektif menggunakan debugger Visual Studio kecuali Anda menggunakan peta sumber. Untuk skenario penelusuran kesalahan yang kompleks, Anda mungkin ingin menggunakan Alat Pengembang Chrome atau Alat F12 untuk Microsoft Edge sebagai gantinya.

Untuk bantuan dalam membuat peta sumber, lihat Membuat peta sumber untuk penelusuran kesalahan.

Menyiapkan browser untuk melakukan debug

Untuk skenario ini, gunakan Microsoft Edge atau Chrome.

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

   Instans browser lainnya dapat mencegah browser terbuka dengan penelusuran kesalahan 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 debug yang diaktifkan.

   Mulai dari Visual Studio 2019, Anda dapat mengatur --remote-debugging-port=9222 bendera saat peluncuran 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 Jalankandari tombol mulai Windows (klik kanan dan pilih Jalankan), dan masukkan perintah berikut:

   msedge --remote-debugging-port=9222

   atau,

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

   Ini akan memulai browser Anda dengan 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

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, biasanya berupa 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>Temukan Cepat).

   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. PilihDebug>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) juga dapat muncul di bidang Judul untuk membantu Anda memilih instans browser yang benar.

   Contoh berikut menunjukkan bagaimana ini mencari browser Microsoft Edge.

   

   Tip

   Jika debugger tidak melampirkan dan Anda melihat pesan "Gagal meluncurkan adaptor debug" atau "Tidak dapat melampirkan ke proses. Operasi tidak legal dalam status saat ini.", gunakan Windows Task Manager untuk menutup semua instans browser target sebelum memulai browser dalam mode debug. 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 untuk menyebabkan kode dengan titik henti dijalankan.

   Saat dijeda di debugger, Anda dapat memeriksa status aplikasi dengan mengarahkan kubah ke variabel dan menggunakan jendela debugger. Anda dapat memajukan debugger dengan melangkah melalui kode (F5, F10, dan F11). Untuk informasi selengkapnya tentang fitur debug dasar, lihat Tampilan awal debugger.

   Anda dapat mencapai titik henti dalam file atau file sumber yang ditranspilasi .js , tergantung pada jenis aplikasi Anda, langkah-langkah mana yang Anda ikuti sebelumnya, dan faktor lain seperti status browser 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 Pemecahan Masalah.

   • 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.

Pemecahan masalah titik henti dan peta sumber

Jika Anda perlu memecah kode dalam file sumber TypeScript atau JSX dan tidak dapat melakukannya, gunakan Lampirkan ke Proses seperti yang dijelaskan di bagian sebelumnya untuk melampirkan debugger. Pastikan lingkungan Anda disiapkan dengan benar:

• Tutup semua instans browser, termasuk ekstensi Chrome (menggunakan Task Manager), sehingga Anda dapat menjalankan browser dalam mode debug.

• Pastikan Anda memulai browser dalam mode debug.

• Pastikan file peta sumber Anda menyertakan jalur relatif yang benar ke file sumber Anda dan tidak menyertakan awalan yang tidak didukung seperti webpack:///, yang mencegah Visual Studio debugger menemukan file sumber. Misalnya, referensi seperti webpack:///.app.tsx mungkin dikoreksi ke ./app.tsx. Anda dapat melakukan ini secara manual di file peta sumber (yang berguna untuk pengujian) atau melalui konfigurasi build khusus. Untuk informasi selengkapnya, lihat Membuat peta sumber untuk melakukan debug.

Atau, jika Anda perlu memecah kode dalam file sumber (misalnya, app.tsx) dan tidak dapat melakukannya, coba gunakan debugger; pernyataan dalam file sumber, atau atur titik henti di Alat Pengembang Chrome (atau Alat F12 untuk Microsoft Edge) sebagai gantinya.

Membuat peta sumber untuk penelusuran kesalahan

Visual Studio memiliki kemampuan untuk menggunakan dan menghasilkan peta sumber pada file sumber JavaScript. Ini sering diperlukan jika sumber Anda dikurangi atau dibuat oleh transpiler seperti TypeScript atau Babel. Opsi yang tersedia bergantung pada jenis proyek.

• Proyek TypeScript di Visual Studio menghasilkan peta sumber untuk Anda secara default. Untuk informasi selengkapnya, lihat Mengonfigurasi peta sumber menggunakan file tsconfig.json.

• Dalam proyek JavaScript, Anda dapat menghasilkan peta sumber menggunakan bundler seperti webpack dan pengkompilasi seperti pengkompilasi TypeScript (atau Babel), yang dapat Anda tambahkan ke proyek Anda. Untuk pengkompilasi TypeScript, Anda juga harus menambahkan tsconfig.json file dan mengatur sourceMap opsi pengkompilasi. Untuk contoh yang menunjukkan cara melakukan ini menggunakan konfigurasi webpack dasar, lihat Membuat aplikasi Node.js dengan React.

Catatan

Jika Anda baru menggunakan peta sumber, baca Apa itu Peta Sumber? sebelum melanjutkan.

Untuk mengonfigurasi pengaturan tingkat lanjut untuk peta sumber, gunakan tsconfig.json pengaturan proyek atau dalam proyek TypeScript, tetapi tidak keduanya.

Untuk mengaktifkan penelusuran kesalahan menggunakan Visual Studio, Anda perlu memastikan bahwa referensi ke file sumber Anda di peta sumber yang dihasilkan sudah benar (ini mungkin memerlukan pengujian). Misalnya, jika Anda menggunakan paket web, referensi dalam file peta sumber menyertakan awalan webpack:/// , yang mencegah Visual Studio menemukan file sumber TypeScript atau JSX. Secara khusus, ketika Anda memperbaiki ini untuk tujuan penelusuran kesalahan, referensi ke file sumber (seperti app.tsx), harus diubah dari sesuatu seperti webpack:///./app.tsx menjadi sesuatu seperti ./app.tsx, yang memungkinkan penelusuran kesalahan (jalur relatif terhadap file sumber Anda). Contoh berikut menunjukkan bagaimana Anda dapat mengonfigurasi peta sumber di webpack, yang merupakan salah satu bundler yang paling umum, sehingga berfungsi dengan Visual Studio.

(Hanya webpack) Jika Anda mengatur titik henti dalam TypeScript file JSX (bukan file JavaScript yang ditranspilasi), Anda perlu memperbarui konfigurasi paket web Anda. Misalnya, dalam webpack-config.js, Anda mungkin perlu mengganti kode berikut:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

dengan kode ini:

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

Ini adalah pengaturan khusus pengembangan untuk mengaktifkan penelusuran kesalahan kode sisi klien di Visual Studio.

Untuk skenario yang rumit, alat browser (F12) terkadang berfungsi paling baik untuk penelusuran kesalahan, karena tidak memerlukan perubahan pada awalan kustom.

Mengonfigurasi peta sumber menggunakan file tsconfig.json

Jika Anda menambahkan tsconfig.json file ke proyek Anda, Visual Studio memperlakukan akar direktori sebagai proyek TypeScript. Untuk menambahkan file, klik kanan proyek Anda di Penjelajah Solusi, lalu pilih Tambahkan > Item Baru > TypeScript File Konfigurasi JSON. File tsconfig.json seperti berikut ini ditambahkan ke proyek Anda.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Opsi pengkompilasi untuk file tsconfig.json

• inlineSourceMap: Memancarkan satu file dengan peta sumber alih-alih membuat peta sumber terpisah untuk setiap file sumber.
• inlineSources: Memancarkan sumber bersama peta sumber dalam satu file; memerlukan inlineSourceMap atau sourceMap untuk diatur.
• mapRoot: Menentukan lokasi tempat debugger harus menemukan file peta sumber (.map) alih-alih lokasi default. Gunakan bendera ini jika file run-time .map harus berada di lokasi yang berbeda dari .js file. Lokasi yang ditentukan disematkan di peta sumber untuk mengarahkan debugger ke lokasi .map file.
• sourceMap: Menghasilkan file yang .map sesuai.
• sourceRoot: Menentukan lokasi tempat debugger harus menemukan file TypeScript alih-alih lokasi sumber. Gunakan bendera ini jika sumber run-time harus berada di lokasi yang berbeda dari lokasi pada waktu desain. Lokasi yang ditentukan disematkan di peta sumber untuk mengarahkan debugger ke tempat file sumber berada.

Untuk detail selengkapnya tentang opsi pengompilasi, periksa halaman Opsi Pengompilasi pada Buku Pegangan TypeScript.

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