前言

代码就是那样，你想走的路，它有时候就是非要给你走偏，这就需要我们进行纠正，去发现问题，去解决问题。一般的小问题log下也能看出问题，但是有时候log看到的只是表象，我们就需要用断点去分析走的每一步。

浏览器断点调试

前端的编程工具有很多，但浏览器还是统一的，我们就以谷歌为例子，来看看基本的断点的调试是怎样的。

先来看下断点遇到的按钮：

配一张简单的代码：

getlist() {
  const params = {
    id: this.parent.id,
    pageSize: this.params.size,
    current: this.params.current
  }
  debugger
  docAndfilelist(params).then(res => {
    if (res.code == 0) {
      this.params.total = res.data.total;
      this.tableData = res.data.records;
    }
  })
},

按钮1：让代码继续执行，除非遇到下一断点，否则不会暂停

第一次点击按钮一时会跳转到docAndfilelist这个函数

再次点击时会跳出这个函数执行下一步骤

按钮2和按钮3是相反的操作。箭头朝下说明是要进入这个函数，箭头朝上说明是要跳出这个函数

点击按钮2时进入到函数所在的文件，再次点击时可以查看到文件中所对应的函数,当点击3时就会回退出来。

按钮4点击之后可以退出该函数。

注意

debugger的位置要放的正确，不要放在函数的开始和函数的末尾，这样不利于你的分析。

JS之断点调试

前言

浏览器断点调试

注意