一 console.log调试
1 代码
methods: {
add () {
// 调试方法1
console.log('add Event from Info!')
// 触发store中的increase方法
store.commit('increase')
}
}
2 效果
3 说明
将调试结果打到浏览器的Console中
二 alert调试
1 代码
methods: {
add () {
// 调试方法1
console.log('add Event from Info!')
// alert调试
alert('调试方法二:alert')
// 触发store中的increase方法
store.commit('increase')
}
}
2 效果
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 效果
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 效果
3 说明
在生命周期函数中绑定到window对象
五 简单调试
1 代码
<script type="text/javascript">
// 加个变量,简单调试
var app = new Vue({
el: "#root",
data: {
msg: "hello",
number: 0,
content: "<h1>hello</h1>"
},
methods: {
click:function(){
this.number++
this.msg = "world"
}
}
})
</script>
2 效果
3 说明
用CDN的方式,加个变量,进行简单调试。
六 Vue的Chrome插件