Based on the different Git branching strategies, developers might need to rebase/merge their branches with other branches in daily work. Comparing the differences between two branches before rebasing or merging code is a good habit, it can help you figure out what changes will come in and help you understand how to resolve the conflicts if there are any.
Here are some techniques to help you compare branches effectively.
TL;DR
- There are two comparison methods for the git diff command, two-dot (git diff A..B) and three-dot (git diff A...B).
- two-dot shows diff of both sides (A and B).
- three-dot show diff of the right side (B).
Background
A team is developing a cooking app. Developer A is implementing a function to cook dim sum. Developer B is implementing a function to cook steak. They are working on their feature branch. Meanwhile, someone updated the doc on the development branch.
The git branches are like
* fa98dda (HEAD -> development, origin/development) doc: update
| * f635932 (origin/feat/steak, feat/steak) feat: cook steak
|/
| * 1f0426a (origin/feat/dim-sum, feat/dim-sum) feat: cook dim sum
|/
* bf1713d (origin/main, main) doc: update README
A's branch (feat/dim-sum)
// project structure
├── README.md
└── src
└── dim-sum.js
// dim-sum.js
function cookDimSum(flour, shrimp) {
await cook(flour, shrimp);
console.log('dim sum is ready!');
}
B's branch (feat/steak)
├── README.md
└── src
└── steak.js
// steak.js
function cookSteak(steak) {
await cookSteak(steak, 'medium well');
console.log('steak is ready!')
}
Using Git Diff
Now, developer A wants to merge the code to the development branch. He needs to check what will be merged to the development branch before the merge, so
> git checkout feat/dim-sum
> git diff development..HEAD
diff --git a/README.md b/README.md
index f974c1a..bf4e664 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,4 @@
# Learn Git
-New feature in progress
-
Git is a distributed version control system.
Git is free software distributed under the MIT.
diff --git a/src/dim-sum.js b/src/dim-sum.js
new file mode 100644
index 0000000..700bf24
--- /dev/null
+++ b/src/dim-sum.js
@@ -0,0 +1,4 @@
+function cookDimSum(flour, shrimp) {
+ await cookDimSum(flour, shrimp);
+ console.log('dim sum is ready!');
+}
The differences between the 2 branches will be listed. It shows the content in the README.md has been removed and there are additions to the dim-sum.js.
Well, I usually don't care about the changes in the development branch as long as there are no conflicts. So I will use three-dot comparison to compare my feature branch with the development branch.
> git checkout feat/dim-sum
> git diff development...HEAD
diff --git a/src/dim-sum.js b/src/dim-sum.js
new file mode 100644
index 0000000..700bf24
--- /dev/null
+++ b/src/dim-sum.js
@@ -0,0 +1,4 @@
+function cookDimSum(flour, shrimp) {
+ await cookDimSum(flour, shrimp);
+ console.log('dim sum is ready!');
+}
This time, it only outputs the additions that developer A made on the development branch.
Three-dot comparison can also be used to compare your branch with other developer's branches.
> git checkout feat/dim-sum
> git diff origin/feat/steak...HEAD
diff --git a/src/dim-sum.js b/src/dim-sum.js
new file mode 100644
index 0000000..700bf24
--- /dev/null
+++ b/src/dim-sum.js
@@ -0,0 +1,4 @@
+function cookDimSum(flour, shrimp) {
+ await cookDimSum(flour, shrimp);
+ console.log('dim sum is ready!');
+}
In case your local branches are not up to date, you should add origin/ before the branch name to compare your branch with the remote branch. Don't forget to git fetch sync with the remote.
You can also print the changes on the feat/steak branch to know what changes the other developer made, just
> git checkout feat/dim-sum
> git diff HEAD...origin/feat/steak
diff --git a/src/steak.js b/src/steak.js
new file mode 100644
index 0000000..789fbdb
--- /dev/null
+++ b/src/steak.js
@@ -0,0 +1,4 @@
+function cookSteak(steak) {
+ await cookSteak(steak, 'medium well');
+ console.log('steak is ready!')
+}
This picture can help you better understand the differences between the two-dot and three-dot comparison.
Git Diff on GitHub
Git diff is available on the GitHub. I always use GitHub to compare the differences between the branches (also commits), it is more convenient than typing commands in the command line. It also provides an awesome diff view!
To use it go to your repository home page -> Pull requests -> New pull request.
By default, it uses three-dot comparison. You can't change it on the UI.
But you can change it to use two-dot comparison by editing the URL.
Another reason I’d like to use the GitHub version diff tool is that you can access the diff tool by editing the URL directly without using the UI to choose branches to compare. https://github.com/[user_name or org_name]/[repository_name]/compare/[base]..[compare]. You can even compare commits in this way.
Top comments (0)