使用Chrome断点调试javascript程序

1. 问题描述：

代码上线后出现问题，有一个提交按钮无法点击，原因是在提交方法中多了一条 return false 语句。
那么如何通过Chrome中的控制台在source中设置断点调试实现该功能呢？

submit: function() {
      let _this = this

      return false // 注意这句是测试时使用的，不小心打到了生产上
      let data = Object.assgin({}, _this.searchData)
      $request($api.url, data, (res)=> {
            _this.message = '提交成功'
      })
}

2. 问题解决：

打开当前需要点击的页面，f12打开控制台，source中按 ctrl + P 输入 当前页面名文件名 eg： product.vue
2.1 在提交的地方设置断点 let _this = this，点击提交，此时有断点停在此处
2.2 将return false 后面的语句放在console中执行

// 将下面的语句直接copy出来，放在console中执行
      let data = Object.assgin({}, _this.searchData)
      $request($api.url, data, (res)=> {
            _this.message = '提交成功'
      })

2.3 放开断点即可完成调提交接口

3. 另一种情况：有时候我们需要点击修改进入产品维护页面，然后点击里面的提交按钮，提交产品参数，如果这时候修改一个页面上不能修改的参数也可以使用上述方式。

但是有时候会遇到打了断点，但是console中不能打印出来字段的值，报undefined或者未定义的字段。我在一个方法提交时设置了断点，希望改变入参中的一个值，但是在控制台输入 _this打印出来是undefined
导致参数无法在console中修改

解决方法：
经过多次尝试发现，虽然提交方法中的_this访问不到，但是修改方法中 的_this可以访问的到。
正常流程是：点击修改按钮调后台接口获取到的数据绑定到页面上。比如有一个日期是不能修改的pDate默认值是'2020-01-01'，现在需要改成'2020-10-15'传给后台。
3.1 此时在点击修改方法开始的地方设置一个断点
3.2 在控制台使用setTimeout方法给参数延迟赋值

// 打完断点，点击修改后，在console中
setTimeout(()  => {_this.param.pDate='2020-10-15'}, 10000)

3.3 回车执行上面的语句，然后放开断点，此时开始掉接口，当数据绑定到dom上后，console中的语句10s后开始赋值，这个时候你就会看见 param.pDate的值就成了'2020-10-15'
3.4 然后在点击提交，这个字段就传到后台了。