Review changes

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 (see 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 the mouse cursor 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, rollback 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 Editor | General page of the IDE settings Ctrl+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.

You can review changes in one of the following ways:

• Preview changes in the Local Changes view: select a file and click Preview Diff on the toolbar.

• Explore changes in the Differences Viewer: select a file and press Ctrl+D or 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 changes have been made.

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 first difference is reached, WebStorm suggests to click the arrow buttons F7/ Shift+F7 once more and compare other files, depending on the Go to the next file after reaching last change option in the Differences Viewer settings. This behavior is supported only when the Differences Viewer is invoked from the Commit tool window Alt+0.
	Jump to Source F4	Open the selected file in the active pane in the editor. The caret is placed in the same position as in the Differences Viewer.
	Compare Previous/Next File Alt+LeftAlt+Right	Compare the local copy of the previous or next file with its update from the server.
	Go To Changed File Ctrl+N	Display all the changed files in the current change set and navigate to them. This button is available only when you review changes in multiple files. For example, in the Local Changes view.
Viewers		Select a viewer mode: side-by-side or unified. The side-by-side mode has two panels, the unified mode has one panel. You can edit code and perform Apply, 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 symbols: 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 in the Diff & Merge settings page. To open the Diff & Merge page, open settings by pressing Ctrl+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 details on annotations, refer to VCS annotations.

The most useful shortcuts are the following:

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.

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 Ctrl+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.
	Show Details	Click this button to show the commit message for the selected revision.
	Open in GitHub	Click this button to open the page that corresponds to the selected commit on GitHub.

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 various tool windows) by the color used to highlight the filename.

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

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/Preferences | 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/Preferences | 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 Show directories with changed descendants option is enabled in Settings/Preferences | Version Control.
#3264B4	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences | Version Control.
#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/Preferences | 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/Preferences | 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/Preferences | 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 Show directories with changed descendants option is enabled in Settings/Preferences | Version Control.
#6897BB	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences | Version Control.
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/Preferences | 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/Preferences | 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/Preferences | 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 Show directories with changed descendants option is enabled in Settings/Preferences | Version Control.
#4FF0FF	Have immediate changed children	If a file is modified, the IDE will highlight its parent directory. This status is available if the Show directories with changed descendants option is enabled in Settings/Preferences | Version Control.
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/Preferences | 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.

View the differences between revisions

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

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