First add a breakpoint in the js code where you want to debug, as shown in the example
<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>
First open the inspection in the webpage, and then open the webpage,
you can see the debugger button on it, the js code stops at our first debugger, and then click the test button to continue debugging
**Note! **If you open the webpage first, and then open the inspection, the browser will load all the content at once, and you will not be able to debug. At this time, the debugger will fail!
As shown in the picture below,
it has all been loaded!