View staged and unstaged changes (git diff)

Author：Chuan Chen 阅读数：36292人阅读分类：开发工具

In Git, git diff is a powerful tool for viewing code changes. It helps developers clearly understand the differences between the working directory, the staging area, and commits, enabling more efficient management of code changes.

Basic Usage: Viewing Unstaged Changes

When running the git diff command, it by default shows the unstaged changes in the working directory. These changes are relative to the last commit (HEAD) or the staging area (if there are staged changes).

git diff

Suppose we modified a file index.html, adding the following content:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
+   <p>This is a new paragraph.</p>
  </body>
</html>

After running git diff, the output will show the added lines (marked with +) and deleted lines (marked with -). For example:

diff --git a/index.html b/index.html
index abc1234..def5678 100644
--- a/index.html
+++ b/index.html
@@ -4,5 +4,6 @@
   </head>
   <body>
     <h1>Hello World</h1>
+    <p>This is a new paragraph.</p>
   </body>
 </html>

Viewing Staged Changes

To view changes that have been staged with git add but not yet committed, use git diff --staged or git diff --cached (they are equivalent).

git diff --staged

Continuing the example above, suppose we staged the changes to index.html:

git add index.html

Now, running git diff --staged will show the differences between the staging area and the last commit (HEAD):

diff --git a/index.html b/index.html
index abc1234..def5678 100644
--- a/index.html
+++ b/index.html
@@ -4,5 +4,6 @@
   </head>
   <body>
     <h1>Hello World</h1>
+    <p>This is a new paragraph.</p>
   </body>
 </html>

Viewing Both Staged and Unstaged Changes

To view all changes at once (both staged and unstaged), use git diff HEAD. This shows all differences between the working directory and the last commit.

git diff HEAD

Suppose we staged the changes to index.html and also modified style.css without staging it:

/* style.css */
body {
  background-color: white;
+ color: black;
}

Running git diff HEAD will output:

diff --git a/index.html b/index.html
index abc1234..def5678 100644
--- a/index.html
+++ b/index.html
@@ -4,5 +4,6 @@
   </head>
   <body>
     <h1>Hello World</h1>
+    <p>This is a new paragraph.</p>
   </body>
 </html>
diff --git a/style.css b/style.css
index 1234567..89abcde 100644
--- a/style.css
+++ b/style.css
@@ -1,2 +1,3 @@
 body {
   background-color: white;
+  color: black;
 }

Comparing Changes in Specific Files or Directories

To view changes only in a specific file or directory, add the file or directory path after git diff.

git diff style.css

This will show only the unstaged changes in style.css:

diff --git a/style.css b/style.css
index 1234567..89abcde 100644
--- a/style.css
+++ b/style.css
@@ -1,2 +1,3 @@
 body {
   background-color: white;
+  color: black;
 }

Comparing Differences Between Branches or Commits

git diff can also be used to compare differences between branches or commits. For example, to compare the current branch with the main branch:

git diff main

Or to compare two commits:

git diff abc1234 def5678

Assuming abc1234 and def5678 are commit hashes, the output will show all file differences between these two commits.

Using `--word-diff` to View Word-Level Differences

By default, git diff shows line-level differences. To view word-level differences, use the --word-diff option.

git diff --word-diff

For example, if we modify the text in index.html:

<h1>Hello World</h1>

Changed to:

<h1>Hello Git</h1>

Running git diff --word-diff will output:

diff --git a/index.html b/index.html
index abc1234..def5678 100644
--- a/index.html
+++ b/index.html
@@ -4,5 +4,5 @@
   </head>
   <body>
-    <h1>Hello World</h1>
+    <h1>Hello {+Git+}</h1>
   </body>
 </html>

Ignoring Whitespace Changes

Sometimes whitespace changes (like indentation or line breaks) can clutter the diff output. Use the -w or --ignore-all-space option to ignore whitespace changes.

git diff -w

Viewing Statistics

To quickly view statistics about the changes (e.g., how many files and lines were modified), use the --stat option.

git diff --stat

The output might look like this:

index.html | 1 +
style.css  | 1 +
2 files changed, 2 insertions(+)

Using Graphical Tools to View Differences

In addition to the command line, you can use graphical tools to view differences. For example, running the following command will open the default graphical tool: