如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目
前言
在項(xiàng)目開(kāi)發(fā)中,Debug模式是非常有必要的，后端對(duì)于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果啟用Debug模式是需要單獨(dú)去配置一些東西,
所以這里整理自己搭建成功的過(guò)程分享出來(lái)?？赡懿煌腤ebstorm版本會(huì)導(dǎo)致效果不一樣，所以這里先列出我的版本。
Webstorm版本: 2018.3.4
一、新建Vue項(xiàng)目
為了演示一個(gè)完整的示例,所以從創(chuàng)建項(xiàng)目開(kāi)始，這里通過(guò) vue腳手架命令 開(kāi)始創(chuàng)建一個(gè)項(xiàng)目
vue init webpack debug-vue
如果運(yùn)行成功就會(huì)創(chuàng)建一個(gè)名稱為 debug-vue 的vue項(xiàng)目,我們通過(guò) WebStorm 打開(kāi)這個(gè)項(xiàng)目并運(yùn)行,啟動(dòng)命令
npm run dev
啟動(dòng)成功后查看頁(yè)面
這就代表這個(gè)項(xiàng)目運(yùn)行成功,這里我們?cè)诖a添加一個(gè)按鈕,等下我們通過(guò)點(diǎn)擊這個(gè)按鈕來(lái)查看Debug模式是否能夠成功到打的斷點(diǎn)處。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>首頁(yè)</h2>
<button @click="testMethods">測(cè)試bug斷點(diǎn)</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
testMethods: function () {
alert("你點(diǎn)我我就跳出來(lái)")
}
}
}
</script>
改好之后，再來(lái)查看頁(yè)面 就變成這樣了
很明顯可以看出，當(dāng)點(diǎn)擊這個(gè)按鈕會(huì)彈出一個(gè)框，說(shuō)明綁定點(diǎn)擊事件成功。
二、WebStorm配置
1、設(shè)置調(diào)試器端口
2、 添加調(diào)試配置
這樣Webstorm就配置好了。
三、測(cè)試
第一步
先在指定代碼中添加一個(gè)斷點(diǎn),然后啟動(dòng)項(xiàng)目
第二步
啟動(dòng)項(xiàng)目，命令
npm run dev
啟動(dòng)成功后
第三步
啟動(dòng)上面配置的調(diào)試按鈕
第四步
測(cè)試
以上就是如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目的詳細(xì)內(nèi)容，更多關(guān)于Vue的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于vue 實(shí)現(xiàn)token驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了基于vue 實(shí)現(xiàn)token驗(yàn)證的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-12-12
在vue中當(dāng)我們管理數(shù)據(jù)的時(shí)候比較亂，我們要用到下面的這個(gè)庫(kù)，本文主要介紹了如何使用 Vuex的入門(mén)教程，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02
vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建，本文給大家分享實(shí)例代碼，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了分享9個(gè)Vue的巧妙冷技巧，文章首先通過(guò)巧用$attrs和$listeners的技巧展開(kāi)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
詳解VUE 定義全局變量的幾種實(shí)現(xiàn)方式
本篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例
今天小編就為大家分享一篇Vue條件循環(huán)判斷+計(jì)算屬性+綁定樣式v-bind的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue如何使用笛卡爾積算法構(gòu)建sku表格問(wèn)題，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3實(shí)現(xiàn)el-table分批渲染表格
這篇文章主要為大家詳細(xì)介紹了vue3項(xiàng)目中如何實(shí)現(xiàn)el-table分批渲染表格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
深入理解vue.js雙向綁定的實(shí)現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實(shí)現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來(lái)看看吧。2016-12-12
Vue3進(jìn)階主題Composition API使用詳解
這篇文章主要為大家介紹了Vue3進(jìn)階主題Composition API使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04