Vue提供的三種調(diào)試方式你知道嗎
一、在 VS Code 中配置調(diào)試
使用 Vue CLI 2搭建項(xiàng)目時(shí)：
更新 config/index.js 內(nèi)的 devtool property：
devtool: 'source-map',
點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來到 Debug 視圖：
選擇Chrome/Firefox：Launch 環(huán)境。將 launch.json 的內(nèi)容替換為：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
開始調(diào)試：
設(shè)置斷點(diǎn)：
#啟動(dòng)項(xiàng)目 npm run dev
在debug頁面選擇“vuejs：chrome”：
二、debugger語句
推薦
function potentiallyBuggyCode() {
debugger
// do potentially buggy stuff to examine, step through, etc.
}
瀏覽器：F12打開DevTools，當(dāng)運(yùn)行程序后，會(huì)停在debbger語句：
注意：當(dāng)安裝了Eslint插件時(shí)，點(diǎn)擊快速修復(fù)，Disable no-debugger for this line.不然，保存時(shí)會(huì)自動(dòng)清除debugger語句。
三、Vue Devtools
谷歌瀏覽器的插件。
詳情參考官方鏈接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了使用vxe-table合并單元格后增加選中效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線翻譯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了element-ui查看大圖的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue3.x項(xiàng)目降級(jí)到vue2.7的解決方案
Vue2.7是Vue2.x的最終次要版本,下面這篇文章主要給大家介紹了關(guān)于vue3.x項(xiàng)目降級(jí)到vue2.7的解決方案,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue動(dòng)態(tài)路由實(shí)現(xiàn)多級(jí)嵌套面包屑的思路與方法
在實(shí)際項(xiàng)目中我們會(huì)碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由多級(jí)嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要為大家詳細(xì)解析了Vue監(jiān)聽數(shù)組變化的源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了從eleUI的Loading知道了單例模式的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01