### 一个神操作可在浏览器动画浏览 GitHub 文件的历史！帅的不行！

### 序

我们都知道，GitHub 上可以查看某个文件的历史修改记录。

一般我们的做法是在命令行里通过 Git 命令来查看，有的人习惯直接在 GitHub 点击该文件的 History 查看 commit 历史记录。

今天给大家介绍一个新方法，这种方法可以在浏览器里直接浏览任意 GitHub 文件的历史，而且还是以动画的形式，简直不能太 6 了，话不多说，下面进入正题。

### 1

首先，我这里以自己 GitHub 仓库的一个文件为例子，下图表示的用泰勒展开式计算圆周率 Pi 的代码。

![静态图片.png](https://i.loli.net/2019/02/28/5c77d26ad7609.png)

原文地址 https://github.com/rongweihe/CS_Offer/blob/master/GetPi.cpp

### 2

接下来我们来看一波比较 6 的操作。

- 首先我们把第一步的 URL 中的 `github.com` 替换成  `github-history.netlify.com`。

- 然后按下回车键，我们看到了如下的效果：

![微信截图_20190228145101.png](https://i.loli.net/2019/02/28/5c7784e7a08fe.png)

观察到了什么？

没错，网页上显示了该文件的具体内容，包括最新和历史的版本，还有当初 contributor 提交的 commit 以及日期！这样一对比，是不是比我们平常使用 Git 命令 或者在 GitHub 上点击 History 查看文件历史记录好多了，既形象又生动，当然了，我们注意到，首先显示的该文件最新的内容。

如果想看具体日期历史版本的具体内容和提交信息，可以用鼠标点击最上层 contributor 的头像就可以看到了，contributor 的头像下面显示了历史的修改提交日期。

### 3

接下来，我们来看看动画效果是怎样的，当我们用鼠标滑轮前后滚动时，网页上的内容就像播放视频一样滚动起来，为了给大家看到实际效果，这里做了两个 GIF 图，分别是鼠标点击滑动和滚轮滑动的效果。

**鼠标点击滑动效果**

![test002.gif](https://i.loli.net/2019/02/28/5c7784540be2b.gif)

**滚轮滑动的效果**

![test003.gif](https://i.loli.net/2019/02/28/5c778471dc928.gif)

有没有感觉这波操作真的很帅，感兴趣的可以去自己的 GitHub 仓库上找个文件试试，祝玩得愉快~

PS ：技术操作参考：<https://twitter.com/pomber/status/1092827841509707778>

