這篇“如何利用vscode調(diào)試編譯后的js代碼”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“如何利用vscode調(diào)試編譯后的js代碼”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。
Visual Studio Code 是一個運(yùn)行于 OS X，Windows和 Linux 之上的，針對于編寫現(xiàn)代 web 和云應(yīng)用的跨平臺編輯器，它為開發(fā)者們提供了對多種編程語言的內(nèi)置支持，并且正如 Microsoft 在Build 大會的 keynote 中所指出的，這款編輯器也會為這些語言都提供了豐富的代碼補(bǔ)全和導(dǎo)航功能。
vscode 的常規(guī)調(diào)試
vscode 的調(diào)試界面在窗口最左邊：
最新版本的vscode，該選項默認(rèn)隱藏了，需要自己打開。
首次打開調(diào)試界面時，當(dāng)前沒有任何調(diào)試配置，我們可以點(diǎn)擊齒輪 icon 添加一個：
選擇 nodejs 后，會自動在當(dāng)前工程目錄下添加 .vscode/launch.json 文件，這個文件就是 vscode 調(diào)試配置文件。
一個簡易的配置文件內(nèi)容為：
重慶分公司
重慶分公司
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程序",
"program": "${workspaceFolder}/index.js"
}
]
}上面這個配置所做的工作是啟動當(dāng)前目錄下的 index.js 文件進(jìn)行調(diào)試。
我們也可以設(shè)置每次摁 F5 時自動調(diào)試當(dāng)前打開的文件，只需要修改 program：
{
"program": "${file}"
}調(diào)試編譯后的文件
想要調(diào)試編譯后的文件，需要對 launch.json 文件進(jìn)行設(shè)置。
vscode 要想調(diào)試編譯后的代碼，他需要知道哪些代碼是經(jīng)過編譯的，且需要知道編譯后的代碼與編譯前代碼的對應(yīng)關(guān)系。
其實(shí)理論上 vscode 是可以把每個要執(zhí)行的文件都認(rèn)為是編譯后的文件，進(jìn)行源文件的查找？我猜是因為性能原因，我們需要自己指定哪些文件是編譯后的文件。在 launch.json 中，使用outFiles屬性來指定編譯后的產(chǎn)出文件：
{
"version": "0.2.0",
"configurations": [
{
// 省略其他設(shè)置...
"outFiles": [
"${workspaceFolder}/lib/*.js",
]
// ...
}
]
}雖然有些麻煩，但好在我們可以使用通配符。
現(xiàn)在有了編譯后的文件，vscode 還需要知道源文件，以及編譯后文件與源文件的對應(yīng)關(guān)系，聽著有沒有很熟悉？這個過程就是通過 sourcemap 來進(jìn)行實(shí)現(xiàn)的。
我們需要在編譯 js 文件時生成相應(yīng)的 .map 文件，并在產(chǎn)出 js 文件后面附加 .map 文件的地址：
//@ sourceMappingURL=./index.js.map
ok，現(xiàn)在 vscode 在執(zhí)行 js 文件時，會從 outFile 中查找是否是編譯后的代碼，如果是，就通過 sourcemap 映射到源代碼，方便我們進(jìn)行調(diào)試。
自動執(zhí)行編譯
現(xiàn)在我們的開發(fā)流程變成了：修改源代碼 -> 編譯源代碼 -> 調(diào)試。
為了方便，我們可以設(shè)置preLaunchTask屬性，該屬性的作用是每次調(diào)試前執(zhí)行一個前置任務(wù)，我們可以把編譯過程放在前置任務(wù)里。
首先我們需要來配置一個task，task的配置文件在 .vscode/tasks.json，可以打開 command palette (??P (Windows, Linux Ctrl+Shift+P)) 選擇“任務(wù)：配置任務(wù)”自動生成一個：
{
// 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作為前置任務(wù)，每次執(zhí)行調(diào)試時都會先進(jìn)行 build。
示例配置文件
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請訪問: 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"
]
}以上是“如何利用vscode調(diào)試編譯后的js代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
