Vue開發與調試工具--調試工具篇

主要講三個東西：

• Vue.js devtools開發工具的使用

• 使用debugger和sourcemap調試Vue組件

• vscode中調試Vue組件

Vue.js devtools開發工具的使用

在Chrome或Firefox瀏覽器的擴展插件倉庫裏搜vue devtool，安裝Vue.js devtools.

• 打開vue項目,在控制檯選擇vue

   
   

  image

• 可操做組件查看信息變化

   
   

  image

使用debugger和sourcemap調試Vue組件

針對vue-cli webpack官方腳手架，打開build/webpack.dev.conf.js文件，找到下面這句：

devtool: '#cheap-module-eval-source-map',

將其修改成：

devtool: '#eval-source-map ',

要修改的地方已經都改好了，就是這麼簡單，驚不驚喜，意不意外。

如今是具體調試了。假設咱們想調試App.vue這個組件，能夠在想要調試的代碼前添加debugger方法，以下圖所示：

 

image

而後運行npm run dev，啓動服務後刷新頁面（刷新前先把瀏覽器開發者工具打開），能夠看到在程序進入App.vue組件mounted這個組件生命週期鉤子裏後，指定到debugger處時程序就被debug了。以下圖所示，剩下的你們應該都很熟悉了。能夠看到，此處顯示的代碼就是咱們組件裏的實際代碼，並不是被咱們編譯混淆後的那種代碼，可讀性很是好。

 

image

vscode中調試Vue組件

先決條件

你必須安裝好 Chrome 和 VS Code。同時請確保本身在 VS Code 中安裝了 Debugger for Chrome 擴展的最新版本。

 

image

請經過 Vue CLI，遵循它的 README 中的安裝文檔安裝並建立一個項目。而後進入這個新建立的應用的目錄，打開 VS Code。

從 VS Code 啓動應用

• 點擊在 Activity Bar 裏的 Debugger 圖標來到 Debug 視圖，而後點擊那個齒輪圖標來配置一個 launch.json 的文件，選擇 Chrome 環境。而後將生成的 launch.json 的內容替換成爲接下來的兩段配置：

 

image

{
  "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}/*"
      }
    }
  ]
}

設置一個斷點

• 在 src/components/HelloWorld.vue 的 line90 的地方設置一個斷點，這裏的 data 函數返回一個字符串。

   
   

  image

• 在根目錄打開你慣用的終端並使用 Vue CLI 開啓這個應用：

npm start

• 來到 Debug 視圖，選擇 ‘vuejs: chrome’ 配置，而後按 F5 或點擊那個綠色的 play 按鈕。

• 隨着一個新的 Chrome 實例打開 http://localhost:8080，你的斷點如今應該被命中了。

   

  image