Investigate changes in Git repository
In WebStorm, you can trace back all changes in your project. This helps you locate the author of any change, review the differences between file versions or commits, and safely roll back and undo changes if necessary.
Review project history
You can review all changes made to a project sources that match the specified filters. To view project history, open the Log tab of the Git tool window Alt+9. It shows all changes committed to all branches and remote repositories:
In multi-repository projects, the colored stripe on the left indicates which root the selected commit belongs to (each root is marked with its own color). Hover the mouse cursor over the colored stripe to invoke a tip that shows the root path:
Navigate and search through project history
Search through the list of commits by entering full commit names or messages or their fragments, revision numbers, or regular expressions.
Filter the commits by branch or favorite branches, user, date, and folder (or root and folder for multi-root projects).
Click the Go to Hash/Branch/Tag icon on the toolbar or press Ctrl+F and specify a commit hash, tag or the name of a branch you want to jump to (you will be taken to the latest commit in that branch).
Click an arrow to jump to the next commit in a long branch:
Press the Left and Right keys to jump to the parent/child commit. This is especially useful if you have commits to different repositories and multiple branches all mixed in the Log tab of the Git tool window Alt+9.
For more details on the Log tab of the Git tool window Alt+9, see Log tab.
Review a project's snapshot at a specific revision
WebStorm lets you review the state of your project at a selected revision.
Open the Git tool window Alt+9 and switch to the Log tab.
Select a commit and choose Show Repository at Revision from the context menu.
The Repositories tool window will open containing the snapshot of your project at the selected revision.
Review the differences between two commits
WebStorm allows you to check which files were modified between two commits instead of having to browse the changes in each commit in between.
Select any two commits in the Log tab of the Git tool window Alt+9 and choose Compare Versions from the context menu.
A list of files modified between the selected commits opens. You can view the diff for any file by clicking or pressing Ctrl+D.
Review file history
You can review all changes made to a specific file, and find what exactly was modified in each revision.
Select the required file in any view (in the Project tool window, in the editor, in the Local Changes view, and so on).
Select Git | Show History from the main VCS menu or from the context menu of the selection. The History tab is added to the Git tool window showing the history for the selected file and allowing you to review and compare its revisions.
To identify which changes were introduced in a specific revision, select it in the list. On the right side of the panel the diff is instantly shown.
To view the diff of the whole file in the dedicated diff viewer, select it in the list and press Ctrl+D or click the button on the toolbar. The Differences Viewer will open showing what has changed in this revision.
Review history for directories
In addition to reviewing the history for the whole project or for a specific file, you can check which changes were made in specific folders.
Select a directory or multiple directories in the Project tool window and choose Git | Show History from the context menu.
A new tab is added to the Git tool window Alt+9 that shows commits filtered by the selected folders.
Review the differences between the local and a committed file version
You can check how a committed file revision is different from its local version:
Open the Git tool window Alt+9 and switch to the Log tab.
Select the commit you are interested in, and in the right pane select the file.
Click the button on the toolbar.
Review how changes were merged
WebStorm allows you to review how changes were merged from one branch to another, and how exactly conflicts (if any) were resolved during a merge:
In the Log tab of the Git tool window Alt+9, select the merge commit you are interested in.
If no conflicts were detected and resolved during the merge, WebStorm will display the corresponding message in the Changed Files pane and suggest reviewing changes that originate from both parents:
Select the required file from one of the nodes and click the Show Diff icon on the toolbar or press Ctrl+D. The Differences Viewer will show a two-panel diff allowing you to compare the current version with the selected parent.
If conflicts occurred during the merge, the Changed Files pane will show you a list of files merged with conflicts.
Select the required file and click the Show Diff icon on the toolbar or press Ctrl+D. The Differences Viewer will show a three-panel diff allowing you to compare the current version with each of its parents, and see how exactly conflicts were resolved.
Locate code author (Annotate with Git Blame)
You can figure out who introduced which changes to a file by using VCS annotations (corresponds to git-blame). The annotated view shows detailed information for each line of code:
Annotations for lines modified in the current revision, are marked with bold type and an asterisk.
By default, different authors are highlighted with different colors (see Configure the amount of information shown in annotations).
From the annotations view, you can jump to:
the corresponding commit in the Log tab of the Git tool window Alt+9: use the Select in Git log context-menu command, or hover the cursor over an annotation and click the commit hash in the popup with detailed info
the corresponding commit on https://github.com: use the Open on GitHub context-menu command
the related issue in your bug-tracking system if issue navigation is enabled: hover the cursor over an annotation and click the issue link if it's included in the commit message
Enable annotations
Right-click the gutter in the editor or in the Differences Viewer and select Annotate from the context menu.
You can assign a custom shortcut to the Annotate command: go to the Keymap page of the IDE settings Ctrl+Alt+S and look for Version Control Systems | Git | Annotate.
Configure the amount of information shown in annotations
You can choose how much information you want to see in the annotations view.
Right-click the annotations gutter, choose View and select which type of information you want to see, including the revision from which this change originated, the date, the name of the author in different formats, and the commit number.
You can also set highlighting under Colors.
Configure annotation options
Right-click the annotations gutter and select Options from the context menu:
Ignore Whitespaces: whitespaces will be ignored (git
blame -w
). This means that annotations will point to the previous meaningful commit.Detect Movements Within File: when a commit moves or copies lines within the same file, such change will be ignored (git
blame -M
). This means that annotations will point to the previous meaningful commit.Detect Movements Across Files: when a commit moves or copies lines from other files that were modified in the same commit, such change will be ignored (git
blame -C
). This means that annotations will point to the previous meaningful commit.Show Commit Timestamp: select this option if you want WebStorm to show the commit timestamp in the Annotations view instead of the time when a change was authored.
Customize date format
Press Ctrl+Alt+S to open IDE settings and select Appearance & Behavior | System Settings | Date Formats.
Click the Date Time Pattern field next to VCS Annotate and specify the date format that you want to use for VCS annotations. See patterns reference.
Annotate a previous revision
WebStorm lets you annotate not only the current file revision, but also its previous revisions. The following options are available from the context menu of the annotations gutter:
Annotate Revision: this option is useful if you want to check what a file looked like after a particular change was committed.
Annotate Previous Revision: this option is useful if you find yourself in a situation when the last change in a particular line is meaningless, for example if all that was changed is code formatting. In this case, you can check what the previous revision of the file looked like.
You can also annotate a particular file from the History view. In the History tab, select the file version you want to review, right-click the corresponding line and select Annotate from the context menu.
Watch this video to learn more on how you can benefit from using annotations: