本文详解JavaScript调试基础，演示如何通过控制台定位函数源码、利用Sources面板格式化压缩代码，以及临时修改全局函数以测试效果。内容涵盖Chrome开发者工具的常用操作，帮助开发者快速排查前端问题，无需修改实际文件即可安全调试。
定位推荐功能函数源码
首先解决第一个问题：查看文章下方“推荐”功能所调用的函数源码。操作非常简单，只需在页面上点击放大镜图标并选中“推荐”按钮即可。
此时可以看到，该推荐按钮调用的函数为 votePost(cb_entryId,'Digg')，整个过程十分直观。
查找函数所在文件与行号
接下来解决第二个问题：定位到该函数所在的具体文件位置。对于不熟悉控制台操作的朋友，步骤如下：在控制台中输入 votePost 并回车。
此时函数源码会显示出来，并且在右下角会出现一个链接，例如 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1。这里的 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 是版本号，可以直接忽略。
注：关于版本号的含义，它通常用于防止浏览器缓存，具体作用可自行搜索了解。blog-common.js:1 表示该函数所在的JS文件名为 blog-common.js，代码位于第 1 行。
使用Sources面板查看源码
直接点击上述链接，即可跳转到 Sources 面板，这是源码面板，也是调试中最重要的功能之一，后续将逐步介绍。
代码格式化与行号对应
然而，所有代码都压缩在一行中，包含 4946 个字符，如何查看？Chrome 提供了代码格式化功能，只需点击下方“Pretty print”按钮即可对代码进行格式化。
格式化后的代码结构清晰美观，至于能否看懂则是另一回事。如果代码经过 UglifyJS 或 Google's Closure 等工具编译（如 jquery.min.js），可能难以阅读；若仍看不懂，可能是技术能力不足，需自行努力提升。如果格式化后仍未找到函数位置，无需慌张，回到控制台面板即可。
你会发现行号变为 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91，此时点击链接即可跳转到格式化后的对应位置，非常便捷。
临时修改全局函数进行调试
最后一个问题：如何修改函数使其失效？这比前几步更简单，但许多人不知如何操作。已知“推荐”功能调用的是 votePost(cb_entryId,'Digg')，且该函数通过 HTML 中的 onclick 直接绑定。因此，这是一个全局函数，可在任何地方调用。这意味着我们可以修改它，就像修改全局变量一样。直接将其修改为空函数即可：votePost = function () {}; 或者 votePost = $.noop; 均可。其中 $.noop 是 jQuery 提供的空函数，便于使用。
此时 votePost 已成为空函数，点击“推荐”按钮将不会发生任何事件。当然，刷新页面后功能会恢复，因为我们仅在页面上进行调试修改，并未更改博客园的源码，故无法永久生效。调试的本质是查找与排除错误的过程：定位错误源后修改并测试，若无效则刷新后重新修改，这样无需修改实际文件即可避免不可恢复的后果。
总结与后续计划
今日内容大致如此。目前直接提供全局函数供调试的情况较少，因为 jQuery 流行，各种 click、on 等事件绑定导致源码定位较为繁琐。此前我曾撰写一篇详细分析该问题的文章，详见《浅谈 jQuery 事件源码定位问题》。其他框架我不熟悉，未作分析，但思路大致相同，必然存在事件管理机制。
今日知识点虽不多，但务必动手巩固，否则容易遗忘。
课后练习： 1. 分析 votePost 函数是如何实现“推荐”功能的。 2. 结合断点知识，动态调试分析 votePost。
明天将讲解断点与动态调试，题目暂未确定，先以此为例。若有合适的需要动态调试的内容，请跟帖讨论。