原文：http://www.cnblogs.com/52cik/p/js-console-show-source.html

在控制台输入要查找的函数名如votePost 然后回车：

函数源码粗显啦，并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 这个是什么意思呢？
后面的 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 直接忽略好了这是版本号，防止缓存的。
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 了，现在再点击这个链接，就可以跳转到对应格式化后的位置了，是不是超方便。。

今天的内容差不多就这些了，其实现在很少有直接全局函数给你调试的，因为现在 jQuery 风靡，各种 click, on 之类的事件绑定，导致源码定位非常繁琐。
好在我之前写了一篇，比较详细的分析了这个问题，详情请参阅《浅谈 jQuery 事件源码定位问题》

js调试-定位到函数所在文件位置的更多相关文章

  1. python之sys._getframe() 用于查看函数被什么函数调用以及被第几行调用及被调用函数所在文件

    import sys def get_cur_info(): print(sys._getframe().f_code.co_filename) # 当前文件名,可以通过__file__获得 prin ...

  2. linux 显示当前所在文件位置 以及git 分支所在

    function git-branch-name {  git symbolic-ref HEAD 2>/dev/null | cut -d"/" -f 3}function ...

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

    js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 ...

  4. js调试系列: 控制台命令行API

    js调试系列目录: - 上次初步介绍了什么是控制台,以及简单的 console.log 输出信息.最后还有两个小问题,我们就当回顾,来看下怎么操作吧. 先打开百度,然后按 F12 打开后,如果不是 C ...

  5. [PHP] 使用ftell和fseek函数直接定位文件位置获取部分数据

    对于大文件只获取部分数据很有用 1.使用ftell函数可以获取当前指针的字节位置2.使用fseek函数可以直接定位到指定的位置3.读取指定字节的数据就可以部分获取文件内容了 <?php clas ...

  6. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  7. .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console

    .net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...

  8. js调试--查找dom对象绑定的函数

    点击最右侧的js文件. 选中函数upload_pic_box,右击,选择在控制台中调试,或者在控制台直接输入该函数 点击最后一行代码会打开该函数所在的js文件

  9. 百度地图api将可视区域定位到当前所在位置

    1.前言 开头不说点什么,总是有点不习惯.还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀.好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都能 ...

随机推荐

  1. AngularJs记录学习04

    <html> <head> <title>Angular JS Views</title> <script src="js/Angula ...

  2. Python核心编程--学习笔记--6--序列（上）字符串

    本章研究Python中的序列:字符串.列表和元组.因为这些类型其实都是由一些成员共同组成的一个序列整体,所以我们把它们统称为序列.序列的存储结构可以表示为: 1 序列 序列类型有着相同的访问模式:按下 ...

  3. ios第三方分享到qq、微信、人人网、微博总结

    我们开发出来的APP通常要通过第三方分享到其他社交平台,如qq.微博微信 等.通过分享可以提高APP的传播效率,增加APP的曝光率,因此也算是APP功能 里的标配了吧.目前常用的第三方分享途径有qq. ...

  4. Linux内核学习笔记——VFS

    概念: ①硬链接:若一个 inode 号对应多个文件名,则称这些文件为硬链接.即硬链接就是同一个文件使用了多个别名.硬链接可由命令 link 或 ln 创建. 其特性: 文件有相同的 inode 及 ...

  5. Android之使用HTTP协议的Get/Post方式向服务器提交数据

    1.Get方式 方法:通过拼接url在url后添加相应的数据,如:http://172.22.35.112:8080/videonews/GetInfoServlet?title=霍比特人&t ...

  6. Partition分组使用和行列转换

    CREATE TABLE score ( name NVARCHAR(20), subject NVARCHAR(20), score INT ) --2.插入测试数据 INSERT INTO sco ...

  7. C#中的委托与事件

    1,委托? 通俗来讲,就是一个能存放符合某种格式(签名)的方法的指针 的容器  (可以将方法作为一个参数来传递到另一个方法内执行) 定义委托:delegate string DelegateSayHi ...

  8. Entity Framework学习笔记(四)----Linq查询(1)

    请注明转载地址:http://www.cnblogs.com/arhat 从本章开始,老魏就介绍一下Entity Framework使用Linq来查询数据,也就是Linq To Entity.其实在E ...

  9. sql优化点整理

    此文是我最早开始sql优化至今整理的小知识点和经常遇到的问题,弄懂这些对优化大型的sql会有不少帮助 ---------------------------------使用了多余的外连接------- ...

  10. Net Core 的公共组件之 Http 请求客户端

    Net Core 的公共组件之 Http 请求客户端 想必大家在项目开发的时候应该都在程序中调用过自己内部的接口或者使用过第三方提供的接口,咱今天不讨论 REST ,最常用的请求应该就是 GET 和 ...