谷歌开发者工具使用分享: 法宣获取积分流程分析

关键词:

前言
课程学习赚积分
做题赚积分
总结

TOC

前言

通过探究法宣获取积分的流程, 演示谷歌开发者工具(chrome developer tools)的一些使用方法、技巧.
高手请跳过.
法宣需要账号才能登陆, 没有账号建议跳过.

课程学习赚积分

积分规则:

课程学习赚积分：每学习课件10分钟以上获得10积分, 每日上限为50积分
做题赚积分： 每天做一套练习分数不少于60分, 可得30积分; 每日上限为120积分

1. 打开某个课程进行学习, F12打开开发者工具:
   
2. 尝试修改倒计时时间
   使用元素选择工具选择倒计时的文本, elements面板自动定位到对应的位置:
   
3. 在刚才选择的元素上右键 -> break on -> subtree modifications
   
4. 自动进入断点, 跳转到sources面板; 观察右侧的call stack, 前三个都是jQuery的代码, 没什么可看的, 点击最后一个"vm1722...."(vm之后可能是其他数字), 点击左下角的"{}"符号, 美化代码;
   
5. 代码美化之后, 发现倒计时是根据sps.onlineTime计算的:
   
6. 切换到console面板, 测试能否访问sps.onlineTime, 发现可以, 把倒计时时间改为600秒(十分钟): sps.onlineTime = 600
   
7. 回到elements面板, 右侧DOM breakpoints, 取消刚才打下的断点, 继续执行代码:
   
8. 发现倒计时已经变成了10分钟
   
9. 退出学习, 看看点击确定之后做了什么事;
   选择确定按钮, 右侧event listeners -> click -> 点击vm1718的链接;
   
10. 自动跳转到source面板, 点击"{}"美化代码, 216行的行号上点击一下, 打一个断点;
    
11. 点击页面上的确定按钮, 停在断点, F11单点进入(或者工具栏上向下的箭头), 多点几下, 碰到压缩的代码就美化一下:
    
12. 最后断点停在sps.exitst, 读一下代码, 这里应该是提交记录地方
    
13. 把鼠标停留到函数上, 点击悬浮框, 可以跳转到函数定义的位置
    
14. 这里提交了ajax请求:
    

做题赚积分

和学习赚积分方法相同;

总结

用到的技巧:

• 选择某个元素
• 打DOM断点
• 通过调用栈(call stack)分析代码
• 使用"{}"美化代码
• console面板修改变量
• 跳转到html对象绑定的事件
• 单点调试
• 跳转到函数的定义