Vscode中開發(fā)VUE項(xiàng)目的調(diào)試實(shí)現(xiàn)方案
更新時(shí)間：2025年10月27日 08:47:50 作者：yz123lucky
本文詳細(xì)介紹了如何在VSCode中進(jìn)行Vue前端開發(fā)和調(diào)試,包括必備插件安裝、VSCode配置、調(diào)試方案（瀏覽器調(diào)試、VueDevTools、Console調(diào)試）、常用快捷鍵和調(diào)試最佳實(shí)踐,適合Vue3+TypeScript項(xiàng)目的開發(fā)調(diào)試
VS Code + Vue前端開發(fā)調(diào)試完整指南
一、必備插件安裝
核心Vue開發(fā)插件
1. Vue Language Features (Volar) - Vue 3官方推薦 2. TypeScript Vue Plugin (Volar) - TS支持 3. Vue VSCode Snippets - 代碼片段 4. Vetur - Vue 2項(xiàng)目使用（與Volar二選一）
調(diào)試相關(guān)插件
5. Debugger for Chrome/Edge - 瀏覽器調(diào)試 6. Live Server - 本地服務(wù)器 7. Auto Rename Tag - 標(biāo)簽自動重命名 8. Bracket Pair Colorizer 2 - 括號配對著色 9. indent-rainbow - 縮進(jìn)彩虹 10. GitLens - Git增強(qiáng)
代碼質(zhì)量插件
11. ESLint - 代碼規(guī)范檢查 12. Prettier - 代碼格式化 13. Error Lens - 錯誤提示增強(qiáng) 14. Path Intellisense - 路徑智能提示 15. Auto Import - ES6, TS, JSX, TSX - 自動導(dǎo)入
二、VS Code配置文件
1. settings.json 配置
{
// Vue相關(guān)配置
"vue.complete.casing.tags": "kebab",
"vue.complete.casing.props": "camel",
"volar.codeLens.pugTools": false,
"volar.codeLens.scriptSetupTools": true,
// 文件關(guān)聯(lián)
"files.associations": {
"*.vue": "vue"
},
// 格式化配置
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 保存時(shí)自動格式化
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 調(diào)試相關(guān)
"debug.javascript.usePreview": true,
"debug.javascript.debugByLinkOptions": "always",
// 其他優(yōu)化
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false,
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
}
}
2. launch.json 調(diào)試配置
創(chuàng)建 .vscode/launch.json：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome (Vue.js)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///./~/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Attach to Chrome (Vue.js)",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"name": "Launch Edge (Vue.js)",
"type": "msedge",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src"
}
]
}
3. tasks.json 任務(wù)配置
創(chuàng)建 .vscode/tasks.json：
{
"version": "2.0.0",
"tasks": [
{
"label": "npm: serve",
"type": "npm",
"script": "serve",
"group": {
"kind": "build",
"isDefault": true
},
"isBackground": true,
"problemMatcher": {
"owner": "webpack",
"pattern": {
"regexp": ""
},
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}
},
{
"label": "npm: build",
"type": "npm",
"script": "build",
"group": "build"
},
{
"label": "npm: lint",
"type": "npm",
"script": "lint",
"group": "test"
}
]
}
三、調(diào)試方案詳解
1. 瀏覽器調(diào)試（推薦）
步驟1：啟動開發(fā)服務(wù)器
npm run serve # 或 yarn serve
步驟2：VS Code中啟動調(diào)試
- 按
F5或點(diǎn)擊調(diào)試面板的開始按鈕 - 選擇 “Launch Chrome (Vue.js)” 配置
- 瀏覽器會自動打開并連接調(diào)試器
步驟3：設(shè)置斷點(diǎn)
- 在
.vue文件中點(diǎn)擊行號左側(cè)設(shè)置斷點(diǎn) - 支持在
<script>、<template>和<style>塊中調(diào)試
2. Vue DevTools 調(diào)試
安裝瀏覽器擴(kuò)展
- Chrome: Vue.js devtools
- Firefox: Vue.js devtools
- Edge: Vue.js devtools
使用技巧
// 在組件中添加調(diào)試標(biāo)記
export default {
name: 'MyComponent',
// 開發(fā)環(huán)境下暴露到全局
created() {
if (process.env.NODE_ENV === 'development') {
window.myComponent = this
}
}
}
3. Console調(diào)試技巧
// 1. 條件斷點(diǎn)
console.log('用戶ID:', userId)
if (userId === 'debug') {
debugger // 只有特定條件下才會觸發(fā)斷點(diǎn)
}
// 2. 性能監(jiān)控
console.time('組件渲染時(shí)間')
// 組件渲染邏輯
console.timeEnd('組件渲染時(shí)間')
// 3. 對象深度查看
console.table(userData) // 表格形式展示對象數(shù)組
console.dir(vueInstance) // 展示對象的所有屬性
// 4. 分組調(diào)試信息
console.group('用戶操作追蹤')
console.log('點(diǎn)擊按鈕')
console.log('發(fā)送請求')
console.groupEnd()
四、常用快捷鍵大全
VS Code通用快捷鍵
Ctrl + Shift + P 打開命令面板 Ctrl + P 快速打開文件 Ctrl + ` 打開/關(guān)閉終端 Ctrl + B 切換側(cè)邊欄 Ctrl + Shift + E 文件資源管理器 Ctrl + Shift + F 全局搜索 Ctrl + Shift + H 全局替換 Ctrl + Shift + G Git面板 Ctrl + Shift + D 調(diào)試面板 Ctrl + Shift + X 擴(kuò)展面板
編輯快捷鍵
Ctrl + D 選擇下一個(gè)相同的單詞 Ctrl + Shift + L 選擇所有相同的單詞 Alt + Click 多光標(biāo)選擇 Ctrl + Alt + ↑/↓ 向上/下添加光標(biāo) Ctrl + Shift + K 刪除行 Ctrl + Shift + ↑/↓ 向上/下移動行 Alt + ↑/↓ 向上/下移動行 Ctrl + / 切換行注釋 Ctrl + Shift + / 切換塊注釋
調(diào)試專用快捷鍵
F5 開始調(diào)試 F9 切換斷點(diǎn) F10 單步跳過（Step Over） F11 單步進(jìn)入（Step Into） Shift + F11 單步跳出（Step Out） Ctrl + Shift + F5 重啟調(diào)試 Shift + F5 停止調(diào)試 Ctrl + K Ctrl + I 顯示懸停信息
Vue開發(fā)快捷鍵
Ctrl + Space 智能提示 Ctrl + . 快速修復(fù) F12 轉(zhuǎn)到定義 Ctrl + F12 轉(zhuǎn)到實(shí)現(xiàn) Shift + F12 查找所有引用 F2 重命名符號 Ctrl + Shift + O 轉(zhuǎn)到文件中的符號 Ctrl + T 轉(zhuǎn)到工作區(qū)中的符號
五、調(diào)試最佳實(shí)踐
1. 斷點(diǎn)調(diào)試技巧
條件斷點(diǎn)
// 右鍵斷點(diǎn)設(shè)置條件 // 例如：只有當(dāng) index > 5 時(shí)才觸發(fā)斷點(diǎn)
日志斷點(diǎn)
// 不暫停執(zhí)行，只輸出日志 // 在斷點(diǎn)上右鍵選擇"Logpoint"
內(nèi)聯(lián)斷點(diǎn)
// 在單行代碼中設(shè)置多個(gè)斷點(diǎn) const result = process(data).filter(item => item.valid).map(item => transform(item)) // ↑斷點(diǎn)1 ↑斷點(diǎn)2 ↑斷點(diǎn)3
2. Vue組件調(diào)試
監(jiān)聽器調(diào)試
// 在Vue組件中
export default {
watch: {
userData: {
handler(newVal, oldVal) {
console.log('userData changed:', { newVal, oldVal })
debugger // 數(shù)據(jù)變化時(shí)觸發(fā)斷點(diǎn)
},
deep: true,
immediate: true
}
}
}
生命周期調(diào)試
export default {
created() {
console.log('Component created')
debugger
},
mounted() {
console.log('Component mounted', this.$el)
debugger
},
updated() {
console.log('Component updated')
debugger
}
}
3. 異步代碼調(diào)試
Promise調(diào)試
async function fetchData() {
try {
debugger // 異步函數(shù)開始
const response = await fetch('/api/data')
debugger // 請求完成
const data = await response.json()
debugger // 數(shù)據(jù)解析完成
return data
} catch (error) {
debugger // 錯誤處理
console.error('Fetch error:', error)
}
}
Vue Router調(diào)試
// 路由守衛(wèi)調(diào)試
router.beforeEach((to, from, next) => {
console.log('Route change:', { to: to.path, from: from.path })
debugger
next()
})
4. 性能調(diào)試
組件渲染性能
// 在Vue組件中
export default {
updated() {
console.log(`${this.$options.name} re-rendered`)
},
beforeUpdate() {
console.time(`${this.$options.name} update`)
},
updated() {
console.timeEnd(`${this.$options.name} update`)
}
}
內(nèi)存泄漏檢測
// 組件銷毀時(shí)清理
beforeDestroy() {
// 清理定時(shí)器
if (this.timer) {
clearInterval(this.timer)
}
// 清理事件監(jiān)聽
window.removeEventListener('resize', this.handleResize)
// 清理第三方庫實(shí)例
if (this.chart) {
this.chart.destroy()
}
}
六、常見問題解決
1. 斷點(diǎn)不生效
// 確保sourceMap開啟
// vue.config.js
module.exports = {
configureWebpack: {
devtool: 'eval-source-map'
}
}
2. 調(diào)試器連接失敗
# Chrome啟動參數(shù) chrome.exe --remote-debugging-port=9222 --user-data-dir="C:/chrome-debug"
3. TypeScript調(diào)試配置
// tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false
}
}
4. 熱重載問題
// vue.config.js
module.exports = {
devServer: {
hot: true,
overlay: {
warnings: false,
errors: true
}
}
}
完整插件配置
- Vue 3推薦使用Volar插件
- 調(diào)試、代碼質(zhì)量、Git等15個(gè)必備插件
- 詳細(xì)的settings.json配置
三種調(diào)試方案
- 瀏覽器調(diào)試（主推）- 支持?jǐn)帱c(diǎn)、變量監(jiān)視
- Vue DevTools - 組件狀態(tài)調(diào)試
- Console調(diào)試 - 性能監(jiān)控和條件斷點(diǎn)
快捷鍵大全
- VS Code通用快捷鍵
- 調(diào)試專用快捷鍵（F5啟動、F9斷點(diǎn)、F10單步等）
- Vue開發(fā)快捷鍵
實(shí)用調(diào)試技巧
- 條件斷點(diǎn)和日志斷點(diǎn)
- Vue組件生命周期調(diào)試
- 異步代碼和路由調(diào)試
- 性能監(jiān)控和內(nèi)存泄漏檢測
這套方案特別適合Vue 3 + TypeScript項(xiàng)目，也兼容Vue 2。配置完成后，你可以：
- 直接在Vue文件中設(shè)置斷點(diǎn)
- 實(shí)時(shí)查看組件狀態(tài)和Props
- 調(diào)試計(jì)算屬性和監(jiān)聽器
- 追蹤路由跳轉(zhuǎn)和API請求
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文講解了如何在Linux環(huán)境中部署Vue項(xiàng)目,包括安裝依賴、編譯項(xiàng)目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細(xì)說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進(jìn)行性能、安全性測試和備份的重要性,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue3封裝側(cè)導(dǎo)航文字骨架效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時(shí)間，可以直接搭配vue使用2022-11-11
在?Vite項(xiàng)目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過程詳解
在一次項(xiàng)目腳手架升級的過程中，將之前基于?webpack?搭建的項(xiàng)目移植到?Vite?構(gòu)建，這篇文章主要介紹了在?Vite項(xiàng)目中，使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下2022-12-12
vue3 ts打包失敗ts類型校驗(yàn)未通過導(dǎo)致打包失敗的解決方案
這篇文章主要介紹了vue3 ts打包失敗ts類型校驗(yàn)未通過導(dǎo)致打包失敗的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
main.js是項(xiàng)目的入口文件，項(xiàng)目中所有的頁面都會加載main.js，本文主要介紹了vue項(xiàng)目main.js配置及使用方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑
這篇文章主要介紹了淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
M3U8是一種基于HTTP?Live?Streaming?(HLS)的視頻格式,它支持視頻的分段傳輸,非常適合用于網(wǎng)絡(luò)直播和點(diǎn)播服務(wù),這篇文章主要介紹了vue3使用video.js播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下面2025-08-08
淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06