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

首先在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>

在网页中先打开检查,然后再打开网页
如何在js中添加debugger断点进行调试,解决网页中debugger没反应的问题_第1张图片
如何在js中添加debugger断点进行调试,解决网页中debugger没反应的问题_第2张图片
可以看到上面有debugger的调试按键,后面js代码停在我们第一个debugger处,接着点击测试按键即可继续调试
如何在js中添加debugger断点进行调试,解决网页中debugger没反应的问题_第3张图片
**注意!**如果先打开网页,再打开检查,那浏览器会一次性加载全部内容,就无法进行调试,此时debugger失效!
如下图所示
如何在js中添加debugger断点进行调试,解决网页中debugger没反应的问题_第4张图片
已经全部加载完了!

你可能感兴趣的:(js,vue,javascript,vue.js,前端)