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方法,如下圖所示:
imageimage然後執行npm run dev,啟動服務後重新整理頁面(重新整理前先把瀏覽器開發者工具開啟),可以看到在程式進入App.vue元件mounted這個元件生命週期鉤子裡後,指定到debugger處時程式就被debug了。如下圖所示,剩下的大家應該都很熟悉了。可以看到,此處顯示的程式碼就是我們元件裡的實際程式碼,並非被我們編譯混淆後的那種程式碼,可讀性非常好。
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 的內容替換成為接下來的兩段配置:
{
"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