如何在js中添加debugger断点进行调试，解决网页中debugger没反应的问题

最新推荐文章于 2024-08-09 18:00:00 发布

在下阿文

最新推荐文章于 2024-08-09 18:00:00 发布

阅读量5.3k

点赞数

分类专栏： js vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45271005/article/details/130167038

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

在JS代码中，特别是在Vue.js应用中，可以在适当位置设置`debugger`来实现调试。例如，在`created()`钩子函数中添加`debugger`，然后在浏览器的开发者工具中打开。确保先打开检查工具再加载网页，以使断点生效。否则，如果先加载网页，`debugger`可能会失效，无法进行步骤调试。

摘要由CSDN通过智能技术生成

首先在js代码中想要调试的位置添加断点，如示例所示

<body>
    <div id="vue">
        {{ message }}
    </div>
</body>
<script src="vue/vue.min.js"></script>
<script>
    new Vue({
        el: '#vue',
        data: {
            message: 'hello vue!'
        },
        created() { //渲染前
            debugger
            console.log('created....')
            debugger
        }
    })
</script>

在网页中先打开检查，然后再打开网页
在这里插入图片描述

可以看到上面有debugger的调试按键，后面js代码停在我们第一个debugger处，接着点击测试按键即可继续调试

**注意！**如果先打开网页，再打开检查，那浏览器会一次性加载全部内容，就无法进行调试，此时debugger失效！
如下图所示
在这里插入图片描述
已经全部加载完了！