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

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

在網路比較卡的情況下，如果我們想線上檢視 GitHub 上專案的原始碼，是非常的不方便，我們需要不斷的進入到某個目錄中，然後再退出來，再進入到其他目錄中，這樣每一次都要載入頁面，檢視起來非常不便。

今天鬆哥就給大家介紹兩款瀏覽器外掛 SourceGraph 和 Octotree ，使用這兩個瀏覽器外掛可以非常方便的線上檢視 GitHub 上專案的原始碼。Chrome 或者 Firefox 都可以安裝此外掛。

SourceGraph

簡介

SourceGraph 是一個依據 Apache2.0 開源協議開源的一個工具，集程式碼檢視、review PR、程式碼搜尋等功能於一身。開發者必備。

支援的瀏覽器

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

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

支援的平臺

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

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

安裝

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

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

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

這樣 SourceGraph 就安裝好了。

使用

此時我們在 GitHub 上開啟任意一個專案，以鬆哥的微人事為例，如下：

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

這就像一個開發工具一樣，我們在右邊可以輕鬆的展開專案的包，想看哪個檔案就看哪個。上面的搜尋框支援正則表示式搜尋，可以方便的查詢到專案中相關變數的定義。

SourceGraph 中還可以檢視變數被定義或者被引用的位置(這個功能要登入 SourceGraph 後才可以使用)：

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

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

Octotree

簡介

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

安裝

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

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

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

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

使用

Octotree 安裝成功之後，開啟一個 GitHub 網頁，我們在左邊就可以看到 Octotree 外掛，如下：

這樣就可以快速開啟並瀏覽一個 GitHub 檔案了。

點選檔名前面的圖示，就可以在一個單獨的網頁中開啟這個檔案。

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

關注公眾號【江南一點雨】，專注於 Spring Boot+微服務以及前後端分離等全棧技術，定期視訊教程分享，關注後回覆 Java ，領取鬆哥為你精心準備的 Java 乾貨！

相關推薦