Graphical Git Tools

If, like me, you're a dev and you work in a team of more than one (or in fact you work on any project, you probably use Git to track your changes. I personally prefer the command line for committing, pulling, pushing and all things Git-related. One thing I always do when I'm about to commit something (and it should really be a no-brainer) is to review what's changed. No matter how small, it serves as a mini code review and lets me sanity check what I'm about to commit.

The problem is, when you run git diff in Terminal it's a pretty ugly sight, and often baffling if you've changed more than two lines. See exhibit A:

Even with a small change this isn't that easy to read

Thankfully however, there are plenty of GUI tools to help out. If you've ever used an IDE with Git integration (such as WebStorm or Eclipse) then you may have seen a nice side-by-side comparison with your changes. Github does it too, and the desktop app also shows your changes nicely. If you're a Sublime Text or Vim (or anything else) user, you can configure Git to use an external diff program.

Try running git difftool in your terminal window. On OSX filemerge will normally be launched by default (in my experience), or meld if you're on Ubuntu. You now get a prettier view (OK, it's Linux so pretty is a relative term):

Screenshot of meld

There are tons of diff tools out on the web, so you're not limited to what's installed by default. A couple of good tools I've stumbled on are:

  • Kdiff3 is an open source, thus free, tool. It's not the prettiest but it does work fairly well

  • Diffmerge - I prefer this as it's a bit nicer to reader, but of course it's not free. Probably explains why it's nicer :)

One last thing - where graphical git tools come into their own is with merge conflicts. They will show a 3-way merge between your original and incoming versions, with the merged result in the middle. Much better than spending hours tracking down the ====== and <<<<< combinations that appear in the file normally!
An example of this is here:
Example of a 3-way merge

It's so much easier to see at a glance what's been changed so you can figure out which version to keep!

Finally - there's some config that needs to be done to tell Git what to do with your new mergetool (if you're using Diffmerge). This gist describes what you need to do (and actually probably summarises this post better!)

Enjoy :)