Vue提供的三種調(diào)試方式你知道嗎
一、在 VS Code 中配置調(diào)試
使用 Vue CLI 2搭建項目時:
更新 config/index.js
內(nèi)的 devtool property:
devtool: 'source-map',
點擊在 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è)置斷點:
#啟動項目 npm run dev
在debug頁面選擇“vuejs:chrome
”:
二、debugger語句
推薦
function potentiallyBuggyCode() { debugger // do potentially buggy stuff to examine, step through, etc. }
瀏覽器:F12打開DevTools,當(dāng)運行程序后,會停在debbger語句:
注意:當(dāng)安裝了Eslint插件時,點擊快速修復(fù),Disable no-debugger for this line
.不然,保存時會自動清除debugger語句。
三、Vue Devtools
谷歌瀏覽器的插件。
詳情參考官方鏈接:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue單頁面實現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存
這篇文章主要介紹了vue單頁面實現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存,在當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存并可取消刷新,以防止填寫的表單內(nèi)容丟失,感興趣的小伙伴們可以參考一下2018-11-11vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)(pdf/word/excel表格)
最近在項目中要做一個pdf在線預(yù)覽的功能,索性給大家整理個全面的,這篇文章主要給大家介紹了關(guān)于vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下2022-05-05