阅读大型 JavaScript 源码时有什么好用的工具？
大型 JavaScript 库的源码通常都在万行级别以上（例如 jQuery、AngularJs、NodeJs），而且由于 JavaScript 语言本身的特性，会出现大量的嵌套函数定义。这使得阅读 JavaScript 代码本身变得更加困难。是否存在一定的工具，可以降低阅读此类大型项目时的难度？例如能够将函数层级关系拆解开，支持导航的方式层层跳转；能够分析标识符引用关系，辅助确定热点函数等等……
（λ-VIEW 目前已经更新到 3.0 ，本文回答的内容已经不符合目前的情况了，稍后我会做同步的更新，指明新版本的操作方法）这个问题是我自己问的，因为这一点困扰了我很久。但是这个月初的时候，我抽了一些时间写了这个工具。它能够将复杂的 JavaScript 代码简化到极易阅读的程度。具体的原理和细节我在后面解释，我们先看看使用体验——上图是原始的 AngularJS 源码，可以看到左侧的行号已经超过 2 万行，直接阅读这样的代码无异于划着独木舟在大海里寻找孤岛，其难度可想而知。不过当我们对其进行处理后（点击上方的 After 按钮），情况就不同了，如下图所示：诶？2 万行代码怎么只剩下两行了？仔细一看，哦，原来这才是 AngularJS 的「真容」！整个 AngularJS 只是由一个立即调用的匿名函数（这里用 {λ} 表示），以及一行额外的处理代码组成。通常我们阅读代码的原则是——先从最外层轮廓上对代码本身获得一个直观的认识，然后再深入到具体的细节里，这能从根本上避免在刚开始就陷入细节的泥潭。这个工具正是建立在这一原则之上的。或者说，它可以帮助你更好的贯彻这一原则。（我们在稍后会用它来和其他常见的 IDE、文本编辑器进行对比，这会让你对此看得更清楚）现在我想看看 AngularJS 中的那个匿名函数里到底做了些什么。于是我点击
{λ} 部分，紧接着就变成了下面的样子：你会注意到：顶部标识出了当前函数的路径 &Program& / λ-0 （&Program& 代表顶级作用域，而 λ-0 是我们目前所处于的位置，它是顶级作用域下的第 0 号匿名函数）左侧列举出了当前作用域内定义的子函数右侧的源代码区域出现的不是原始的 JavaScript 代码，而是经过美化的——花括号都不见了，而是改为使用缩进；分号都去除了；等等今天先写到这里，后续会补上待续1：这个工具是怎么实现的？待续2：和 IDE 相比这个工具有什么优缺点？待续3：后续会增加什么功能？我强烈建议你亲自上
（我已经部署好了） 试一试，因为有些细节如果由我在此描述难免太冗长，但你一旦自己亲身体验，就会立刻体会到。 更新这个工具是怎么实现的？这个工具看起来很复杂。这可能会产生出让人钦佩的误解。事实上我确实做了一些工作，但并不像看起来那么艰巨。如果列举一下，整个工作实际上是由以下部分合力完成的：ACE 编辑器，提供了代码编辑支持Esprima 解析器，能够将 JavaScript 源代码解析为 AST（抽象语法树）jQuery 库，帮助我便捷的进行 DOM 操作Bootstrap 库，简化了界面布局和组织的工作我自己的代码，实现了最终的功能可见我确实做了一些事。但更主要的工作还是由 1-4 的部分完成的。如果你觉得这个软件很不错，或许上述库的作者们更应当被感谢。特别值得一提的是 Esprima，它是这整个软件所用到的核心部件。我首先使用它来完成 AST（抽象语法树）的构建，紧接着，我会遍历这颗 AST 树，然后重新按照我想要的方式生成一颗 DOM 树。这样就完成了一次重渲染，将原始的 JavaScript 代码改写为了更简洁的形式。当然，在遍历 AST 树的过程中也要做一些简单的分析工作。否则就无法实现将子函数抽取出来这样的操作了。不过这个分析操作实在很简单，也没什么可谈的。后续我会在分析过程上做很多工作，实现更多实用的功能。详细的情况可以参见后续的路线图部分。和 WebStorm 之类的 IDE 相比有什么优缺点？术业有专攻。尽管 WebStorm 之类的 IDE 提供了强大的「编辑」功能。但是从实践的角度来说，这些编辑器在用于阅读代码时还存在诸多不足。比较典型的一点是，编辑器总是老老实实的把原始的排版格式呈现出来。而实际上我们需要的是更加紧凑、标准、一致、适度简化后的呈现。例如下面的对比图所示：上图是同一段代码（选自 AngularJS）处理前后的对比。我们可以注意到一些细节：分号被移除了花括号被移除了（改为用缩进来表示层次关系）行间距被适当增大了，看起来没那么拥挤了函数调用时，前后括号和参数之间都增加了空白最重要的是，代码从 6 行变成了 4 行，缩短了任何程序员——任何真正尝试过阅读陌生的大型项目的程序员，应该都能够理解这种形式简化将带来的实际好处。它让你更加专注于代码的逻辑，而不是形式。我们的代码阅读软件能够理解代码的结构，并能够将其转换为更加简洁的形式，这一点有时候能给我们带来意想不到的帮助——例如阅读在 web 环境下那些被压缩过的代码。下图的代码截取自某站点：这样的代码是经过压缩的——删掉了空格、缩进、换行等字符并改写了变量名等——阅读几乎是不可能的。但有些人却必须要从这样的代码里找出感兴趣的东西，比如大家熟悉的白帽子安全人员。相对一般的 IDE，专门的代码阅读软件在处理这样的问题上更加得心应手。综上所述，WebStorm 之类的软件在「编辑」、「项目管理」方面更加强大，但在「阅读」、「分析」方面，专门的代码阅读工具会更加方便。未来的发展路线图——后续功能开发计划（待续）
阅读源码代编辑器必须是，以及或 　公司的其它任何一款web类开发编辑器，他们都有一个相同的优点，支持前端，包括webstorm的所有功能。有几个突出的优点：一个是ctrl+单击能直接进入方法源码实现的地方，另外一个是ctrl+shift+i，可以预览方法的内部实现。就是下面这个图片演示的，这是css的，js的一个道理，就不抓图演示。动态gif图片演示效果丢了，动态gif图片演示效果丢了，看这个链接可有详细的演示：这是ctrl+shift+i的效果：其它的优点不一一列举，有兴趣自己试一下。其它的优点不一一列举，有兴趣自己试一下。chrome调试工具才是阅读js源码的真正核心，断点跟进才是阅读源码的真正利器。其实firebug也可以，不过最近新版的加了代码着亮之后，firebug老抽风，断点老是乱跑。其它的不多说了，有兴趣加入高质量前端群：　一块探讨前端的魅力，webstorm的威力，以及调试工具的给力。高质量，禁止闲聊，非喜勿进。
github上不是有模块化的源码吗
用 Bower 下载脚本的源码已经模块化的，自然可以逐个看没有模块化的，自行模块化。。。
曾在linux下阅读java还有c++的项目，用的是understand来生成uml图还有函数调用关系图，不知道是不是支持javascript语言，题主不妨一试。
使用vim 的泪流满面..
实际开发中，阅读大型js代码 有两样就行：1.高亮提示、可折叠代码的编辑器。webstorm， 前端开发公认的神器， 功能大而全； 或者 sublime text2， 小巧而优雅， 安装插件可实现 常用编辑器所有功能。2.chrome 调试工具。 如
所言：阅读js源码的真正核心 是 断点跟进；
我一般是用webstorm上的
用什么工具其实不是最重要的，最重要的阅读能力或者编程能力。当然好的工具可能事半功倍，前置条件还得是代码能力牛啊
双屏+大屏幕，看起来会很爽，当然这些不是必须的。想要阅读上W行源码的类库就需要先理一理了。阅读官方博客，知道设计的核心思路，要解决的问题，此库为何而生要找出core类库，工具库（一般官方文档会有说明，或者源码包里都会划分好）。按提供的功能划分模块，从核心到边缘。接下来正式阅读源码的时候，首先借助IDE把要阅读的代码块折叠起来了解它都提供了那些方法。core类库和工具库一般依赖比较少阅读起来相对容易点，先把这部分搞定。之后在去按功能划分好的模块。阅读功能模块源码一定要先去看官方文档，把示例敲一遍知道这个API是干嘛的，然后自己想下如果让你来实现你会怎么样搞，然后在去看源码是如何实现的看看和自己的想法有何区别，有何优势，这样去阅读的话思绪就比较清晰了。切记不能茫然的去阅读，要带着问题去阅读。最后在说一句还得多多实践。
现在的sublime text3 可以集成很多的强大插件，还可以汉化，而且---免费~~~如果你刚好利用Angularjs在开发网站，App。那么下面这些60多个最好的Angularjs教程集合，可以帮到你。}