老實說，GitHub 在國內的使用體驗并不算太好，這其中很大的原因就是網絡了。

GitHub 訪問起來比較卡，這個看起來貌似無解。國內的 gitee 網速倒是可以，但是無法代替 GitHub，個人感覺 gitee 上還是開源項目多一些，工具類庫要少一些。

在網絡比較卡的情況下，如果我們想在線查看 GitHub 上項目的源碼，是非常的不方便，我們需要不斷的進入到某個目錄中，然后再退出來，再進入到其他目錄中，這樣每一次都要加載頁面，查看起來非常不便。

今天松哥就給大家介紹兩款瀏覽器插件 SourceGraph 和 Octotree ，使用這兩個瀏覽器插件可以非常方便的在線查看 GitHub 上項目的源碼。Chrome 或者 Firefox 都可以安裝此插件。

1.SourceGraph

1.1 簡介

SourceGraph 是一個依據 Apache2.0 開源協議開源的一個工具，集代碼查看、review PR、代碼搜索等功能于一身。開發者必備。

1.2 支持的瀏覽器

雖然我們大部分情況下可能都是在 Chrome 或者 Firefox 上使用 SourceGraph，不過實際上，SourceGraph 支持的平臺可不止 Chrome 和 Firefox ，包括 Vscode 在內的大多數工具都支持，如下：

可以看到有 Chrome、Firefox、VsCode、Jet Brains全家桶(IDEA、WebStorm 等)、Vi、Sublime、Atom。

1.3 支持的平臺

那我們用這個都可以瀏覽哪些網站的代碼呢?除了 GitHub 還有哪些平臺也受到支持呢?

可以看到，常見的 GitHub、GitLab、Bitbucket 都獲得了支持，還有像 Phabricator、Azure DevOps、AWS CodeCommit 也都有較好的支持。

1.4 安裝

Firefox 大家可以直接搜索安裝， Chrome，要是上網不方便，松哥已經幫大家下載好了，公眾號后臺回復 sourcegraph，獲取 SourceGraph 離線包下載地址 ，離線包下載后之后，直接拖到瀏覽器上安裝即可。

這里我就來和大家演示下正常安裝，在 Chrome 的 Store 中搜索 SourceGraph ，如下：

搜到之后點擊右邊的 添加至 Chrome 按鈕即可，我這邊因為已經裝過了，所以按鈕是評分，安裝完成之后，瀏覽器上會多出一個 SourceGraph 圖標，如下：

這樣 SourceGraph 就安裝好了。

1.5 使用

此時我們在 GitHub 上打開任意一個項目，以松哥的微人事為例，如下：

可以看到，在項目的 Watch 旁邊多了一個按鈕，這個按鈕就是 SourceGraph，我們點擊一下，就可以進入到 SourceGraph 頁面：

這就像一個開發工具一樣，我們在右邊可以輕松的展開項目的包，想看哪個文件就看哪個。上面的搜索框支持正則表達式搜索，可以方便的查找到項目中相關變量的定義。

SourceGraph 中還可以查看變量被定義或者被引用的位置(這個功能要登錄 SourceGraph 后才可以使用)：

是不是都可以當成 IDE 來用了。

有了這些功能，我們再在 GitHub 上瀏覽項目就方便多了，小伙伴們不妨試試。

2. Octotree

2.1 簡介

Octotree(https://www.octotree.io/) 是一款瀏覽器插件，Chrome 和 Firefox 、Opera 對此都有很好的支持。這個插件可以將 GitHub 上項目代碼以樹形格式展示，而且在展示的列表中，我們可以下載指定的文件，而不需要下載整個項目。

2.2 安裝

Firefox 安裝 Octotree 很容易，問題不大，但是 Chrome 上安裝，可能有的小伙伴不太方便，松哥已經將 Chrome 上 Octotree 的離線安裝包下載好了，大家在我公眾號后臺回復 octotree 就可以獲取下載鏈接。

當然，如果大家方便的話，可以直接在 Chrome 商店中搜索，如下：

選擇第一個免費版的安裝就可以了。

裝好之后，瀏覽器右上角就會有一個相應的圖標，如下：

2.3 使用

Octotree 安裝成功之后，打開一個 GitHub 網頁，我們在左邊就可以看到 Octotree 插件，如下：

這樣就可以快速打開并瀏覽一個 GitHub 文件了。

點擊文件名前面的圖標，就可以在一個單獨的網頁中打開這個文件。

好了，這兩個神器就說到這里，小伙伴們不妨試試。