How to use Beyond Compare with Git

You can do the following with any existing Git repository. Before doing this example, make sure you have already Set up Beyond Compare to be your system's difftool.

For my example I have downloaded the Node.js security module Helmet from its public repository: git clone https://github.com/helmetjs/helmet

git branch foo

git log

The first line clones the entire repository, including all of its blobs onto your local drive. The second line creates a new branch FOO. This will simulate a feature branch. The third line prints a history of recent commits.

Look at the log. Each log entry has a long hash number. Use Copy-Paste to grab the first few digits of an old commit. Confirm that you are on MASTER branch. Then roll back your current branch, MASTER, to this old d81dc40af8867a6c3 commit you found in the log:

git branch

git reset --hard d81dc40af8867a6c3

Compare two branches of your Git: MAIN and FOO

Our branch FOO is now newer than the main branch, because our git reset rolled back the main branch to an older version. We can git diff to see what has changed. Brace yourself: an all-text diff is pretty verbose. The main thing to orient yourself with:

• double ampersands mark the beginning of each difference

• the +++ and --- are a kind of legend or key. They tell you which file will be marked with +/- in the lines to come

• what makes it all so verbose is the diff shows several surrounding context lines for each difference:

$ git diff master..foo -- index.js
diff --git a/index.js b/index.js
index 55de743..fc03968 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,5 @@
+var deprecate = require('depd')('helmet')
+
 var DEFAULT_MIDDLEWARE = [
   'dnsPrefetchControl',
   'frameguard',
@@ -59,7 +61,6 @@ helmet.expectCt = require('expect-ct')
 helmet.featurePolicy = require('feature-policy')
 helmet.frameguard = require('frameguard')
 helmet.hidePoweredBy = require('hide-powered-by')
-helmet.hpkp = require('hpkp')
 helmet.hsts = require('hsts')
 helmet.ieNoOpen = require('ienoopen')
 helmet.noCache = require('nocache')
@@ -67,6 +68,9 @@ helmet.noSniff = require('dont-sniff-mimetype')
 helmet.permittedCrossDomainPolicies = require('helmet-crossdomain')
 helmet.referrerPolicy = require('referrer-policy')
 helmet.xssFilter = require('x-xss-protection')
+
+helmet.hpkp = deprecate.function(require('hpkp'), 'helmet.hpkp is deprecated and will be removed in helmet@4. You can use the `hpkp` module instead. For more, see https://github.com/helmetjs/helmet/issues/180.')
+
 middlewares = Object.keys(helmet)
​
 module.exports = helmet

Before going farther, make sure you specified to Git that you want BC to be your difftool.

Now do your diff, but do it with Beyond Compare. In the command line of your terminal, say git difftool master..foo -- index.js

You should get a window like this:

Things to notice :

1. This shows that the language Javascript was automatically detected. Beyond Compare comes with a couple dozen file formats, viewable at Tools->FileFormats. When BC opens a file, it checks the filename extension (.html, .jpg, .js, .h, et cetera) against its known list of file formats. (You can write your own format types. You can also download more formats at the official Scooter Software site.) The formats allow BC to pre-process the incoming file so it looks better.

2.This shows that bytes at the start of the file have signaled to BC that this should be displayed as ANSI (as opposed to UTF-8, et al)

3. This shows that Beyond Compare has detected the newline style is DOS/Windows (as opposed to Mac or Linux newlines).

4. A line is colored if it is different.This line is blue to show there is an Unimportant Differences, such as whitespace, lower/uppercase, or a different code-comment-line (these are detected with the help of File Formats, 1 above).

5. This line is marked red. Red means the line has a real bona fide difference.

6. There's no wordwrap available because BC is doing insane levels of efficient comparison within the lines, so, for long lines, one trick is to get used to looking at it in this pullout window here. You may find this window convenient for editing the lines too.