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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
软件配置管理有什么好处
2015/04/15 面试题
幼儿园大班区域活动总结
2014/07/09 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
教学督导岗位职责
2015/04/10 职场文书
创业计划书介绍
2019/04/24 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL