zoukankan      html  css  js  c++  java
  • 使用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 然后在点击提交,这个字段就传到后台了。

  • 相关阅读:
    USACO Section 1.3 : Mixing Milk
    USACO Section 1.3 : Prime Cryptarithm
    USACO Section 1.2 : Name That Number
    USACO Section 1.3 : Calf Flac
    USACO Section 1.2 : Palindromic Squares
    Global.asax详解
    sql语句字符串处理大全
    ASP.net:URL重写实现IHttpHandler接口
    asp.net中使用基于角色role的Forms验证
    时间Table.TransformColumns(Power Query 之 M 语言)
  • 原文地址:https://www.cnblogs.com/codebook/p/13823869.html
Copyright © 2011-2022 走看看