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

我们先来处理第一个问题：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。(要结合断点知识)

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

赞 (0)

相关推荐

  • js调试系列 控制台命令行API使用方法

    js调试系列 控制台命令行API使用方法

    先打开百度,然后按 F12 打开后,如果不是 Console 项的就点击 Console 这项,因为我们要在控制台操作.. 看到如下内容: 好了我们先清空内容,可以右击选 Clear console 菜单,或者输入 clear() 都行. 接着,我们输入 document.getElementById('kw1'); 然后回车,就可以看到 id 为 kw1 的元素信息了. 是不是很简单.下一步是用 console.dir 查看该元素信息. 输入 console.dir(document.getE

  • js调试系列 初识控制台

    js调试系列 初识控制台

    写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他们不知道为什么要用这么长的字符串代替 alert 输出信息.在他们眼里 alert 足以.好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目

  • js调试系列 断点与动态调试[基础篇]

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

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

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

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

    我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码 其实非常简单,点放大镜选中那个推荐即可. 这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置. 其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看. 我在控制台输入 votePost 然后回车, 函数源码粗显啦,并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7A

  • Android 源码如何编译调试

    android提供的工具链和开发工具比较完善,因此它的开发环境的搭建比较简单,相信许多朋友都已经搭建好环境,并编写了HelloActivity入门程序了.这里先看几个问题: 1.android的文件系统结构是怎样的,我们安装的程序放在那里? 编译android源码之后,在out/target/product/generic一些文件: ramdisk.img.system.img.userdata.img. system. data.root 其中, system.img是由 system打包压缩

  • 解决调试JDK源码时,不能查看变量的值问题

    前几天本来想以debug模式看一下JDK的源码,进入调试模式时才发现,根本看不到方法里面变量值的情况.为什么呢?JDK现在的版本中,编译过后,去除了里面的调试信息.解决办法是,编译那些类,使其带有调试信息,使用命令:javac -g 查看了一些相关资料,现将解决方法放到下面 1.在d:\的根目录下创建jdk7_src和jdk_debug目录. 2.在JDK_HOME目录下找到src.zip文件,并把它里面的文件解压到jdk7_src目录下,然后在解压后的目录中删除除了java.javax.org

  • 使用Idea调试RocketMQ源码教程

    使用Idea调试RocketMQ源码教程

    目录 前言 下载源码 代码编译 运行namesrv 启动 启动broker 配置文件 启动broker 小结 前言 为了更好地了解RocketMQ,我打算看一看它的源码了.随着RocketMQ5.0版本的发布,应该有更多小伙伴在实际应用中选择RocketMQ.那么我们就从这一篇文章开始,逐步来了解RocketMQ的神秘源码吧!接下来我们先把调试环境搭建好. 下载源码 源码地址:github.com/apache/rock… 我们先把RocketMQ源码下载下来,为了方便一点,建议小伙伴先fork

  • vscode调试gstreamer源码的详细流程

    目录 1. 安装vscode插件 2. 配置文件修改 2.1 自定义c_cpp_properties.json 2.2 自定义tasks.json文件 2.3 Debug 3. Makefile环境下 4. Python调试 5. 调试gstreamer源码 下载gstreamer源码 编译源码 修改Makefile 输入断点 总结 1. 安装vscode插件 C/C++ C/C++ Extension 2. 配置文件修改 vscode中每个项目都有一套配置文件集合,位于.vscode目录下,其

  • JDK源码白话解读之ThreadLocal篇

    JDK源码白话解读之ThreadLocal篇

    目录 引言 ThreadLocal是什么?它能干什么? ThreadLocal实现线程隔离的秘密 为什么ThreadLocal会出现OOM的问题? 内存泄漏演示 内存泄漏问题分析 父子线程的参数传递 总结 引言 因此本文主要结合常见的一些疑问.ThreadLocal源码.应用实例以注意事项来全面而深入地再详细讲解一遍ThreadLocal.希望大家看完本文后可以彻底掌握ThreadLocal. ThreadLocal是什么?它能干什么? 在阐述ThreadLocal之前,我们先来看下它的设计者是

  • 使用VScode 插件debugger for chrome 调试react源码的方法

    代码调试,是我们前端日常工作中不可或缺的能力了吧! 在面向dom开发的时代,我们开发时直接在chrome里打断点是很方便的. 但是,当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码,还想在浏览器里打断点几乎是不可能的了. 场景 那怎么办,方法总是比困难多!愚蠢的我想到了console/debugger!!一直在使用,虽然很不方便(打印太多实在太乱!上线还要配置删除掉),但是我竟然使用了很久(这真是一个糟糕的编码习惯吧).直到今天,我想研究一下react源码,需要断点的地方有很

  • CLASS_CONFUSION JS混淆 全源码

    利用随机字符串代替变量等,混淆原代码,保护自己写的代码,不利于别人直接剽窃 复制代码 代码如下: <SCRIPT language=JavaScript> <!-- /**//**//**//** **     ============================================================== ==================================== **    类名:CLASS_CONFUSION **    功能:JS混淆 *

  • Node.js pipe实现源码解析

    从前面两篇文章,我们了解到.想要把 Readable 的数据写到 Writable,就必须先手动的将数据读入内存,然后写入 Writable.换句话说,每次传递数据时,都需要写如下的模板代码 readable.on('readable', (err) => { if(err) throw err writable.write(readable.read()) }) 为了方便使用,Node.js 提供了 pipe() 方法,让我们可以优雅的传递数据 readable.pipe(writable)

  • Go语言编译原理之源码调试

    Go语言编译原理之源码调试

    目录 前言 Goland的debug调试Go源码 dlv工具调试Go源码 安装 常用命令 dlv调试抽象语法树构建 前言 在前边几篇文章中分享了Go编译过程中的源码实现,本文主要是想分享一下我是怎么调试Go的源代码的(如果你很熟悉的话,可以跳过本文).本文主要是分享两种Go源码的调试方法 Goland的debug dlv工具 本文我还会以抽象语法树为例,来通过dlv对它的构建过程进行调试 Goland的debug调试Go源码 下边以调试Go编译的入口文件为例 编辑debug配置 填写配置信息 打

随机推荐