Men-debug javascript dalam kode studio visual

Ini adalah debugger JavaScript berbasis DAP. Ini men-debug Node. js, Chrome, Edge, WebView2, ekstensi Kode VS, dan banyak lagi. Ini telah menjadi debugger JavaScript default di Visual Studio Code sejak 1. 46, dan secara bertahap diluncurkan di Visual Studio

Perpanjangan Malam

Versi VS Code yang dikirimkan menyertakan versi js-debug pada saat dirilis, namun Anda mungkin ingin menginstal build pra-rilis kami untuk mendapatkan perbaikan dan fitur terbaru. Build berjalan pada pukul 17:00 PST setiap hari jika ada perubahan (lihat pipeline). Untuk mendapatkan build

1. Buka tampilan ekstensi (ctrl+shift+x) dan cari @builtin @id:ms-vscode.js-debug
2. Klik kanan pada ekstensi JavaScript Debugger dan pilih Switch to Pre-Release Version
3. Muat Ulang Kode VS

Apa yang baru?

Di js-debug_ kami bertujuan untuk menyediakan proses debug yang kaya untuk aplikasi modern, tanpa atau memerlukan konfigurasi minimal. Berikut adalah beberapa fitur baru yang dibawa oleh js-debug

Debug proses anak dan pekerja

Di Node. js, proses anak akan secara otomatis di-debug. Di browser, pekerja layanan, pekerja web, dan iframe juga akan di-debug

Saat men-debug pekerja, Anda juga dapat melewati postMessage() panggilan

Simpul Debug. js proses di terminal

Anda dapat men-debug Node apa pun. js yang Anda jalankan di terminal dengan Auto Attach kami yang telah dirubah. Jika lampirkan otomatis tidak aktif, Anda dapat menjalankan perintah Debug: Toggle Auto Attach untuk mengaktifkannya. Lain kali Anda menjalankan perintah seperti npm start, kami akan men-debugnya

Setelah diaktifkan, Anda dapat mengaktifkan Lampirkan Otomatis dengan mengeklik tombol Auto Attach: On/Off di bilah status di bagian bawah layar Anda

Anda juga dapat membuat terminal satu kali untuk debugging melalui perintah Debug: Create JavaScript Debug Terminal

Di debugger sebelumnya, Anda harus ingat untuk menambahkan flag --inspect ketika Anda menjalankan perintah, dan tidak dapat menekan breakpoint di awal program karena lampiran tidak sinkron

Dukungan Pembuatan Profil

Anda dapat menangkap dan melihat profil kinerja secara native di VS Code, dengan mengklik tombol ⚪ di tampilan Call Stack, atau melalui perintah JavaScript Debugger0. Informasi profil yang dikumpulkan melalui VS Code sadar akan peta sumber

Debugging skrip npm mudah

Anda dapat men-debug skrip npm dengan mengklik lensa kode yang ditampilkan dalam paket. json, atau dengan menjalankan perintah JavaScript Debugger_1/

Anda dapat mengonfigurasi di mana dan jika lensa kode ditampilkan di pengaturan JavaScript Debugger2

Proses debug browser otomatis

Secara default, tautan apa pun yang Anda klik melalui terminal debug JavaScript (perintah Debug: Create JavaScript Debug Terminal) akan terbuka dalam mode debug. Jika mau, Anda dapat mengaktifkan ini untuk semua terminal, atau menonaktifkannya, dengan menyetel masing-masing JavaScript Debugger4 ke JavaScript Debugger5 atau JavaScript Debugger6

Breakpoint instrumentasi

Saat men-debug aplikasi web, Anda dapat mengonfigurasi breakpoint instrumentasi dari VS Code di tampilan "Browser Breakpoints"

Pelengkapan otomatis yang lebih baik di konsol debug

Pelengkapan otomatis di konsol debug telah ditingkatkan secara signifikan. Anda dapat mengharapkan saran yang lebih baik untuk ekspresi yang lebih kompleks daripada yang dapat ditangani VS Code sebelumnya

Mengembalikan intersepsi nilai

Pada pernyataan pengembalian fungsi, Anda dapat menggunakan, memeriksa, dan memodifikasi JavaScript Debugger7

Perhatikan bahwa Anda dapat menggunakan dan memodifikasi properti pada JavaScript Debugger7, tetapi tidak menetapkannya ke--ini secara efektif merupakan variabel JavaScript Debugger9

Tingkat Atas Switch to Pre-Release Version_0

Anda dapat menggunakan Switch to Pre-Release Version0 di tingkat atas di konsol debug

Namun, seperti alat pengembang Chrome, jika Anda menggunakan Switch to Pre-Release Version0 saat dijeda di breakpoint, Anda hanya akan mendapatkan kembali Switch to Pre-Release Version3 yang tertunda. Ini karena loop peristiwa JavaScript dijeda saat berada di breakpoint

Sumber yang diperkecil dengan cetak cantik

Debugger sekarang dapat mencetak file dengan cantik, terutama berguna saat menangani sumber yang diperkecil. Ini akan menampilkan prompt saat Anda masuk atau membuka file yang terlihat diperkecil, dan Anda juga dapat memicu pencetakan cantik secara manual melalui perintah Switch to Pre-Release Version4

Klik untuk melihat gif

Anda dapat mematikan permintaan saran dengan memilih Jangan Pernah, atau mengubah pengaturan debug. javascript. sarankanPrettyPrinting ke false

Dukungan untuk Microsoft Edge dan WebView2

Kami mendukung peluncuran browser Microsoft Edge baru, melalui tipe debug Switch to Pre-Release Version5. Ini mendukung semua pengaturan konfigurasi yang sama seperti Switch to Pre-Release Version6

Dengan ini hadir dukungan untuk kontrol WebView2 di aplikasi Windows desktop. Lihat demo tampilan web kami untuk mempelajari cara menyiapkannya

Perilaku sourcemap dan breakpoint yang lebih baik

Js-debug memiliki rangkaian penanganan sourcemap dan logika resolusi breakpoint yang ditulis ulang. Ini menghasilkan perilaku breakpoint yang lebih andal dalam lebih banyak kasus. Sebagai contoh

• Kami dijamin untuk menyetel breakpoint sebelum mencapainya, di mana sebelumnya ada skenario di mana hal ini tidak terjadi
• Kami dapat menangani sumber yang ada dalam banyak file yang dikompilasi. Ini biasa terjadi saat berurusan dengan bundel terpisah di aplikasi web
• Kami sekarang mendukung transpilasi di tempat (seperti Switch to Pre-Release Version7 dan Switch to Pre-Release Version8)

Salin nilai dalam tampilan tumpukan panggilan

VS Code telah lama memiliki tindakan untuk "Menyalin Nilai" dari tampilan Variabel. Namun, sebelumnya ini dipotong untuk objek atau nilai panjang. Perubahan dalam VS Code dan js-debug memungkinkan kita untuk menyalin ekspresi penuh tanpa kehilangan sebagai JSON

Hal-hal kecil lainnya

js-debug adalah penulisan ulang cleanroom dari debugger JavaScript, jadi ada banyak peningkatan kecil. Berikut adalah beberapa lagi yang tidak layak untuk judul mereka sendiri

Bagaimana Anda bisa men-debug kode JavaScript?

Bagaimana cara menjalankan kode JavaScript di Visual Studio Code?

Bagaimana cara men-debug JavaScript di chrome VS Code?

Apa itu terminal debug JavaScript di VS Code?