vue的调试方法

清疚 2021-07-25 01:53 446阅读 0赞

**一 console.log调试**

1 代码

methods: {
        add () {
          // 调试方法1
          console.log('add Event from Info!')
          // 触发store中的increase方法
          store.commit('increase')
        }
      }

2 效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

3 说明

将调试结果打到浏览器的Console中

**二 alert调试**

1 代码

methods: {
        add () {
          // 调试方法1
          console.log('add Event from Info!')
          // alert调试
          alert('调试方法二：alert')
          // 触发store中的increase方法
          store.commit('increase')
        }
      }

2 效果

![20200503135907215.png][]

3 说明

通过alert调试，会弹出一个对话框，但它是阻塞式的，会阻塞后面的语句执行。

**三 debugger调试**

1 代码

export default {
      name: 'Info',
      // 定义一下store
      store,
      data () {
        return {
          msg: '调试方法三：debugger'
        }
      },
      // 定义改变状态的方法
      methods: {
        add () {
          // 调试方法1
          console.log('add Event from Info!')
          // alert调试
          alert('调试方法二：alert')
          // 触发store中的increase方法
          // debugger调试
          debugger
          store.commit('increase')
        },
        output () {
          console.log('调试方法三：在断点时，打印函数')
        }
      }
    }

2 效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

3 说明

实现断点调试，自动在调试处停止，可以查看断点状态时变量的值。在断点处还可以执行方法。

**四 通过window.vue在生命周期绑定**

1 代码

export default {
      name: 'Info',
      // 定义一下store
      store,
      data () {
        return {
          msg: '调试方法三：debugger'
        }
      },
      mounted () {
        // 调试方法四：在生命周期中绑定
        window.vue = this
      },
      // 定义改变状态的方法
      methods: {
        add () {
          // 调试方法1
          console.log('add Event from Info!')
          // alert调试
          alert('调试方法二：alert')
          // 触发store中的increase方法
          // debugger调试
          debugger
          store.commit('increase')
        },
        output () {
          console.log('调试方法三：在断点时，打印函数')
        }
      }

2 效果

![20200503140033548.png][]

3 说明

在生命周期函数中绑定到window对象

**五 简单调试**

1 代码

2 效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

3 说明

用CDN的方式，加个变量，进行简单调试。

**六 Vue的Chrome插件**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/05bfabbb6ece403188d6d857d01934d7.png
[20200503135907215.png]: https://img-blog.csdnimg.cn/20200503135907215.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200503135937918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200503135958462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[20200503140033548.png]: https://img-blog.csdnimg.cn/20200503140033548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020050314011571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70