Vue项目调试方法

Vue项目调试方法

 

1、通过在代码中输入   console.log("按钮被点击了");  ，然后通过F12 在（Console）控制台面板查看输出的结果 的方式进行调试。（推荐）

     addNumber() {
        console.log("添加个数");
        /*
        * store.commit('setNumber') 表示通过commit函数调用index.js文件中的setNumber函数
        * */
        store.commit('setNumber')
      }

 

2、通过在代码中输入  alert("按钮被点击了")   ，也就是以对话框的方式进行调试，但是这种方式是阻塞式的，只有点击了对话框的确认按钮才会执行下面的代码。

     addNumber() {
        alert("按钮被点击了");
        /*
        * store.commit('setNumber') 表示通过commit函数调用index.js文件中的setNumber函数
        * */
        store.commit('setNumber')
      }

 

3、通过在代码中输入  debuger  关键字对代码进行断点调试。（推荐）

      addNumber() {
        debugger
        /*
        * store.commit('setNumber') 表示通过commit函数调用index.js文件中的setNumber函数
        * */
        store.commit('setNumber')
      }

 

4、通过安装Chrome 浏览器的 vue-devtools 插件进行调试