Vue项目调试方法

最新推荐文章于 2025-07-02 14:33:05 发布

郭宝

最新推荐文章于 2025-07-02 14:33:05 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35366269/article/details/91969587

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了Vue项目的四种调试方法，包括使用console.log输出信息、alert弹窗提示、debugger设置断点以及利用Chrome浏览器的vue-devtools插件进行高效调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、通过在

了解本专栏