Webstorm+Chrome 除錯Vue專案

前言

在專案開發中,Debug模式是非常有必要的，後端對於IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果啟用Debug模式是需要單獨去配置一些東西,

所以這裡整理自己搭建成功的過程分享出來。可能不同的Webstorm版本會導致效果不一樣，所以這裡先列出我的版本。

Webstorm版本: 2018.3.4

一、新建Vue專案

為了演示一個完整的示例,所以從建立專案開始，這裡通過 vue腳手架命令 開始建立一個專案

 vue init webpack debug-vue

如果執行成功就會建立一個名稱為 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>
 

改好之後，再來檢視頁面 就變成這樣了

很明顯可以看出，當點選這個按鈕會彈出一個框，說明繫結點選事件成功。

二、WebStorm配置

1、設定偵錯程式埠

2、 新增除錯配置

這樣Webstorm就配置好了。

三、測試

第一步 先在指定程式碼中新增一個斷點,然後啟動專案

第二步 啟動專案，命令

npm run dev

啟動成功後

第三步 啟動上面配置的除錯按鈕

第四步 測試

很完美的斷點打過來了,在展示一個完整的請求過程

補充

如果你的不成功，那你就試一試其他人說得,步驟要比上面多幾步 WebStorm+Chrome外掛JetBrains IDE Support進行實時除錯

說明：他這裡多加了一個chrome外掛，但我是沒有加就可以成功的，如果上面的不行可以考慮加個外掛試一試,因為谷歌下載外掛需要翻牆，所以這裡也找了個不用翻牆

就可以下的JetBrains IDE Support

別人罵我胖，我會生氣，因為我心裡承認了我胖。別人說我矮，我就會覺得好笑，因為我心裡知道我不可能矮。這就是我們為什麼會對別人的攻擊生氣。
攻我盾者，乃我內心之矛(34)