夙夜小哥這幾天有個項目前端人手不夠，要我支援幾天。我本人之前是寫後端的，在支援的過程中發現前端對JavaScript或者typescript的方法提示以及代碼導航功能都比較弱，可能是由於js本身屬於弱類型語言，所以這波並不屬於VSCode的鍋。

但是我又發現好像VSCode不進行配置的話，沒法直接使用調試功能，好傢伙，這下讓我一頓上網衝浪百度+谷歌，翻來翻去感覺網友都沒有寫在點子上，最後還是我結合Vue官方文檔與Copilot得到了答案

不得不感嘆如今AI能力的強大。。

https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

https://copilot.microsoft.com/

好了，接下來進入本文的正題，“在VSCode中，如何調試我們的Vue前端項目"

開啓webpack源映射source-map

首先新建vue.confg.js，開啓webpack源映射source-map

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

接下來選擇Run and Debug，創建屬於VSCode的launch.json配置文件

在以上source-map開啓的基礎上，launch.json配置文件的具體配置需要根據當前項目src目錄所處的位置有以下兩種情況

• scr在跟目錄下如/project/src
• src不在根目錄下如/project/.../src

launch.json配置文件的具體配置見下文

src在根目錄下如/project/src

項目結構如下：vue3-practice/src

.vscode/launch.json配置如下：

• 指定項目啓動端口："url": "http://localhost:5173"
• 指定src目錄位置："webRoot": "${workspaceFolder}/src",其中 ${workspaceFolder}意味着項目根目錄vue3-practice
• 開啓webpack源映射source-map："sourceMaps": true 。這裏的 "sourceMaps": true 和vue.config.js中的 module.exports = { configureWebpack: { devtool: 'source-map' } } 的配置並不重複。前者是 VS Code 調試配置中的一部分，用於告訴調試器使用源映射，而後者是 Webpack 配置的一部分，用於生成源映射文件。兩者共同作用，確保調試器能夠正確映射到源代碼。
• 在調試配置中，"trace": true 表示啓用詳細的調試日誌記錄。這將生成更多的調試信息，幫助你診斷和解決調試過程中遇到的問題。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "trace": true
        }
    ]
}

首先正常啓動項目

npm run dev
或者
npm run serve

在項目已經啓動的基礎上，給項目源代碼適當位置打上斷點，然後選擇IDE左側邊欄的Debug按鈕以Debug模式再次啓動

同時自動彈出新的調試模式瀏覽器主頁窗口，證明調試模式已生效

src不在根目錄下如/project/.../src

項目結構如下：NORMALIZEDVUE3/module_vue3/src

.vscode/launch.json配置如下：

• 指定項目啓動端口："url": "http://localhost:5173"
• 指定src目錄位置："webRoot": "${workspaceFolder}/module_vue3/src",其中 ${workspaceFolder} 意味着項目的根目錄NORMALIZEDVUE3
• 開啓webpack源映射source-map："sourceMaps": true 。這裏的 "sourceMaps": true 和vue.config.js中的 module.exports = { configureWebpack: { devtool: 'source-map' } } 的配置並不重複。前者是 VS Code 調試配置中的一部分，用於告訴調試器使用源映射，而後者是 Webpack 配置的一部分，用於生成源映射文件。兩者共同作用，確保調試器能夠正確映射到源代碼。
• 在調試配置中，"trace": true 表示啓用詳細的調試日誌記錄。這將生成更多的調試信息，幫助你診斷和解決調試過程中遇到的問題。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}/module_vue3/src",
            "sourceMaps": true,
            "trace": true
        }
    ]
}

首先正常啓動項目

npm run dev
或者
npm run serve

在項目已經啓動的基礎上，給項目源代碼適當位置打上斷點，然後選擇IDE左側邊欄的Debug按鈕以Debug模式再次啓動

同時自動彈出新的調試模式瀏覽器主頁窗口，證明調試模式已生效

打完收工！