Vue提供的三種調(diào)試方式你知道嗎
更新時間：2022年01月18日 11:41:03 作者：長不大的大灰狼
這篇文章主要為大家介紹了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的圖片需要用require的方式進行引入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
MD5是一種信息摘要算法(對稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue3封裝輪播圖組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
使用vue開發(fā)的頁面都是通過px設(shè)置它的尺寸，如果換了一個不同尺寸的屏幕就會出現(xiàn)頁面排版錯亂，顯示不完整等情況，下面通過插件將px裝換為rem單位適應(yīng)不同尺寸的屏幕,需要的朋友可以參考下2022-12-12
vue單頁面實現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存
這篇文章主要介紹了vue單頁面實現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存，在當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存并可取消刷新，以防止填寫的表單內(nèi)容丟失，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個通用的頁面結(jié)構(gòu),本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車的小練習(xí)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題，非常不錯，具有參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)(pdf/word/excel表格)
最近在項目中要做一個pdf在線預(yù)覽的功能,索性給大家整理個全面的,這篇文章主要給大家介紹了關(guān)于vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下2022-05-05