Bagaimana cara men-debug javascript di windows?

Salah satu fitur utama dari Visual Studio Code adalah dukungan debugnya yang hebat. Debugger bawaan VS Code membantu mempercepat proses edit, kompilasi, dan debug Anda

Ekstensi debugger

VS Code memiliki dukungan debug bawaan untuk Node. js runtime dan dapat men-debug JavaScript, TypeScript, atau bahasa lain apa pun yang dialihkan ke JavaScript

Untuk men-debug bahasa dan runtime lain (termasuk PHP, Ruby, Go, C#, Python, C++, PowerShell, dan banyak lainnya), cari ekstensi Debuggers di Pasar Kode VS atau pilih Instal Debugger Tambahan di menu Jalankan tingkat atas

Di bawah ini adalah beberapa ekstensi populer yang menyertakan dukungan debugging

Tip. Ekstensi yang ditampilkan di atas ditanyakan secara dinamis. Pilih ubin ekstensi di atas untuk membaca deskripsi dan ulasan guna memutuskan ekstensi mana yang terbaik untuk Anda

Mulai men-debug

Dokumentasi berikut didasarkan pada Node bawaan. js debugger, tetapi sebagian besar konsep dan fitur juga berlaku untuk debugger lainnya

Sangat membantu untuk terlebih dahulu membuat sampel Node. js sebelum membaca tentang debugging. Anda dapat mengikuti Node. Panduan js untuk menginstal Node.js. js dan buat aplikasi JavaScript "Hello World" sederhana (

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Tampilan Jalankan dan Debug

Untuk memunculkan tampilan Run and Debug, pilih ikon Run and Debug di Activity Bar di samping VS Code. Anda juga dapat menggunakan pintasan keyboard ⇧⌘D (Windows, Linux Ctrl+Shift+D).

Tampilan Jalankan dan Debug menampilkan semua informasi yang terkait dengan menjalankan dan debugging dan memiliki bilah atas dengan perintah debug dan pengaturan konfigurasi

Jika running dan debugging belum dikonfigurasi (tidak ada

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Jalankan menu

Menu Run tingkat atas memiliki perintah run dan debug yang paling umum

Luncurkan konfigurasi

Untuk menjalankan atau men-debug aplikasi sederhana di VS Code, pilih Run and Debug pada tampilan awal Debug atau tekan F5 dan VS Code akan .

Namun, untuk sebagian besar skenario debug, membuat file konfigurasi peluncuran bermanfaat karena memungkinkan Anda mengonfigurasi dan menyimpan detail penyiapan debug. VS Code menyimpan informasi konfigurasi debug dalam file

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Untuk membuat file

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

VS Code akan mencoba mendeteksi lingkungan debug Anda secara otomatis, tetapi jika gagal, Anda harus memilihnya secara manual

Berikut adalah konfigurasi peluncuran yang dibuat untuk Node. js debug

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

Jika Anda kembali ke tampilan File Explorer ( ⇧⌘E (Windows, Linux Ctrl . )), you'll see that VS Code has created a

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Catatan. Anda dapat men-debug aplikasi sederhana bahkan jika Anda tidak membuka folder di VS Code, tetapi tidak mungkin mengelola konfigurasi peluncuran dan menyiapkan debugging lanjutan. Bilah Status Kode VS berwarna ungu jika Anda tidak membuka folder

Perhatikan bahwa atribut yang tersedia dalam konfigurasi peluncuran bervariasi dari debugger ke debugger. Anda dapat menggunakan saran IntelliSense ( ⌃Space (Windows, Linux Ctrl+Space)) to find out which attributes exist for a specific debugger. Hover help is also available for all attributes.

Jangan berasumsi bahwa atribut yang tersedia untuk satu debugger secara otomatis juga berfungsi untuk debugger lainnya. Jika Anda melihat coretan hijau dalam konfigurasi peluncuran, arahkan kursor ke coretan tersebut untuk mempelajari masalahnya dan coba perbaiki sebelum meluncurkan sesi debug

Tinjau semua nilai yang dihasilkan secara otomatis dan pastikan nilainya masuk akal untuk proyek dan lingkungan debug Anda

Luncurkan versus lampirkan konfigurasi

Dalam VS Code, ada dua mode debugging inti, Launch dan Attach, yang menangani dua alur kerja dan segmen pengembang yang berbeda. Bergantung pada alur kerja Anda, mengetahui jenis konfigurasi apa yang sesuai untuk proyek Anda bisa membingungkan

Jika Anda berasal dari latar belakang Alat Pengembang browser, Anda mungkin tidak terbiasa "meluncurkan dari alat Anda", karena instance browser Anda sudah terbuka. Saat Anda membuka DevTools, Anda cukup melampirkan DevTools ke tab browser yang terbuka. Di sisi lain, jika Anda berasal dari server atau latar belakang desktop, cukup normal jika editor Anda meluncurkan proses untuk Anda, dan editor Anda secara otomatis melampirkan debuggernya ke proses yang baru diluncurkan.

Cara terbaik untuk menjelaskan perbedaan antara launch dan attach adalah dengan memikirkan konfigurasi launch sebagai resep untuk memulai aplikasi Anda dalam mode debug sebelum VS Code dilampirkan padanya, sedangkan konfigurasi attach adalah resep cara menghubungkan VS Code.

Debugger Kode VS biasanya mendukung peluncuran program dalam mode debug atau melampirkan ke program yang sudah berjalan dalam mode debug. Bergantung pada permintaan (

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Tambahkan konfigurasi baru

Untuk menambahkan konfigurasi baru ke

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

• Gunakan IntelliSense jika kursor Anda berada di dalam larik konfigurasi
• Tekan tombol Tambahkan Konfigurasi untuk mengaktifkan cuplikan IntelliSense di awal larik
• Pilih opsi Tambahkan Konfigurasi di menu Jalankan

VS Code juga mendukung konfigurasi peluncuran gabungan untuk memulai beberapa konfigurasi sekaligus;

Untuk memulai sesi debug, pertama-tama pilih konfigurasi bernama Luncurkan Program menggunakan tarik-turun Konfigurasi di tampilan Jalankan dan Debug. Setelah Anda menyetel konfigurasi peluncuran, mulai sesi debug dengan F5 .

Atau, Anda dapat menjalankan konfigurasi melalui Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P)) by filtering on Debug: Select and Start Debugging or typing

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

Segera setelah sesi debug dimulai, panel DEBUG CONSOLE ditampilkan dan menampilkan hasil debug, dan Bilah Status berubah warna (oranye untuk tema warna default)

Selain itu, status debug muncul di Bilah Status yang menampilkan konfigurasi debug aktif. Dengan memilih status debug, pengguna dapat mengubah konfigurasi peluncuran aktif dan memulai proses debug tanpa perlu membuka tampilan Jalankan dan Debug

Tindakan debug

Setelah sesi debug dimulai, toolbar Debug akan muncul di bagian atas editor

Tip. Gunakan pengaturan

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

_2 untuk mengontrol lokasi toolbar debug. Itu bisa menjadi

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

_3 default,

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

4 untuk tampilan Jalankan dan Debug, atau

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

5. Bilah alat debug

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

_3 dapat diseret secara horizontal dan juga ke bawah ke area editor

Modus lari

Selain men-debug program, VS Code mendukung menjalankan program. Debug. Jalankan (Mulai Tanpa Debugging) tindakan dipicu dengan ⌃F5 (Windows, Linux Ctrl+F5) and uses the currently selected launch configuration. Many of the launch configuration attributes are supported in 'Run' mode. VS Code maintains a debug session while the program is running, and pressing the Stop button terminates the program.

Tip. Tindakan Jalankan selalu tersedia, tetapi tidak semua ekstensi debugger mendukung 'Jalankan'. Dalam hal ini, 'Jalankan' akan sama dengan 'Debug'

Breakpoint

Breakpoints dapat diubah dengan mengeklik margin editor atau menggunakan F9 pada baris saat ini. Kontrol breakpoint yang lebih halus (aktifkan/nonaktifkan/terapkan kembali) dapat dilakukan di bagian BREAKPOINTS tampilan Jalankan dan Debug.

• Breakpoint di margin editor biasanya ditampilkan sebagai lingkaran merah
• Breakpoint yang dinonaktifkan memiliki lingkaran abu-abu yang terisi
• Saat sesi debug dimulai, breakpoint yang tidak dapat didaftarkan dengan debugger berubah menjadi lingkaran berongga abu-abu. Hal yang sama mungkin terjadi jika sumber diedit saat sesi debug tanpa dukungan edit langsung sedang berjalan

Jika debugger mendukung pemecahan berbagai jenis kesalahan atau pengecualian, itu juga akan tersedia di tampilan BREAKPOINTS

Perintah Reapply All Breakpoints mengatur semua breakpoint kembali ke lokasi aslinya. Ini berguna jika lingkungan debug Anda "malas" dan "salah menempatkan" breakpoint dalam kode sumber yang belum dijalankan

Secara opsional, titik henti sementara dapat ditampilkan di penggaris ikhtisar editor dengan mengaktifkan setelan

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

Logpoint

Logpoint adalah varian dari breakpoint yang tidak "membobol" debugger tetapi mencatat pesan ke konsol. Logpoint sangat berguna untuk menyuntikkan logging sambil men-debug server produksi yang tidak dapat dijeda atau dihentikan

Logpoint diwakili oleh ikon berbentuk "berlian". Pesan log adalah teks biasa tetapi bisa menyertakan ekspresi untuk dievaluasi dalam kurung kurawal ('{}')

Sama seperti breakpoint biasa, Logpoints dapat diaktifkan atau dinonaktifkan dan juga dapat dikontrol oleh kondisi dan/atau jumlah hit

Catatan. Logpoint didukung oleh Node bawaan VS Code. js debugger, tetapi dapat diimplementasikan oleh ekstensi debug lainnya. Ekstensi Python dan Java, misalnya, mendukung Logpoints

Inspeksi data

Variabel dapat diperiksa di bagian VARIABEL pada tampilan Jalankan dan Debug atau dengan mengarahkan kursor ke sumbernya di editor. Nilai variabel dan evaluasi ekspresi relatif terhadap bingkai tumpukan yang dipilih di bagian CALL STACK

Nilai variabel dapat dimodifikasi dengan tindakan Tetapkan Nilai dari menu konteks variabel. Selain itu, Anda bisa menggunakan tindakan Salin Nilai untuk menyalin nilai variabel, atau tindakan Salin sebagai Ekspresi untuk menyalin ekspresi untuk mengakses variabel

Variabel dan ekspresi juga dapat dievaluasi dan ditonton di bagian WATCH tampilan Jalankan dan Debug

Nama dan nilai variabel dapat difilter dengan mengetik saat fokus berada di bagian VARIABEL

Meluncurkan. atribut json

Ada banyak

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

Atribut berikut wajib untuk setiap konfigurasi peluncuran

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "args": ["myFolder/path/app.js"],
        "windows": {
          "args": ["myFolder\\path\\app.js"]
        }
      }
    ]
  }
  

  9 - jenis debugger yang digunakan untuk konfigurasi peluncuran ini. Setiap ekstensi debug yang diinstal memperkenalkan suatu jenis.

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  1 untuk debugger Node bawaan, misalnya, atau

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  2 dan

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  3 untuk ekstensi PHP dan Go

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  _4 - jenis permintaan konfigurasi peluncuran ini. Saat ini,

  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/app.js",
    "cwd": "${workspaceFolder}",
    "args": ["${env:USERNAME}"]
  }
  

  8 dan

  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/app.js",
    "cwd": "${workspaceFolder}",
    "args": ["${env:USERNAME}"]
  }
  

  7 didukung

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  7 - nama ramah pembaca yang muncul di dropdown konfigurasi peluncuran Debug

Berikut adalah beberapa atribut opsional yang tersedia untuk semua konfigurasi peluncuran

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  _8 - menggunakan atribut

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  9,

  "launch": {
      "version": "0.2.0",
      "configurations": [{
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${file}"
      }]
  }
  

  0, dan

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "args": ["myFolder/path/app.js"],
        "windows": {
          "args": ["myFolder\\path\\app.js"]
        }
      }
    ]
  }
  

  5 di objek

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
        "stopOnEntry": true,
        "osx": {
          "stopOnEntry": false
        }
      }
    ]
  }
  

  8, Anda dapat mengurutkan, mengelompokkan, dan menyembunyikan konfigurasi dan gabungan di dropdown konfigurasi Debug dan di pilihan cepat Debug

• "launch": {
      "version": "0.2.0",
      "configurations": [{
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${file}"
      }]
  }
  

  3 - untuk meluncurkan tugas sebelum dimulainya sesi debug, setel atribut ini ke label tugas yang ditentukan dalam tugas. json (di folder

  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/app.js",
    "cwd": "${workspaceFolder}",
    "args": ["${env:USERNAME}"]
  }
  

  3 ruang kerja). Atau, ini dapat diatur ke

  "launch": {
      "version": "0.2.0",
      "configurations": [{
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${file}"
      }]
  }
  

  5 untuk menggunakan tugas build default Anda

• "launch": {
      "version": "0.2.0",
      "configurations": [{
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${file}"
      }]
  }
  

  6 - untuk meluncurkan tugas di akhir sesi debug, setel atribut ini ke nama tugas yang ditentukan dalam tugas. json (di folder

  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/app.js",
    "cwd": "${workspaceFolder}",
    "args": ["${env:USERNAME}"]
  }
  

  3 ruang kerja)

• "launch": {
      "version": "0.2.0",
      "configurations": [{
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${file}"
      }]
  }
  

  8 - atribut ini mengontrol visibilitas panel Debug Console selama sesi debugging

• "launch": {
      "version": "0.2.0",
      "configurations": [{
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "program": "${file}"
      }]
  }
  

  9 - hanya untuk pembuat ekstensi debug. atribut ini memungkinkan Anda untuk terhubung ke port tertentu alih-alih meluncurkan adaptor debug

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  0 - jika Anda ingin membuka URL di browser web setiap kali program di bawah debugging menampilkan pesan khusus ke konsol debug atau terminal terintegrasi. Untuk detailnya lihat bagian di bawah ini

Banyak debugger mendukung beberapa atribut berikut

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  1 - dapat dieksekusi atau file untuk dijalankan saat meluncurkan debugger

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _2 - argumen diteruskan ke program untuk di-debug

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _3 - variabel lingkungan (nilai

  {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  4 dapat digunakan untuk "membatasi" variabel)

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _5 - jalur ke file dotenv dengan variabel lingkungan

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _6 - direktori kerja saat ini untuk menemukan dependensi dan file lainnya

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _7 - port saat melampirkan ke proses yang sedang berjalan

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _8 - istirahat segera ketika program diluncurkan

• {
    "name": "launch program that reads a file from stdin",
    "type": "node",
    "request": "launch",
    "program": "program.js",
    "console": "integratedTerminal",
    "args": ["<", "in.txt"]
  }
  

  _9 - jenis konsol yang akan digunakan, misalnya,

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server.js"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "Client",
        "program": "${workspaceFolder}/client.js"
      }
    ],
    "compounds": [
      {
        "name": "Server/Client",
        "configurations": ["Server", "Client"],
        "preLaunchTask": "${defaultBuildTask}",
        "stopAll": true
      }
    ]
  }
  

  0,

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server.js"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "Client",
        "program": "${workspaceFolder}/client.js"
      }
    ],
    "compounds": [
      {
        "name": "Server/Client",
        "configurations": ["Server", "Client"],
        "preLaunchTask": "${defaultBuildTask}",
        "stopAll": true
      }
    ]
  }
  

  1, atau

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server.js"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "Client",
        "program": "${workspaceFolder}/client.js"
      }
    ],
    "compounds": [
      {
        "name": "Server/Client",
        "configurations": ["Server", "Client"],
        "preLaunchTask": "${defaultBuildTask}",
        "stopAll": true
      }
    ]
  }
  

  2

substitusi variabel

Kode VS membuat jalur yang umum digunakan dan nilai lain tersedia sebagai variabel dan mendukung penggantian variabel di dalam string di

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Properti khusus platform

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Di bawah ini adalah contoh yang meneruskan

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

Properti pengoperasian yang valid adalah

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

Perhatikan bahwa properti

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

Pada contoh di bawah ini, debug program selalu berhenti saat masuk kecuali di macOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

Konfigurasi peluncuran global

VS Code mendukung penambahan objek

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

Topik breakpoint tingkat lanjut

Breakpoint bersyarat

Fitur debugging VS Code yang kuat adalah kemampuan untuk mengatur kondisi berdasarkan ekspresi, jumlah hit, atau kombinasi keduanya

• Kondisi ekspresi. Breakpoint akan terkena setiap kali ekspresi bernilai

  var express = require('express');
  var app = express();
  
  app.get('/', function(req, res) {
    res.send('Hello World!');
  });
  
  app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
  });
  

  8
• Tekan hitungan. 'Jumlah hit' mengontrol berapa kali breakpoint perlu dipukul sebelum akan 'memutus' eksekusi. Apakah 'hit count' dihormati dan sintaks yang tepat dari ekspresi berbeda-beda di antara ekstensi debugger

Anda dapat menambahkan kondisi dan/atau hitungan hit saat membuat breakpoint sumber (dengan tindakan Add Conditional Breakpoint) atau saat memodifikasi yang sudah ada (dengan tindakan Edit Kondisi). Dalam kedua kasus tersebut, kotak teks sebaris dengan menu tarik-turun terbuka tempat Anda dapat memasukkan ekspresi

Dukungan pengeditan kondisi dan hit count juga didukung untuk breakpoint fungsi dan pengecualian. Anda dapat memulai pengeditan kondisi dari menu konteks atau tindakan Edit Kondisi inline yang baru

Contoh pengeditan kondisi di tampilan BREAKPOINTS.

Jika debugger tidak mendukung breakpoint bersyarat, tindakan Add Conditional Breakpoint dan Edit Condition akan hilang

Breakpoint sebaris

Breakpoint inline hanya akan terkena ketika eksekusi mencapai kolom yang terkait dengan breakpoint inline. Ini sangat berguna saat men-debug kode yang diperkecil yang berisi banyak pernyataan dalam satu baris

Titik putus sebaris dapat disetel menggunakan ⇧F9 (Windows, Linux Shift+F9) or through the context menu during a debug session. Inline breakpoints are shown inline in the editor.

Breakpoint sebaris juga dapat memiliki kondisi. Mengedit beberapa breakpoint pada satu baris dimungkinkan melalui menu konteks di margin kiri editor

Breakpoint fungsi

Alih-alih menempatkan breakpoint secara langsung dalam kode sumber, debugger dapat mendukung pembuatan breakpoint dengan menentukan nama fungsi. Ini berguna dalam situasi di mana sumber tidak tersedia tetapi nama fungsi diketahui

Breakpoint fungsi dibuat dengan menekan tombol + di header bagian BREAKPOINTS dan memasukkan nama fungsi. Breakpoint fungsi ditampilkan dengan segitiga merah di bagian BREAKPOINTS

Breakpoint data

Jika debugger mendukung breakpoint data, mereka dapat diatur dari tampilan VARIABLES dan akan terkena dampak ketika nilai variabel yang mendasarinya berubah. Breakpoint data ditampilkan dengan heksagon merah di bagian BREAKPOINTS

REPL Konsol Debug

Ekspresi dapat dievaluasi dengan fitur Debug Console REPL (Read-Eval-Print Loop). Untuk membuka Konsol Debug, gunakan tindakan Konsol Debug di bagian atas panel Debug atau gunakan Tampilan. Perintah Konsol Debug ( ⇧⌘Y (Windows, Linux Ctrl+Shift+Y)). Expressions are evaluated after you press Enter dan Debug Console REPL menampilkan saran saat Anda mengetik. Jika Anda perlu memasukkan beberapa baris, gunakan Shift+Enter di antara baris, lalu kirim semua baris untuk evaluasi dengan . Masukan Konsol Debug menggunakan mode editor aktif, yang berarti bahwa masukan Konsol Debug mendukung pewarnaan sintaks, lekukan, penutupan tanda kutip otomatis, dan fitur bahasa lainnya. . Debug Console input uses the mode of the active editor, which means that the Debug Console input supports syntax coloring, indentation, auto closing of quotes, and other language features.

Catatan. Anda harus berada dalam sesi debug yang sedang berjalan untuk menggunakan REPL Konsol Debug

Redirect input/output ke/dari target debug

Mengarahkan ulang input/output khusus debugger/runtime, jadi VS Code tidak memiliki solusi bawaan yang berfungsi untuk semua debugger

Berikut adalah dua pendekatan yang mungkin ingin Anda pertimbangkan

1. Luncurkan program untuk men-debug ("target debug") secara manual di terminal atau prompt perintah dan mengarahkan ulang input/output sesuai kebutuhan. Pastikan untuk meneruskan opsi baris perintah yang sesuai ke target debug sehingga debugger dapat melampirkannya. Buat dan jalankan konfigurasi debug "lampirkan" yang dilampirkan ke target debug

2. If the debugger extension you are using can run the debug target in VS Code's Integrated Terminal (or an external terminal), you can try to pass the shell redirect syntax (for example, "<" or ">") as arguments.

Berikut adalah contoh konfigurasi

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

{
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

Pendekatan ini mengharuskan sintaks "<" diteruskan melalui ekstensi debugger dan berakhir tanpa modifikasi di Terminal Terpadu

Debug multi-target

Untuk skenario kompleks yang melibatkan lebih dari satu proses (misalnya, klien dan server), VS Code mendukung debugging multi-target

Menggunakan debugging multi-target itu sederhana. setelah Anda memulai sesi debug pertama, Anda dapat meluncurkan sesi lain. Segera setelah sesi kedua aktif dan berjalan, VS Code UI beralih ke mode multi-target

• Sesi individu sekarang muncul sebagai elemen tingkat atas dalam tampilan PANGGILAN STACK
  
  
• Bilah alat debug menunjukkan sesi yang sedang aktif (dan semua sesi lainnya tersedia di menu tarik-turun)
  
  
• Tindakan debug (misalnya, semua tindakan di bilah alat debug) dilakukan pada sesi aktif. Sesi aktif dapat diubah baik dengan menggunakan menu dropdown di toolbar debug atau dengan memilih elemen yang berbeda di tampilan CALL STACK

Konfigurasi peluncuran gabungan

Cara alternatif untuk memulai beberapa sesi debug adalah dengan menggunakan konfigurasi peluncuran gabungan. Konfigurasi peluncuran gabungan mencantumkan nama dari dua atau lebih konfigurasi peluncuran yang harus diluncurkan secara paralel. Opsional

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

Konfigurasi peluncuran gabungan ditampilkan di menu tarik-turun konfigurasi peluncuran

Debugging jarak jauh

VS Code sendiri tidak mendukung debugging jarak jauh. ini adalah fitur ekstensi debug yang Anda gunakan, dan Anda harus berkonsultasi dengan halaman ekstensi di Marketplace untuk dukungan dan detail

Namun, ada satu pengecualian. Node. js debugger yang disertakan dalam VS Code mendukung debugging jarak jauh. Lihat topik untuk mempelajari cara mengonfigurasi ini

Buka URI secara otomatis saat men-debug program server

Mengembangkan program web biasanya memerlukan pembukaan URL tertentu di browser web untuk menekan kode server di debugger. VS Code memiliki fitur bawaan "serverReadyAction" untuk mengotomatiskan tugas ini

Berikut adalah contoh dari Node.js sederhana. aplikasi js Express

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

Aplikasi ini pertama-tama menginstal penangan "Hello World" untuk URL "/" dan kemudian mulai mendengarkan koneksi HTTP pada port 3000. Port diumumkan di Konsol Debug, dan biasanya, pengembang sekarang akan mengetik

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

Fitur serverReadyAction memungkinkan untuk menambahkan properti terstruktur

{
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

Di sini properti

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

Properti

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

URI yang dihasilkan kemudian dibuka di luar Kode VS ("secara eksternal") dengan aplikasi standar yang dikonfigurasi untuk skema URI

Memicu Debugging melalui Edge atau Chrome

Atau,

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

Untuk sedikit menyederhanakan, sebagian besar properti bersifat opsional dan kami menggunakan nilai fallback berikut

• pola. Debuggers_1 yang cocok dengan pesan yang umum digunakan "mendengarkan di port 3000" atau "Sekarang mendengarkan di. https. // localhost. 5001"
• uriFormat. Debuggers_2
• webRoot. Debuggers_3

Memicu Konfigurasi Peluncuran Sewenang-wenang

Dalam beberapa kasus, Anda mungkin perlu mengonfigurasi opsi tambahan untuk sesi debug browser--atau menggunakan debugger yang berbeda sama sekali. Anda dapat melakukan ini dengan menyetel

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

Konfigurasi peluncuran bernama harus dalam file atau folder yang sama dengan

{
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

Di sini fitur serverReadyAction beraksi

Langkah selanjutnya

Untuk mempelajari tentang Node. dukungan debug js, lihat

• Node. js - Menjelaskan Node. js debugger, yang termasuk dalam VS Code
• TypeScript - Node. js debugger juga mendukung debugging TypeScript

Untuk melihat tutorial tentang dasar-dasar Node. js debugging, lihat video ini

• Video Intro - Debugging - Menampilkan dasar-dasar debugging
• Memulai dengan Node. js debugging - Menunjukkan cara melampirkan debugger ke Node yang sedang berjalan. proses js

Untuk mempelajari tentang dukungan debug untuk bahasa pemrograman lain melalui ekstensi Kode VS

• C++
• Piton
• Jawa

Untuk mempelajari tentang dukungan menjalankan tugas VS Code, buka

• Tugas - Menjelaskan cara menjalankan tugas dengan Gulp, Grunt, dan Jake serta cara menampilkan kesalahan dan peringatan

Untuk menulis ekstensi debugger Anda sendiri, kunjungi

• Ekstensi Debugger - Menggunakan sampel tiruan untuk mengilustrasikan langkah-langkah yang diperlukan untuk membuat ekstensi debug Kode VS

Pertanyaan umum

Apa saja skenario debug yang didukung?

Debug dari Node. Aplikasi berbasis js didukung di Linux, macOS, dan Windows langsung dengan VS Code. Banyak skenario lain yang didukung oleh ekstensi VS Code yang tersedia di Marketplace

Saya tidak melihat konfigurasi peluncuran apa pun di tarik-turun tampilan Jalankan dan Debug. Apa yang salah?

Masalah yang paling umum adalah Anda tidak menyiapkan

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

Bagaimana cara membuka jendela debug JavaScript?

Apakah ada cara untuk men-debug JavaScript?

Apa cara terbaik untuk men-debug JavaScript?

Bagaimana cara men-debug JavaScript di jendela Chrome?