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)文章
vue的圖片需要用require的方式進(jìn)行引入問題
這篇文章主要介紹了vue的圖片需要用require的方式進(jìn)行引入問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對(duì)稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-05-05vue開發(fā)頁面自適應(yīng)屏幕尺寸的實(shí)例代碼
使用vue開發(fā)的頁面都是通過px設(shè)置它的尺寸,如果換了一個(gè)不同尺寸的屏幕就會(huì)出現(xiàn)頁面排版錯(cuò)亂,顯示不完整等情況,下面通過插件將px裝換為rem單位適應(yīng)不同尺寸的屏幕,需要的朋友可以參考下2022-12-12vue單頁面實(shí)現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時(shí)提示保存
這篇文章主要介紹了vue單頁面實(shí)現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時(shí)提示保存,在當(dāng)前頁面刷新或跳轉(zhuǎn)時(shí)提示保存并可取消刷新,以防止填寫的表單內(nèi)容丟失,感興趣的小伙伴們可以參考一下2018-11-11vue項(xiàng)目中常見的三種文件類型在線預(yù)覽實(shí)現(xiàn)(pdf/word/excel表格)
最近在項(xiàng)目中要做一個(gè)pdf在線預(yù)覽的功能,索性給大家整理個(gè)全面的,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常見的三種文件類型在線預(yù)覽實(shí)現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下2022-05-05