这次给大家带来怎样使用vscode调试编译js代码，使用vscode调试编译js代码的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
在开发的过程中，几乎不可能一次性就能写出毫无破绽的程序，断点调试代码是一个普遍的需求。
vscode 是一个非常棒的编辑器，内置功能强大的调试能力。经过简单的设定，就可以对 js 文件进行调试。但有时我们想要调试的内容是经过编译的，当然我们可以直接调试编译后的代码。但经过编译压缩以后的代码，可读性很差，且也可能无法分模块查看了，有什么方法进行编译前的代码调试么？答案当然是肯定的。
下面话不多说了，来一起看看详细的介绍吧。
vscode 的常规调试
vscode 的调试界面在窗口最左边：
最新版本的vscode，该选项默认隐藏了，需要自己打开。
首次打开调试界面时，当前没有任何调试配置，我们可以点击齿轮 icon 添加一个：
选择 nodejs 后，会自动在当前工程目录下添加 .vscode/launch.json 文件，这个文件就是 vscode 调试配置文件。
一个简易的配置文件内容为：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/index.js"
}
]
}
上面这个配置所做的工作是启动当前目录下的 index.js 文件进行调试。
我们也可以设置每次摁 F5 时自动调试当前打开的文件，只需要修改 program：
{
"program": "${file}"
}
调试编译后的文件
想要调试编译后的文件，需要对 launch.json 文件进行设置。
vscode 要想调试编译后的代码，他需要知道哪些代码是经过编译的，且需要知道编译后的代码与编译前代码的对应关系。
其实理论上 vscode 是可以把每个要执行的文件都认为是编译后的文件，进行源文件的查找？我猜是因为性能原因，我们需要自己指定哪些文件是编译后的文件。在 launch.json 中，使用outFiles属性来指定编译后的产出文件：
{
"version": "0.2.0",
"configurations": [
{
// 省略其他设置...
"outFiles": [
"${workspaceFolder}/lib/*.js",
]
// ...
}
]
}
虽然有些麻烦，但好在我们可以使用通配符。
现在有了编译后的文件，vscode 还需要知道源文件，以及编译后文件与源文件的对应关系，听着有没有很熟悉？这个过程就是通过 sourcemap 来进行实现的。
我们需要在编译 js 文件时生成相应的 .map 文件，并在产出 js 文件后面附加 .map 文件的地址：
//@ sourceMappingURL=./index.js.map
ok，现在 vscode 在执行 js 文件时，会从 outFile 中查找是否是编译后的代码，如果是，就通过 sourcemap 映射到源代码，方便我们进行调试。
自动执行编译
现在我们的开发流程变成了：修改源代码 -> 编译源代码 -> 调试。
为了方便，我们可以设置preLaunchTask属性，该属性的作用是每次调试前执行一个前置任务，我们可以把编译过程放在前置任务里。
首先我们需要来配置一个task，task的配置文件在 .vscode/tasks.json，可以打开 command palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 选择“任务：配置任务”自动生成一个：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "npm",
"script": "build",
"problemMatcher": []
}
]
}
这里我们配置了npm run build作为前置任务，每次执行调试时都会先进行 build。
示例配置文件
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "example",
"program": "${workspaceFolder}/index.js",
"preLaunchTask": "build",
"cwd": "${workspaceFolder}",
"outFiles": [
"${workspaceFolder}/lib/*.js"
]
}
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 怎样使用vscode调试编译js代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Menguasai baris arahan untuk pemaju JavaScriptJul 24, 2025 am 03:59 AMMaster Basic tetapi mendalam kemahiran baris perintah: mahir dalam menggunakan penyempurnaan tab, sejarah, carian CTRL R, kedudukan PWD dan LS-LA untuk melihat fail tersembunyi; 2. Menggunakan Node.js dan Pengurus Pakej dengan cekap: memanfaatkan NPMINIT-Y,--SAVE-DEV, NPX tanpa pemasangan dan operasi, skrip NPMRUN dan pemeriksaan ketinggalan zaman, dan mengoptimumkan kelajuan PNPM; 3. Kod carian yang tepat dan log: Gabungkan grep-r/-i, cari fail, jq format JSON dan XARGS untuk mencari fail JS dengan kandungan tertentu; 4. Tulis Tugas Automasi Skrip Mudah: seperti Deploy.SH One-Click Deployment, ChMod X Grant Hak Pelaksanaan; 5. Custom Sh
Bagaimana untuk memeriksa sama ada pemboleh ubah adalah array di JS?Jul 24, 2025 am 03:58 AMUntuk menentukan sama ada pembolehubah adalah jenis array, kaedah array.isArray () lebih disukai, dan kedua, object.prototype.toString.call () boleh digunakan. 1.Array.IsArray (Variable) mengembalikan benar atau palsu, sesuai untuk pelayar moden dan node.js; 2.Object.prototype.toString.call (variable) === '[ObjectArray]', serasi dengan persekitaran lama. Elakkan menggunakan TypeOf dan Instanceof kerana mereka mempunyai kelemahan dalam menilai tatasusunan. Pilih kaedah yang betul mengikut keperluan anda: Keutamaan diberikan jika tidak perlu bersesuaian dengan versi lama
Strategi Pengurusan Ketergantungan JavaScriptJul 24, 2025 am 03:58 AMPastikan versi ketergantungan konsisten, kemas kini kebergantungan secara teratur, membezakan jenis kebergantungan, dan menggunakan monorepo untuk menguruskan kebergantungan pelbagai projek. 1. Gunakan pakej-lock.json atau yarn.lock untuk mengemukakan kepada Git untuk memastikan konsistensi alam sekitar; 2. Semak pokok ketergantungan secara teratur untuk mengelakkan pemasangan dan konflik pendua; 3. Gunakan npmoutdated atau yarnoutdated untuk menyemak kemas kini, mengutamakan isu keselamatan dan menilai kesan peningkatan versi utama; 4. Jelas membezakan kebergantungan dan kebencian untuk mengelakkan alat pembangunan yang salah dalam persekitaran pengeluaran; 5. Gunakan alat seperti Lerna atau NX untuk mengurus kebergantungan bersama dan kod pelbagai projek untuk meningkatkan kecekapan kerjasama.
Strategi Ujian JavaScript Advanced dengan Jest dan PlaywrightJul 24, 2025 am 03:56 AMGunakan Jest's mockfunctions dan pemasa untuk mengawal tingkah laku tak segerak, dan meningkatkan kecekapan ujian melalui jest.fn () dan jest.usefakeTimers (); 2. Gunakan lekapan dan pageObjectModel (POM) dalam penulis drama untuk meningkatkan penyelenggaraan dan merangkumi operasi umum dan logik halaman; 3. Jest dan penulis drama dapat bersama-sama mencapai liputan komprehensif ujian unit dan ujian akhir-ke-akhir; 4. Traceviewer Playwright boleh digunakan untuk menguji ujian gagal secara intuitif. Strategi ini masing -masing mengoptimumkan kecekapan ujian, struktur kod, liputan tahap ujian dan keupayaan debugging, dan sesuai untuk projek yang kompleks
Cara Menggunakan Bun: All-One JavaScript ToolkitJul 24, 2025 am 03:54 AMBun adalah runtime JavaScript moden yang boleh menggantikan alat seperti Node.js, NPM dan Webpack. Kelebihan terasnya terletak pada kelajuan. 1. Bun dibina di atas zig, menggunakan enjin JavaScriptcore, yang boleh secara langsung menjalankan fail JavaScript dan TypeScript tanpa konfigurasi tambahan; 2. Ia mempunyai pengurus pakej terbina dalam, menyokong kebergantungan pemasangan dari NPM, dan kelajuan adalah 10-100 kali lebih cepat daripada NPM, dan menghasilkan fail kunci bun.lockb; 3. Pembungkus asli terbina dalam, menyokong pengurangan, pembolehubah persekitaran, segmentasi kod dan fungsi lain, yang boleh menggantikan webpack atau esbuild; 4. Menyediakan pelari ujian cepat dengan sintaks jest, mencari secara automatik
Komunikasi masa nyata dengan websocket JavaScriptJul 24, 2025 am 03:50 AMUntuk mencapai komunikasi masa nyata, kunci untuk menggunakan WebSocket JavaScript adalah untuk memahami penggunaan asas dan senario umum. 1. Hanya satu baris kod yang diperlukan untuk mewujudkan sambungan: constSocket = newWebsocket ('ws: //example.com/socket');, menggunakan terbuka, mesej, ralat, dan peristiwa rapat untuk mengendalikan status sambungan; 2. Hantar dan terima data dalam format JSON, hantar melalui socket.send (), dengar acara mesej untuk menerima dan menghuraikan data; 3. Mengendalikan pemotongan dan penyambungan semula, anda boleh menyambung semula secara automatik dengan mendengar peristiwa rapat dan ralat, digabungkan dengan setTimeout,
Modul ES vs Commonjs: Perbandingan terperinciJul 24, 2025 am 03:50 AMEsmodul (ESM) dan CommonJs adalah dua sistem modul JavaScript. Perbezaan utama adalah sintaks, mekanisme pemuatan, masa pelaksanaan, sokongan persekitaran dan interoperabilitas. 1. Sintaks, ESM menggunakan pengisytiharan statik import/eksport, dan penggunaan biasa yang memerlukan ()/modul.exports untuk menetapkan nilai secara dinamik. 2. Dari segi mekanisme pemuatan, ESM menyokong analisis statik dan gegaran pokok. CommonJS dimuatkan secara dinamik pada masa runtime, dengan fleksibiliti yang tinggi tetapi tidak kondusif untuk pengoptimuman. 3. Dalam masa pelaksanaan, ESM boleh mendapatkan nilai terkini melalui mengikat masa nyata; Output modul cache biasa boleh mengembalikan bahagian
Strategi Pengendalian Kesalahan Lanjutan di JavaScript dan Node.jsJul 24, 2025 am 03:47 AMDefinecustomerrorclasslikevalidationerroranddatabaseerrortoenablePreciseerrorhandlinginginginstanceofandimproveloggingconsistency.2.usecentralizederror-handlingmiddlearexpress.jsbypassingerrorstonext
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
