Review changes

This topic explains how to keep track of the changes that you and your teammates introduce to the source code.

Review project history

WebStorm allows you to review all changes made to the project sources that match the specified filters.

For distributed version control systems, such as Git and Mercurial, you can view project history in the Log tab of the Version Control tool window Alt+9 (refer to Investigate changes in Git repository).

For centralized version control systems, such as Subversion, Perforce, and ClearCase, project history is available in the Repository tab of the Version Control tool window Alt+9.

Track changes to a file in the editor

As you modify a file that is under version control, all changes are highlighted in the editor with change markers that appear in the gutter next to the modified lines and show the type of changes introduced since the last synchronization with the repository. When you commit the modified file to the repository, the change markers disappear.

The changes you introduce to the text are color-coded:

line added.
line changed.
line deleted.

You can manage changes using the dedicated toolbar. To invoke it, hover over a change marker and then click it. The toolbar is displayed together with a frame showing the previous contents of the modified line:

The actions in the toolbar let you navigate to the next or previous change, roll back a change, view the differences between the current and the repository version, copy the previous version of the modified line to Clipboard, or turn on highlighting differences in the code.

If you want to turn off highlighting changes, uncheck the Highlight modified lines in gutter option on the Version Control | Confirmation page of the IDE settings Control+Alt+S.

Compare local changes with the repository version

Apart from navigating through your local changes within a file in the editor, you can review these changes compared to the base revision of the file.

To preview the diff, select a modified file in the Commit tool window and click on the toolbar.

The left pane shows the affected code as it was in the base revision, and the right page shows the affected code after you've made changes locally.

Use the toolbar buttons and controls to navigate between changes and configure the appearance of the Change Details pane or the Differences Viewer:

Item	Tooltip and Shortcut	Description
/	Previous Difference / Next Difference `Shift+F7` `F7`	Jump to the next or previous difference. When the last or the first difference is reached, WebStorm suggests clicking the arrow buttons or pressing `F7`/`Shift+F7` once more and comparing other files modified locally. This behavior depends on the Go to the next file after reaching last change option in the Differences Viewer settings.
	Jump to Source `F4`	Open the selected file in the editor. The caret is placed in the same position as in the Differences Viewer.
	Compare Previous/Next File `Alt+ArrowLeftAlt+ArrowRight`	Compare the local copy of the previous or next file with its update from the server. These controls are only available if more than one file has been modified locally.
	Go To Changed File `Control+N`	Display all changed files in the current change set and navigate to them. This action is only available when you review changes to multiple files.
Viewers		Select a viewer mode: side-by-side or unified. The side-by-side mode has two panels, and the unified mode has one panel. You can edit code and perform the Accept, Append, Revert actions in both viewers. You can change text only in the right-hand part of the side-by-side viewer or in the lower line in the unified viewer. You can edit only local versions of your files. You cannot edit files that have read-only status.
Whitespace		Define how the Differences Viewer should treat whitespaces. Do not ignore: white spaces are important, and all the differences are highlighted. This option is selected by default. Trim whitespaces: trim whitespaces if they appear in the end and at the beginning of a line (`("\t", " ")`). If two lines differ in trailing whitespaces only, these lines are considered equal. If two lines are different, trailing whitespaces are not highlighted in the By word mode. Ignore whitespaces: white spaces are not important, regardless of their location in the source code. Ignore whitespaces and empty lines: ignores whitespaces and empty lines. The following entities are ignored: all whitespaces (as in the 'Ignore whitespaces' option) all added or removed lines consisting of whitespaces only all changes consisting of splitting or joining lines without changes to non-whitespace parts. For example, differences between `a b c` and `a \n b c` are not highlighted in this mode.
Highlighting mode		Select the way differences granularity is highlighted. The available options are: Highlight words: modified words are highlighted Highlight lines: modified lines are highlighted Highlight split changes: if this option is selected, big changes are split into smaller changes. For example, `A \n B` and `A X \n B X` are treated as two changes instead of one. Highlight characters: modified symbols are highlighted Do not highlight: if this option is selected, the differences are not highlighted at all. Use the Do not highlight option when you work with the files that were significantly modified. In such cases, highlighting might introduce additional difficulties during a review.
	Collapse Unchanged Fragments	Collapse all the unchanged fragments in both files. The amount of non-collapsible unchanged lines is configurable on the Diff & Merge settings page. To open the Diff & Merge page, open settings by pressing `Control+Alt+S` and navigate to Tools \| Diff & Merge.
	Synchronize Scrolling	Click this button to scroll both differences panes simultaneously. If this button is released, each of the panes can be scrolled independently.
	Settings	Open a list of available settings. These commands are also available from the context menu of the Differences Viewer gutter.
	Show diff in external tool	Invoke an external differences viewer specified on the External Diff Tools settings page. This button is available only on the toolbar when the Use external diff tool option is enabled on the External Diff Tools settings page.
	Help `F1`	Open a browser and show the corresponding help page.
	Annotate with GitBlame	This option is only available from the context menu of the gutter. Use this option to explore who introduced which changes to the repository version of the file and when. The annotations view lets you see detailed information for each line of code, such as the version from which this line originated, the ID of the user who committed this line, and the commit date. For more information about annotations, refer to VCS annotations.

The most useful shortcuts are the following:

Shortcut	Description
`Control+Shift+D`	Use this keyboard shortcut to show the popup menu of the most commonly used diff commands.
`Control+Shift+Tab`	Use this keyboard shortcut to switch between the left and the right panes.
`Control+Z`/`Control+Shift+Z`	Use this keyboard shortcut to undo/redo a merge operation. Conflicts will be kept in sync with the text.

View changes history for a file or selection

WebStorm allows you to review changes made to files or even fragments of source code. The Show History and the Show History for Selection commands are available from the main VCS menu and from the context menu of files.

The change history for a file is displayed in the dedicated History tab of the Version Control tool window Alt+9.

The change history for a selection of code is displayed in a separate window, in the form of the Differences Viewer.

View file history

Open the file in the editor or select it in the Project tool window and choose <VCS> | Show History from the context menu.

The History tab for the selected file appears in the Version Control tool window Alt+9, the name of the file is shown on the title bar of the tab.

You can use the toolbar buttons to compare the selected revision with the local version, compare classes from the selected revision, checkout the selected revision from your VCS, annotate the selected revision, and so on:

Item	Tooltip and Shortcut	Description
	Refresh	Click this button to refresh the current information.
	Show Diff `Control+D`	Click this button to compare the selected revision of a file with its previous revision in the Differences Viewer.
	Show All Affected Files `Alt+Shift+A`	Click this button to open the Paths Affected in Revision dialog, where you can view all files that were modified in the selected revision.
	Show All Branches	Click this button to display changes from branches other than the current one.
	Presentation Settings	Click to choose the amount of information you want to see in the History view. You can also select the Show Commit Timestamp option if you want WebStorm to show the commit timestamp instead of the time when a change was authored.
	Configure Layout	Click to choose the type of info you want to see: Show Details to display the commit message for the selected revision. Show Diff Preview to open a diff preview for the selected revision.
	Open in GitHub	Click this button to open the page that corresponds to the selected commit on GitHub.

View history for a selection

In the editor, select the necessary fragment of source code or place the caret at the corresponding line.
Choose <VCS> | Show History for Selection from the main VCS menu or from the context menu of the selection.

The history for the selected fragment will open in a separate window. If nothing is selected, the history will be displayed for the current line.

Check file status

WebStorm allows you to check the status of project files relative to the repository. File status shows you which operations have been performed on the file since you last synchronized with the repository.

You can check the status of a file in any interface element (for example, the editor or a tool window) by the color used to highlight the filename.

You can customize the default colors for file statuses in Colors and Fonts settings page.

You can configure VCS file status colors on the Version Control | File Status Colors page of the IDE settings Control+Alt+S.

The table below lists default file status colors and their meanings in some of the color schemes.

Color	File Status	Description
#0A7700	Added	The file in the active changelist is scheduled for addition to the repository.
#0EAA00	Added in not active changelist	The file in an inactive changelist is scheduled for addition to the repository. This file status is available if the Highlight files from non-active changelists option is enabled in Settings \| Version Control \| Changelists.
#FF0000	Changelist conflict	The file in an inactive changelist has been modified in the active changelist. In this case, a new dialog will open, prompting you to resolve the changelist conflict. This file status is available if all options are enabled in Settings \| Version Control \| Changelists.
#0A7700	Copied	If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.
#616161	Deleted	The file is scheduled for deletion from the repository.
#773895	Deleted from file system	The file has been deleted locally but hasn't been scheduled for deletion, and it still exists in the repository.
#8AA4C8	Have changed descendants	If a file is modified, the IDE will recursively highlight all directories containing that file. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings \| Version Control \| Confirmation.
#3264B4	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings \| Version Control \| Confirmation.
#B28C00	Hijacked	[Perforce, ClearCase, VSS] The file is modified without checkout.
#727238	Ignored	A file is intentionally untracked by VCS.
#7503DC	Merged	The file is merged by your VCS as a result of an update.
#FF0000	Merged with conflicts	During the last update, the file has been merged with conflicts.
#FF0000	Merged with property conflicts	During the last update, the IDE has detected differences between the properties of the local file and its server version.
#FF0000	Merged with text and property conflicts	Text and property conflicts happen when two or more developers modify the same lines of a file and the same file properties.
#0032A0	Modified	The file has changed since the last synchronization.
#0047E4	Modified in not active changelist	The file in an inactive changelist has been modified. This file status is available if the Highlight files from non-active changelists option is enabled in Settings \| Version Control \| Changelists.
#7C7C00	Obsolete	The file should no longer be in your working copy of the repository.
#007C7C	Renamed	Since the last update, the file has been renamed.
#08978F	Switched	[SVN] The file is taken from a different branch than the whole project.
#993300	(Unknown) Unversioned	The file exists locally but is not in the repository and is not scheduled for addition.
None (default color)	Up to date	The file hasn't been changed.

Color	File Status	Description
#629755	Added	The file in the active changelist is scheduled for addition to the repository.
#629755	Added in not active changelist	The file in an inactive changelist is scheduled for addition to the repository. This file status is available if the Highlight files from non-active changelists option is enabled in Settings \| Version Control \| Changelists.
#D5756C	Changelist conflict	The file in an inactive changelist has been modified in the active changelist. In this case, a new dialog will open, prompting you to resolve the changelist conflict. This file status is available if all options are enabled in Settings \| Version Control \| Changelists.
#0A7700	Copied	If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.
#6C6C6C	Deleted	The file is scheduled for deletion from the repository.
#6C6C6C	Deleted from file system	The file has been deleted locally but hasn't been scheduled for deletion, and it still exists in the repository.
#6897BB	Have changed descendants	If a file is modified, the IDE will recursively highlight all directories containing that file. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings \| Version Control \| Confirmation.
#6897BB	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings \| Version Control \| Confirmation.
None (default color)	Hijacked	[Perforce, ClearCase, VSS] The file is modified without checkout.
#848504	Ignored	A file is intentionally untracked by VCS.
#9876AA	Merged	The file is merged by your VCS as a result of an update.
#D5756C	Merged with conflicts	During the last update, the file has been merged with conflicts.
#D5756C	Merged with property conflicts	During the last update, the IDE has detected differences between the properties of the local file and its server version.
#D5756C	Merged with text and property conflicts	Text and property conflicts happen when two or more developers modify the same lines of a file and the same file properties.
#6897BB	Modified	The file has changed since the last synchronization.
#6897BB	Modified in not active changelist	The file in an inactive changelist has been modified. This file status is available if the Highlight files from non-active changelists option is enabled in Settings \| Version Control \| Changelists.
None (default color)	Obsolete	The file should no longer be in your working copy of the repository.
#3A8484	Renamed	Since the last update, the file has been renamed.
None (default color)	Switched	[SVN] The file is taken from a different branch than the whole project.
#D1675A	(Unknown) Unversioned	The file exists locally but is not in the repository and is not scheduled for addition.
None (default color)	Up to date	The file hasn't been changed.

Color	File Status	Description
#62CC47	Added	The file in the active changelist is scheduled for addition to the repository.
#62CC47	Added in not active changelist	The file in an inactive changelist is scheduled for addition to the repository. This file status is available if the Highlight files from non-active changelists option is enabled in Settings \| Version Control \| Changelists.
#FF6666	Changelist conflict	The file in an inactive changelist has been modified in the active changelist. In this case, a new dialog will open, prompting you to resolve the changelist conflict. This file status is available if all options are enabled in Settings \| Version Control \| Changelists.
#62CC47	Copied	If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.
#ED864A	Deleted	The file is scheduled for deletion from the repository.
#ED864A	Deleted from file system	The file has been deleted locally but hasn't been scheduled for deletion, and it still exists in the repository.
#4FF0FF	Have changed descendants	If a file is modified, the IDE will recursively highlight all directories containing that file. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings \| Version Control \| Confirmation.
#4FF0FF	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Highlight directories that contain modified files in the Project tree option is enabled in Settings \| Version Control \| Confirmation.
None (default color)	Hijacked	[Perforce, ClearCase, VSS] The file is modified without checkout.
#A9B837	Ignored	A file is intentionally untracked by VCS.
#ED94FF	Merged	The file is merged by your VCS as a result of an update.
#FF6666	Merged with conflicts	During the last update, the file has been merged with conflicts.
#FF6666	Merged with property conflicts	During the last update, the IDE has detected differences between the properties of the local file and its server version.
#FF6666	Merged with text and property conflicts	Text and property conflicts happen when two or more developers modify the same lines of a file and the same file properties.
#4FF0FF	Modified	The file has changed since the last synchronization.
#4FF0FF	Modified in not active changelist	The file in an inactive changelist has been modified. This file status is available if the Highlight files from non-active changelists option is enabled in Settings \| Version Control \| Changelists.
None (default color)	Obsolete	The file should no longer be in your working copy of the repository.
#4FF0FF	Renamed	Since the last update, the file has been renamed.
None (default color)	Switched	[SVN] The file is taken from a different branch than the whole project.
D1675A	(Unknown) Unversioned	The file exists locally but is not in the repository and is not scheduled for addition.
None (default color)	Up to date	The file hasn't been changed.

VCS annotations

What are VCS annotations?

Annotation is a form of file presentation that shows detailed information for each line of code. In particular, for each line, you can see the version from which this line originated, the user ID of the person who committed this line, and the commit date. The annotated view helps you find out who did what and when and trace back the changes.

Annotating lines of code is available for ClearCase, Mercurial, Git, Perforce, and Subversion.

The Annotate command is available from VCS-specific nodes of the Version Control menu, the context menu of the Editor gutter, file context menus, and the file history view.

When annotations are enabled, the gutter looks similar to the following example:

Annotations for lines modified in the current revision are marked with bold type and an asterisk.

Enable annotations

Right-click the gutter in the editor or in the Differences Viewer and select Annotate with Git Blame from the context menu.
You can assign a custom shortcut to the Annotate command: go to the Keymap page of the IDE settings Control+Alt+S and look for Version Control Systems | Git | Annotate.
To close annotations, right-click the gutter in the editor or in the Differences Viewer and select Close Annotations from the context menu.

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 Control+Alt+S to open the IDE settings and then 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 previous revisions

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. To do this, right-click this change and select Annotate Revision from the context menu.
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. To do this, right-click a change and select Annotate Previous Revision from the context menu.

You can also annotate a particular file from the file 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.

View the differences between revisions

To review the differences between the annotated version of a file and its previous version, place the caret at the annotation, right-click it, and select Show Diff. WebStorm opens the Differences viewer for files:

You can also call the VCS Operations Popup Alt+` and select Annotated Line | Show Diff.

Navigate to log

If you are using Git for version control, you can also jump from the annotations view to the corresponding commit in the Log tab of the Version Control tool window Alt+9.

To do this, place the caret at the annotation, right-click it, and select Select in Git log from the context menu. You can also use the Copy revision number command to locate a revision in the log.

For projects hosted on https://github.com/, the Open on GitHub command is also available that takes you to the corresponding commit.

Last modified: 05 September 2023