Hacking Github’s Diff View

We’re big fans of GitHub.  I personally really like the diff view feature which allows commenting inline of someone’s commits.  The other day I was reviewing a commit which included a file I wasn’t familiar with.  So in that case the code review was for me also a first time read of the code.  For that purpose I wanted to view the entire file, but GitHub’s diff view only shows the changes in context of several lines in the file (for legit reasons).  The did however throw us a hook for viewing more context by clicking the expand icon to the left which fetches ~10 more lines of code.

What GitHub’s Diff View Shows:

Github Diff View can be hacked into editable snippets using Chrome's dev tools.

 In my case, I was reviewing several lines of changes in a 500 line file, but I wanted to view the diff changes in context of the entire file.  So you’d imagine that clicking on the expand icon 50 times to bring in the entire file can be quite frustrating.  Chrome Dev Tools console to the rescue!  I did some inspection on the diff view’s HTML and came up with this snippet.

Anyone could immediately point out the shortcomings of running this snippet: it’s takes a bit long and it relies on the GitHub servers to fetch extra lines fast.  But what the heck it works.  Just fire up the console, paste the code and hit ENTER, and after a few seconds all the missing lines from the file will be revealed.  Meanwhile, help us get GitHub to add the full context diff feature by retweeting this tweet.

Feel free to share:

LEAVE A REPLY

Please enter your comment!
Please enter your name here