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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
JavaScript门面模式详解
Oct 19 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python实现股市信息下载的方法
2015/06/15 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python 穷举指定长度的密码例子
2020/04/02 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
实习生自荐信范文
2013/11/13 职场文书
自荐书封面下载
2013/11/29 职场文书
思想汇报格式
2014/01/05 职场文书
英语简历自我评价
2014/01/26 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
加薪申请报告范本
2015/05/15 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技