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

我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码
其实非常简单,点放大镜选中那个推荐即可。

这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单。

第二个问题,定位到函数所在文件位置。
其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看。
我在控制台输入 votePost 然后回车,

函数源码粗显啦,并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 这个是什么意思呢?
后面的 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 直接忽略好了。

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

直接点击这个链接,就可以跳转到 Sources 面板,这个就是源码面板,调试最重要的一个功能,之后会慢慢介绍。

可是所有代码都在一行,我们改怎么看? 4946 个字符呢,全缩在一行上。。
chrome 给我们提供了一个代码格式化的功能,点击下方那个 Pretty print 按钮即可格式化代码。

格式化完毕之后就是非常美观的代码了,至于看不看的懂,那是另一回事了。
有的看不懂可能是代码被UglifyJS,Google's Closure之类的工具编译过,如 jquery.min.js 文件。
还有可能是水平太次了,暂时看不懂大神写的代码,那我也无能为力,你只能自己加油了努力提升实力了。
如果格式化够找不到函数所在位置,也不要着急,有我在,慌啥?
回到刚才控制台面板。

你欣喜的发现,blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
行号变成 91 了,现在再点击这个链接,就可以跳转到对应格式化后的位置了,是不是超方便。。

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


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

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

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

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

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

时间: 2024-11-17 03:35:22

js调试系列 源码定位与调试[基础篇]_javascript技巧的相关文章

js调试系列 断点与动态调试[基础篇]_javascript技巧

上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的. 其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i

浅析JS中对函数function的理解(基础篇)_javascript技巧

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

js跨域资源共享 基础篇_javascript技巧

本文详细介绍了javascript跨域资源共享,供大家参考,具体内容如下 1.为什么提出跨域资源共享(CORS)?    因为XHR实现ajax的安全限制是:XHR 对象只能访问与包含它的页面位于同一个域中的资源 2.如何实现跨域?(跨浏览器) // 跨浏览器创建并返回CORS对象 // param method : 请求的方式, get or post // param url : 跨域请求的url // return xhr : 返回的跨域资源对象 function createCORSRe

精通Javascript系列之Javascript基础篇_javascript技巧

javascrpit的基本概念: 1)区分大小写 与JAVA一样,JS中的变量,函数,运算符以及其他的一切东西都是区分大小写的,例如:变量MyTag与MYTAG是两个不同的变量. 2)弱类型变更.所以谓弱类型变量指的是JS中变量无特定类型,不像C那样.定义变量只用"var",并可以将其初始化为任意的值,这样就可以随便的改变变量所存储数据的类型,不般不推荐: 例:var age=25; var myName="zhangsan"; 3) 每行结尾的分号可有可无: 例:

Tightvnc调试服务器端源码的时候,很多断点触发不了?

问题描述 Tightvnc调试服务器端源码的时候,很多断点触发不了? 在看Tightvnc2.7.10的源码,调试的时候,跟踪服务器框架,很多的调用dlg语句不能触发断点. 不能跟踪调试,这是什么原因.求大神解答 解决方案 http://blog.chinaunix.net/uid-20789836-id-2982667.html

查看和调试Qt源码

简述 在调试程序的时候,有时需要调试进入 Qt 源码,这不仅有利于我们了解内部实现机制,而且对于解决一些隐蔽性问题很有帮助. 都知道 F11 是"单步进入",可是在调试的过程中,按下 F11 却无法进入.有人说需要静态编译 Qt 才可以,其实不然,只需要简单的几个配置就可以搞定. 简述 Qt 版本及安装 配置 Qt Creator 源码调试 更多参考 版权所有:一去丶二三里,转载请注明出处:http://blog.csdn.net/liang19890820 Qt 版本及安装 Qt 针

Apache Spark源码走读(九)如何进行代码跟读&使用Intellij idea调试Spark源码

<一>如何进行代码跟读 概要 今天不谈Spark中什么复杂的技术实现,只稍为聊聊如何进行代码跟读.众所周知,Spark使用scala进行开发,由于scala有众多的语法糖,很多时候代码跟着跟着就觉着线索跟丢掉了,另外Spark基于Akka来进行消息交互,那如何知道谁是接收方呢? new Throwable().printStackTrace 代码跟读的时候,经常会借助于日志,针对日志中输出的每一句,我们都很想知道它们的调用者是谁.但有时苦于对spark系统的了解程度不深,或者对scala认识不

.net comet在网上下载了一套简单的源码却一直调试不出来 可能问的问题比较基础 各位大神见谅

问题描述 .net comet在网上下载了一套简单的源码却一直调试不出来 可能问的问题比较基础 各位大神见谅 在网上查了半天消息推送 最后下载了一套comet+jquery简单源码示例 代码很简单就两个类 然而我初学这个东西 一直没有调试成功 看不大懂 求大神指导 下面贴源码 首先是config <httpHandlers> <add path="comet_broadcast.asyn" type="AsnyHandler" verb="

深入理解Spark:核心思想与源码分析. 1.4 Spark源码编译与调试

1.4 Spark源码编译与调试 1.下载Spark源码 首先,访问Spark官网http://spark.apache.org/,如图1-18所示.   图1-18 Spark官网 单击Download Spark按钮,在下一个页面找到git地址,如图1-19所示.   图1-19 Spark官方git地址 打开Git Bash工具,输入git clone git://github.com/apache/spark.git命令将源码下载到本地,如图1-20所示.   图1-20 下载Spark