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 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 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
PHP5 安装方法
2006/10/09 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
医疗纠纷协议书
2014/04/16 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
MySQL之DML语言
2021/04/05 MySQL
Go语言应该什么情况使用指针
2021/07/25 Golang
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL
python 镜像环境搭建总结
2022/09/23 Python