webstrom除錯vue

碼路芽子發表於2018-07-16
Web除錯Vue

第一種，使用vue外掛

  1. 下載外掛：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

    外掛下載

  2. 這樣直接run一個vue專案，你就會看見外掛標亮了

    vue外掛亮了

  3. 開啟除錯模式，你就會看見最後有個vue標記，開啟能看見當前vue頁面渲染相關資料

    頁面渲染

第二種，使用webstrom除錯

  1. 下載外掛 https://chrome.google.com/webstore/search/jetbrains?utm_source=chrome-ntp-icon

外掛樣子

  1. 開啟webstrom Debugger, 記住埠號

    設定Debugger

  2. 開啟剛才安裝的外掛，選項，填入剛才看見的埠號

    image.png

image.png

  1. 新增一個debug配置
    image.png

image.png

  1. 這樣執行一個vue專案，並且在頁面上右鍵，就開啟了除錯模式
    image.png

隨意在webstrom上斷點除錯，完美（此處有金星老師手勢）！！！！！！！！

相關文章