Viewing File Changes
Viewing Changes
We know thatgit log
will show us the commits in a repository, and if we add the--stat
flag, we can see what files were modified and how many lines of code were added or removed. Wouldn't it be awesome if we could see exactlywhat those changes were?
If this isn't the best part of a version control system, I don't know what is! Being able to see the exact changes that were made to a file is incredibly important! Being able to say, "oh, ok, so this commit adds 5 pixels of border-radius to the button!".
For example, in the blog project, the commita3dc99a
has the message "center content on page" and modifies the CSS file by adding 5 lines. What are those five lines that were added? How can we figure out what those 5 lines are?
git log -p
Thegit log
command has a flag that can be used to display the actual changes made to a file. The flag is--patch
which can be shortened to just-p
:
$ git log -p
Run this command and check out what it displays.
Annotatedgit log -p
Output
Using the image above, let's do a quick recap of thegit log -p
output:
- 🔵 - the file that is being displayed
- 🔶 - the hash of the first version of the file and the hash of the second version of the file
- not usually important, so it's safe to ignore
- ❤️ - the old version and current version of the file
- 🔍 - the lines where the file is added and how many lines there are
-15,83
indicates that the old version (represented by the-
) started at line 15 and that the file had 83 lines+15,85
indicates that the current version (represented by the+
) starts at line 15 and that there are now 85 lines...these 85 lines are shown in the patch below
- ✏️ - the actual changes made in the commit
- lines that are red and start with a minus (
-
) were in the original version of the file but have been removed by the commit - lines that are green and start with a plus (
+
) are new lines that have been added in the commit
- lines that are red and start with a minus (
Further Research
- Generating patches with -p from the Git docs
QUESTION 1 OF 4
Using what you've learned so far aboutgit log
's-p
flag, look at the commit with the SHA50d835d
. What line number inapp.css
should you start looking at to see what has been changed?
Tip - don't forget that while looking at thegit log
output, thed
key will scroll_down_by half a page while theu
key will scroll_up_half a page.
line 63
line 89
line 127
line 155
SUBMIT
QUESTION 2 OF 4
Usinggit log
and any of its flags, what code was added in by commit4a60beb
?
color: #352d2d;
color: #250808;
color: #333333;
color: #2e3d49;
SUBMIT
QUESTION 3 OF 4
git log --stat
andgit log -p
are both really helpful commands. Wouldn't it be great if we could have both of their output at the same time? Hmmm…
What happens whengit log -p --stat
is run?
it displays only the patch information
it displays only the stats
it displays both with the patch info above the stats info
it displays both with the stats info above the patch info
SUBMIT
In the video above, we looked at a commit that indents a lot of code. The patch output shows all of those lines as having been removed and then added again at their new level of indentation. Showing all of the indent changes makes it hard to tell what was actually added, though.
QUESTION 4 OF 4
What does the-w
flag do to the patch information? For help, checkthis Git docs page.
it displays non-whitespace characters in blinking text
it displays non-whitespace changes in bold
it ignores whitespace changes
it shows a separate patch area with just new/removed content
SUBMIT
git log -p
Recap
To recap, the-p
flag (which is the same as the--patch
flag) is used to alter howgit log
displays information:
$ git log -p
This command adds the following to the default output:
- displays the files that have been modified
- displays the location of the lines that have been added/removed
- displays the actual changes that have been made