js调试系列 源码定位与调试[基础篇]


Posted in Javascript onJune 18, 2014

我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码
其实非常简单,点放大镜选中那个推荐即可。
js调试系列 源码定位与调试[基础篇]
这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单。

第二个问题,定位到函数所在文件位置。
其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看。
我在控制台输入 votePost 然后回车,
js调试系列 源码定位与调试[基础篇]
函数源码粗显啦,并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 这个是什么意思呢?
后面的 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 直接忽略好了。

ps: 如果想知道这个是什么东西,其实就是个版本号,至于什么作用,往往是防止缓存的,具体自己上网搜索吧。
blog-common.js:1 差不多就是这个意思。。
blog-common.js 是这个函数所在的js文件
1 是代码所在的行号。

直接点击这个链接,就可以跳转到 Sources 面板,这个就是源码面板,调试最重要的一个功能,之后会慢慢介绍。
js调试系列 源码定位与调试[基础篇]

可是所有代码都在一行,我们改怎么看? 4946 个字符呢,全缩在一行上。。
chrome 给我们提供了一个代码格式化的功能,点击下方那个 Pretty print 按钮即可格式化代码。
js调试系列 源码定位与调试[基础篇]

格式化完毕之后就是非常美观的代码了,至于看不看的懂,那是另一回事了。
有的看不懂可能是代码被UglifyJS,Google's Closure之类的工具编译过,如 jquery.min.js 文件。
还有可能是水平太次了,暂时看不懂大神写的代码,那我也无能为力,你只能自己加油了努力提升实力了。
如果格式化够找不到函数所在位置,也不要着急,有我在,慌啥?
回到刚才控制台面板。
js调试系列 源码定位与调试[基础篇]
你欣喜的发现,blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
行号变成 91 了,现在再点击这个链接,就可以跳转到对应格式化后的位置了,是不是超方便。。

最后一个问题,修改函数使其无效,这个最简单了,比刚才的简单多了,可是很多人不会操作所以我特地拿出来讲一下。
首先,我们知道了 推荐 这个功能调用的函数是  votePost(cb_entryId,'Digg') ,而且他是直接写是 html 上通过 onclick 绑定的。
所以这个函数是一个全局函数,到处都可以调用,那这意味着什么呢?
意味着我们可以修改啊,好比一个全局变量,你在哪都能修改对吧,那全局函数也是应该道理。
所以我们直接修改为空函数即可。
 votePost = function () {};  或者  votePost = $.noop;  都可以。$.noop 是 jQuery 为我们提供的空函数,方便我们使用。

js调试系列 源码定位与调试[基础篇]
现在 votePost 就是一个空函数,所以你点击 推荐 按钮是不会发生任何事情的。
当然刷新页面后会重新生效,我们只是在页面上调试修改而已,没有去改博客园的源码,是不可能永久生效的。
所以调试的意思就是查找与排除错误的过程,如果定位到错误源了,修改下然后测试,如果不对,刷新后重新修改,这样就不必修改实际文件而导致不可恢复了。

今天的内容差不多就这些了,其实现在很少有直接全局函数给你调试的,因为现在 jQuery 风靡,各种 click, on 之类的事件绑定,导致源码定位非常繁琐。
好在我之前写了一篇,比较详细的分析了这个问题,详情请参阅《浅谈 jQuery 事件源码定位问题》
其他框架我也不熟,所以没分析,不过思路其实是差不多的,必然都会有一个事件管理机制。

今天知识点不多,但是要自己动手巩固下,不然会秒忘的。

课后练习:
1. 分析 votePost 函数是如何实现 推荐 的。
2. 动态调试分析 votePost。(要结合断点知识)

明天要讲断点与动态调试,我也没找到合适的题目,就先凑合着做吧,如果你有合适的东西需要动态调试的,请跟帖。。

Javascript 相关文章推荐
javascript中的注释使用与注意事项小结
Sep 20 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 #Javascript
js调试系列 初识控制台
Jun 18 #Javascript
ext前台接收action传过来的json数据示例
Jun 17 #Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 #Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 #Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 #Javascript
javascript setinterval 的正确语法如何书写
Jun 17 #Javascript
You might like
功能强大的php文件上传类
2016/08/29 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
wxpython绘制音频效果
2019/11/18 Python
学Python 3的理由和必要性
2019/11/19 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Pycharm中如何关掉python console
2020/10/27 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
合作协议书
2014/04/23 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
毕业生党员个人总结
2015/02/14 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
小学安全工作总结2015
2015/05/18 职场文书
医院感染管理制度
2015/08/05 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技