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