VsCode調試vue項目

VsCode如何調試vue項目，VsCode需要安裝插件以及配置launch.json文件。

1. 找到“擴展”或者按快捷鍵“Ctrl+Shift+X”，如下圖，輸入Debugger for Chrome查找，並安裝。

   

2. 配置launch.json

   打開存儲庫,在網頁上查看信息,參考官網的Launch配置本地的launch.json

   

   本地launch.json配置(如果找不到這個文件,點擊運行->打開配置)

   

   本地配置文件launch.json

   {
       "version": "0.1.0",
       "configurations": [
           {
               "name": "Launch localhost",
               "type": "chrome",
               "request": "launch",
               // "url": "http://localhost/mypage.html",
               "url": "http://localhost:8080/",
               // "webRoot": "${workspaceFolder}/wwwroot"
               "webRoot": "${workspaceFolder}"
   
           },
           {
               "name": "Launch index.html",
               "type": "chrome",
               "request": "launch",
               "file": "${workspaceFolder}/index.html"
           },
       ]
   }
   

3. 谷歌瀏覽器配置

   參考官方文件

   

   找到桌面谷歌瀏覽器的快捷方式, 鼠標右鍵 -> 屬性 追加--remote-debugging-port=9222

   tip:

   注意有一個空格

   

4. 安裝Live Server插件

   

5. 配置package.json

   在“package.json”文件里的"scripts"中添加："dev": "vue-cli-service serve --open" 此命令是啟動服務。

   

6. 啟動程序

   按“Ctrl+Shift+Y” 調出終端，輸入：npm run dev

   

7. 找到“Ctrl+Shift+D”，點擊綠色按鈕開始調試，會彈出google瀏覽器訪問網站，在你想要的地方添加斷點.

   

   網頁會停在斷點處

   

8. 調試