如何轻松阅读 GitHub 上的项目源码 ?

aaaaaab

有没有好的代码浏览工具，像 IDE 一样。
Chrome 有很多好用的插件，那Safari 有什么插件推荐吗？

刺客依恋

在 Chrome 浏览器上浏览的话，装上这两个插件，就足够你畅游了。
我试过 Octotree，但它只是支持在浏览器左侧生成文件树，我也试过 GitHub Linker，它可以让你进行 import 的包跳转，我也试过 Github 新出的代码跳转功能，可惜支持的项目有限。
我用过的这些辅助浏览插件里面，个人觉得最好的，一个可以顶所有的就是：
SourceGraph 插件

插件市场搜 SourceGraph 即可：

SourceGraph 可以同时提供 Octotree 提供的文件树浏览和 Github Jump to definition 的定义跳转功能，而且还支持 Jump to reference 引用跳转。
使用十分方便，安装上它后，随便打开一个 Github 项目：

我们会发现项目首页多了一个图标，它就是 Source Graph，点击它，即可打开 Source Graph 项目浏览页面：

可以看到类似于 Octotree 插件提供给我们的文件树，也支持快速搜索。

基本上，在代码的浏览这个层面，已经具备了 IDE 的样子，而且整个过程都在网页里进行，十分方便，无需将代码 clone 至本地，方便快速浏览代码。
第二个我要推荐的，不是辅助浏览的插件，但是胜似辅助浏览。
很多时候，我们发现一个 Github 项目中装着很多东西，比如有的代码仓库中装着几十个教学实例代码，但是你只是想把其中的一个教学实例下载下来。
使用 git clone 命令克隆的是整个代码仓库，如何你轻松地获取一个仓库中的部分代码？
GitZip 插件：下载仓库中部分代码

装上即可，即装即用，非常方便。
只需定位到某个项目子文件夹上，在空白区域右键点击：

选择 Download [XXX] 即可，图中我们下载了 spring-boot-autoconfigure 这个子模块的代码。
宁缺毋滥，有这两个完全够用了，不用再找别的了。

前排座招租中

像IDE 一样？好吧，
三种办法：
1，用Chrome插件Octotree，左侧会出现树形结构，方便你浏览源代码。

2，用Github Desktop桌面应用。方便把代码clone到本地，然后进行各种git操作。

3，如果你开发前端(Angular,React,ES6,Typescipt)，那么最推荐这种方式！直接把Chrome变成一个在线IDE。帮你把npm包都准备好，直接可以运行。


只要把github地址改成https://stackblitz.com/github开头就可以了。
例如下面视频中，Github项目地址是
https://github.com/gothinkster/angular-realworld-example-app
改成
https://stackblitz.com/github/gothinkster/angular-realworld-example-app











这个回答内容在我的知乎文章里：

----------------------
一个月3.6k赞，希望对你们学习Github上的项目有用！
但是收藏数比关注和赞数多，这是知乎的风格吗...

陈龙
21 次咨询5.0

206925 次赞同

去咨询

瞧，脆笋

sourcegraph, 没有人用这个吗，可以支持快捷键、语义分析、代码搜索、跳转，甚至能跳转到SDK或framework的源码文件中。有chrome插件可用，直接在github页面上提供使用sourcegraph打开项目的按钮。

咴叽带翅膀

推荐几个知名开源项目的源码注释和源码阅读笔记，带你阅读源码、点亮阅读源码的技能。

这些项目涵盖：C、C++、Java、Go、Python、JavaScript 编程语言，总有一款适合你。
虽然有的项目已经很久没更新，阅读的版本也已经过时，但是里面的知识依旧闪闪发亮！ 最后，要带着问题去源码里找答案，否则很难坚持下来。
深入源码掌握核心技术，才能不止步于应用层面。


1、redis-3.0-annotated（Redis）
Star 数：7.9k｜语言：C
Redis 是一个基于内存、分布式、可选持久性、开源的 KV（键值）存储数据库。
该项目是 Redis 3.0 版本源码注释。

https://github.com/huangz1990/redis-3.0-annotated

2、linux-0.12（Linux）
Linux 是一种开源的类 UNIX 操作系统。
该项目是 Linux 内核 0.12 版本完全注释版。
我最初是在 GitHub 找到了别人上传的旧版（0.11）注释源码，一通搜索下发现了原作者赵炯老师的网站。第一版发布于 2003 年，最新更新于 2021 年，维护了 18 年。这个阅读 Linux 源码的项目，虽然没有上传到 GitHub 但是内容、注释的源码、配套工具全部开源。

http://www.oldlinux.org/Book-Lite/
PDF：http://www.oldlinux.org/download/CLK-5.0.1-WithCover.pdf


3、reading-source-code-of-leveldb-1.23（LevelDB）
Star 数：15｜语言：C++
LevelDB 是一个由 Google 开源的持久化 KV（键值）存储数据库。
该项目是 LevelDB 1.23 版本源码阅读笔记，包括：分析 DB 运作流程、STable 等文件格式以及 Compaction 过程。

https://github.com/SmartKeyerror/reading-source-code-of-leveldb-1.23

4、spring-analysis（Spring）
Star 数：10k｜语言：Java
Spring 框架是一个开源的 Java 全栈应用程序框架和控制反转容器实现，多用于构建企业级 Web 应用。
该项目是 Spring 4.3.18 版本的源码阅读笔记，包含源码注释、类图、文字描述。

https://github.com/seaswalker/spring-analysis

5、learn_netty_source_code（Netty）
Star 数：1k｜语言：Java
Netty 是一个 Java 异步事件驱动的网络应用框架。
该项目是 Netty 4.0.33 版本源码分析教程。

https://github.com/yongshun/learn_netty_source_code


6、grpc-read（gRPC）
Star 数：154｜语言：Go
gRPC 是 Google 发起的一个开源 RPC 系统，基于 HTTP/2 协议传输，使用 Protocol Buffers 作为接口描述语言。
该项目是 gRPC Go 版本实现：grpc-go 的源码解读。

https://github.com/lubanproj/grpc-read

7、annotated-py-projects
Star 数：312｜语言：Python
该项目包含多种 Python Web 框架源码解读，包括：Flask、Sanic、web.py 等项目的源码注释。

https://github.com/hhstore/annotated-py-projects

8、learnVue（Vue.js）
Star 数：11k｜语言：JavaScript
Vue.js 是一个用于创建用户界面的开源 JavaScript 框架。
该项目包含 Vue.js 源码注释以及作者学习 Vue.js 源码过程中的一些心得和收获。

https://github.com/answershuto/learnVue

9、react-illustration-series（React）
Star 数：1.3k｜语言：TypeScript
React 是一个声明式、高效且灵活的用于构建用户界面的 JavaScript 库。
该项目是以图文的方式解读 react@17.0.2 源码，包含大量配图。

https://github.com/7kms/react-illustration-series

HelloGitHub 想让更多人爱上编程、开源，所以一直在尝试、摸索如何可以帮助到更多的人。目前 HelloGitHub 交流群已全面开放，关注 HelloGitHub ，添加：HelloGitHub001 为好友入群，可同 C、C++、Java、Go、Python、前端、机器学习等各界大佬谈笑风生、切磋技术~ 还有大学生开源群，叫上你的小伙伴一起感受开源的乐趣吧！目前 HelloGitHub 小程序已上线，可直接搜索开源项目啦～

HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，找开源就上 HelloGitHub。

惑惑

这个可以用chrome插件，推荐 http://Insight.io for Github，会在左侧添加树状菜单，非常方便效果图如下：

另外阅读gitlab的代码也可以装一个插件，推荐gitlab-code-view，类似的功能



最后打个广告，欢迎大家 follow 我的GitHub：yanhaijing (颜海镜)