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.

Petunjuk / Saran

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, pilihOpsi>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 dalam artikel ini.

Nota

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 diperkecil 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 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 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 debug

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

   atau,

   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

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.

   Petunjuk / Saran

   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 seperti apa tampilan ini pada browser Microsoft Edge.

   

   Petunjuk / Saran

   Jika debugger tidak dapat terhubung dan Anda melihat pesan "Gagal meluncurkan adaptor debug" atau "Tidak dapat melampirkan ke proses. "Operasi tidak legal dalam keadaan saat ini.", gunakan Pengelola Tugas Windows untuk menutup semua salinan 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 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 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 debugger Visual Studio menemukan file sumber. Misalnya, referensi seperti webpack:///.app.tsx mungkin dikoreksi ke ./app.tsx. Anda dapat melakukan ini secara manual dalam file peta sumber (yang berguna untuk pengujian) atau melalui konfigurasi build kustom. Untuk informasi selengkapnya, lihat Membuat peta sumber untuk penelusuran kesalahan.

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.

Hasilkan 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 bunder seperti webpack dan pengkompilasi seperti pengkompilasi TypeScript (atau Babel), yang dapat Anda tambahkan ke proyek Anda. Untuk pengkompilasi TypeScript, Anda juga harus menambahkan file tsconfig.json dan mengatur opsi pengkompilasi sourceMap. Untuk contoh yang menunjukkan cara melakukan ini menggunakan konfigurasi webpack dasar, lihat Membuat aplikasi Node.js dengan React.

Nota

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

Untuk mengonfigurasi pengaturan tingkat lanjut untuk peta sumber, gunakan tsconfig.json atau pengaturan proyek dalam proyek TypeScript, tetapi jangan gunakan 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 bunder 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, di 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
  },

Pengaturan ini khusus untuk pengembangan guna mengaktifkan debugging 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: Keluarkan 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 tombol ini jika sumber run-time harus berada di lokasi yang berbeda dari lokasi saat waktu perancangan. Lokasi yang ditentukan disematkan di peta sumber untuk mengarahkan debugger ke tempat file sumber berada.

Untuk detail selengkapnya tentang opsi pengkompilasi, periksa halaman Opsi Pengkompilasi 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