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)簽自動(dòng)重命名 8. Bracket Pair Colorizer 2 - 括號(hào)配對(duì)著色 9. indent-rainbow - 縮進(jìn)彩虹 10. GitLens - Git增強(qiáng)
代碼質(zhì)量插件
11. ESLint - 代碼規(guī)范檢查 12. Prettier - 代碼格式化 13. Error Lens - 錯(cuò)誤提示增強(qiáng) 14. Path Intellisense - 路徑智能提示 15. Auto Import - ES6, TS, JSX, TSX - 自動(dòng)導(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í)自動(dòng)格式化
"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：啟動(dòng)開發(fā)服務(wù)器
npm run serve # 或 yarn serve
步驟2：VS Code中啟動(dòng)調(diào)試
- 按
F5或點(diǎn)擊調(diào)試面板的開始按鈕 - 選擇 “Launch Chrome (Vue.js)” 配置
- 瀏覽器會(huì)自動(dòng)打開并連接調(diào)試器
步驟3：設(shè)置斷點(diǎn)
- 在
.vue文件中點(diǎn)擊行號(hào)左側(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 // 只有特定條件下才會(huì)觸發(fā)斷點(diǎn)
}
// 2. 性能監(jiān)控
console.time('組件渲染時(shí)間')
// 組件渲染邏輯
console.timeEnd('組件渲染時(shí)間')
// 3. 對(duì)象深度查看
console.table(userData) // 表格形式展示對(duì)象數(shù)組
console.dir(vueInstance) // 展示對(duì)象的所有屬性
// 4. 分組調(diào)試信息
console.group('用戶操作追蹤')
console.log('點(diǎn)擊按鈕')
console.log('發(fā)送請(qǐng)求')
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 + ↑/↓ 向上/下移動(dòng)行 Alt + ↑/↓ 向上/下移動(dòng)行 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 重命名符號(hào) Ctrl + Shift + O 轉(zhuǎn)到文件中的符號(hào) Ctrl + T 轉(zhuǎn)到工作區(qū)中的符號(hào)
五、調(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 // 請(qǐng)求完成
const data = await response.json()
debugger // 數(shù)據(jù)解析完成
return data
} catch (error) {
debugger // 錯(cuò)誤處理
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啟動(dòng)參數(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啟動(dòng)、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請(qǐng)求
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp使用scroll-view下拉刷新無法取消的坑及解決
這篇文章主要介紹了uniapp使用scroll-view下拉刷新無法取消的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue項(xiàng)目中常見問題及解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點(diǎn)畫線
最近工作中遇到了一個(gè)需求,需要利用echarts在地圖上面標(biāo)記點(diǎn)位,所下面這篇文章主要給大家介紹了關(guān)于如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點(diǎn)畫線的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue項(xiàng)目的訪問端口及其設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間
這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時(shí)間,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式
這篇文章主要介紹了Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
Element?Plus?表格表單校驗(yàn)功能實(shí)現(xiàn)原理
本文檔講解基于Element?Plus的可編輯表格表單校驗(yàn)功能的實(shí)現(xiàn),重點(diǎn)說明樣式配置對(duì)校驗(yàn)錯(cuò)誤信息顯示的關(guān)鍵作用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-09-09
Vue導(dǎo)入Echarts實(shí)現(xiàn)散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實(shí)現(xiàn)散點(diǎn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-12-12