Vue中進行斷點調試的兩種方式(使用外部瀏覽器和VsCode Debug for Chrome 插件)

場景

在使用IDEA等進行后台開發時可以直接在想要進行斷點調試的地方雙擊添加一個斷點，然后逐步或者逐過程進行調試。

但是在Vue中如果想要進行調試時，如果是在js中調試的話，可以直接添加一個debugger，然后在瀏覽器中打開檢查進行斷點調試。

但是如果在vue界面的話則沒法逐步查看變量的值。

比如：

在Vue頁面中，點擊搜索按鈕時

<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

會觸發handleQuery方法

    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

其中調用了請求查詢數據的方法

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

然后會調用js中查詢數據的方法

    getList() {
      this.loading = true;
      debugger
      console.log(this.queryParams)
      listDdjl(this.queryParams).then((response) => {
        this.ddjlList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

這以上的操作都是在vue頁面中進行的請求參數的封裝和傳遞等。

如果想要查看這中間傳遞的參數的值等信息。

如果只是簡單的加上debugger的話是沒法查看的。

然后listDdjl是引用第三方js的方法，用來請求后台數據。

export function listDdjl(query) {
  debugger
  returnrequest({<BR>   url:'/kqgl/ddjl/getListBySx?pageNum='+query.pageNum+'&pageSize='+query.pageSize,
    method: 'post',
    data: query
  })
}

這樣在js中直接添加debugger是可以直接進行調試的。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

使用外部瀏覽器調試的方式

打開項目的vue.config.js，修改configureWebpack，添加

devtool: '#eval-source-map',

完整配置代碼

  configureWebpack: {
    name: name,
    devtool: '#eval-source-map',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

配置代碼位置

 

 

然后就可以在想要調試的vue頁面添加debugger

 

 

然后運行項目，打開外部瀏覽器，在調用添加debugger的方法時打開瀏覽器的檢查

 

 

然后就可以進入到斷點並可以進行逐步調試了。

使用VSCode的插件進行調試

打開VSCode，擴展中搜索debugger for Chrome

 

 

然后點擊install，安裝完成后還需要reload重新加載一下。

然后在左邊調試菜單下就會如上所示的調試界面，點擊配置launch.json或者直接打開此文件

配置如上所示，url改為你的項目的有效啟動地址，這里是本地的81端口

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:81",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

然后可以在vue頁面的方法中添加debugger或者直接在左邊雙擊添加斷點，然后點擊調試按鈕

 

 

然后就會彈出一個新的Chrome窗口，並打開上面配置的url，一般是登錄成功后點擊上面添加斷點的頁面會直接進入斷點