大部分开源项目都托管在 GitHub 上，浏览 GitHub 可能是许多程序员成为每天必做的事情之一。有些时候我们想要了解一些具体的实现细节，看 README 或 API 文档是不够的：这种情况就需要直接看代码。
在 GitHub 上浏览代码是有一些痛点的：它只提供基本的语法高亮。比如想找到某个变量出现或者声明的位置，一般只能通过浏览器自带的查找工具（Command + F 或 Ctrl + F）去找。如果是一个大的文件，比如有几千行，要找的变量可能是在几百行前声明的，中途还有一系列修改。这种查找方式比较繁琐，会造成一些心智负担。
Octohint 是一个浏览器扩展，目标是尽量减少这种心智负担，让浏览代码更加方便。效果图：
这个示例是一个 TypeScript 文件，可以看到 Octohint 提供了几种功能：
- 鼠标 hover 变量名，会显示变量的类型
- 鼠标左键点击变量名，会显示这个变量出现的所有位置
- 按住 Command + 鼠标左键点击变量名，会跳转到这个变量定义的位置（在 Windows 和 Linux 下使用 Ctrl）
安装
Octohint 的源代码托管在 GitHub 上：github.com/pd4d10/octo…
支持 Chrome，Safari，Firefox 和 Opera。具体安装步骤可以看 README，这里不再赘述。目前 Chrome 和 Safari 用户可以直接在官方的应用商店直接安装，Firefox 和 Opera 用户暂时可以参照 README 中的步骤安装
支持的编程语言
Octohint 支持所有的编程语言，会根据实际情况采取不同的策略。支持 IntelliSense 的语言有：TypeScript，JavaScript，CSS，LESS 和 SCSS。其他语言会降级到 token 匹配，在点击时匹配到所有相同的 token 并高亮展示。
这是因为 Octohint 的代码分析是在客户端做的，而客户端（浏览器）只能运行 JavaScript。IntelliSense 功能需要有 JavaScript 实现的解析器才能集成进来。
支持的平台
支持 GitHub 和 GitLab。支持私有的 GitLab，需要提供对应站点的权限，具体操作方式可以查看 README 中的对应章节。
优势与劣势
业界也有一些提供类似功能的产品，它们有一个共同的特点：代码分析是在服务端做的。这样会有一些局限性：
- 在服务端做分析，意味着需要把代码发给第三方服务。对于开源项目没有问题，对于私有的项目比如公司内部的代码，就无法使用了，使用者肯定不希望把这些代码泄露给第三方。
- 每次提示都需要与服务端通信。所以从理论上来说，服务的提供商可以记录你的任何行为。对于注重隐私的用户来说会有一些隐患。
Octohint 是一个纯客户端的工具，所有的代码分析都在浏览器完成。可以放心地用在私有代码仓库上，也不会发送记录任何到第三方服务。唯一的网络通信是会去 GitHub 上下载代码，以及去 NPM 和 DefinitelyTyped 上下载对应的类型文件，来提供更丰富的类型提示。
当然，在客户端做也有局限性：正如之前所说，因为浏览器只能运行 JavaScript，目前 IntelliSense 只能覆盖到指定的几种语言，其他都会降级到 token 匹配。不过 WebAssembly 提供了一种新的可能性：可以把其他语言写的分析器编译成 WebAssembly 再引入。这是一个未来可以尝试的方向。
使用反馈
可以在 GitHub 上创建 issue。
