Viewing Changes Information
This sections explains different ways to keep track of the changes that you and your teammates introduce to the source code.
Reviewing project history
WebStorm allows you to review all changes made to the project sources that match the specified filters.
Tracking 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 left 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:
When you delete a line, the following marker appears in the left gutter: .
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, in the Settings/Preferences dialog (Ctrl+Alt+S) select Editor | General on the left, and uncheck the Highlight modified lines in gutter option.
Comparing 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 in question.
You can review changes in one of the following ways:
Preview changes in the Local Changes view: select a file and click the Preview Diff button 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:
Tooltip and Shortcut
Previous Difference / Next Difference Shift+F7 F7
|Use these buttons to jump to the next/previous difference. |
When the last/first difference is hit, 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 Version Control tool window.
Jump to Source
Click this button to open the selected file in the active pane in the editor. The caret will be placed in the same position as in the Differences Viewer.
Compare Previous/Next File
|Click these buttons to compare the local copy of the previous/next file with its update from the server.|
Go To Changed File Ctrl+N
Click this button to display all changed files in a current change set (and navigate to them).
| Use this drop-down list to choose the desired viewer type. The side-by-side viewer has two panels; the unified viewer has one panel only. |
Both types of viewers enable you to
|Use this drop-down list to define how the differences viewer should treat white spaces in the text. |
|Select the way differences granularity is highlighted. |
The available options are:
Collapse unchanged fragments
Click this button to collapse all unchanged fragments in both files. The amount of non-collapsible unchanged lines is configurable in the Diff & Merge settings page.
Click this button to simultaneously scroll both differences panes; if this button is released, each of the panes can be scrolled independently.
|Click this button to invoke the list of available settings. Select or clear these options to show or hide whitespaces, line numbers and indent guides, to use or disable the use of soft wraps, and to set the highlighting level. |
These commands are also available from the context menu of the differences viewer gutter.
Show diff in external tool
|Click this button to invoke an external differences viewer, specified in the External Diff Tools settings page. |
This button only appears on the toolbar when the Use external diff tool option is enabled in the External Diff Tools settings page.
Click this button to show the corresponding help page.
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 in question, 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 Using annotations
The most useful shortcuts are the following:
Use this keyboard shortcut to show the popup menu of the most commonly used diff commands.
Use this keyboard shortcut to switch between the left and the right panes.
Use this keyboard shortcut to select the position obtained by Ctrl+Tab in the opposite pane.
Use this keyboard shortcut to undo/redo a merge operation. Conflicts will be kept in sync with the text.
Viewing 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 selection of code is displayed in a separate window, in the form of the differences viewer.
View the history for a file
Open a file in the editor or select 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, 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, etc.:
Tooltip and Shortcut
Click this button to refresh the current information.
Click this button to compare the selected revision of a file with its previous revision in the Differences Viewer.
Show All Affected Files
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.
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.
Viewing the History for a Selection
In the editor, select a fragment of the source code.
Choose <VCS> | Show History for Selection from the main menu, or on the context menu of the selection.
The history for the selected fragment will open in a separate window.
Checking 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 in question since you last synchronized with the repository.
You can check the status of a file in any interface element (e.g. the editor, or various tool windows) by the color used to highlight the file name.
Up to date
File is unchanged.
File is scheduled for deletion from the repository.
File has changed since the last synchronization.
File is scheduled for addition to the repository.
File is merged by your VCS as a result of an update.
File exists locally, but is not in the repository, and is not scheduled for adding.
File will be ignored in any VCS operation.
File is modified without checkout. This status is valid for the files under Perforce, ClearCase and VSS. modified without checkout.
Merged with conflicts
During the last update, file was merged with conflicts.
File is deleted locally, but was not scheduled for deletion, and still exists in the CVS repository.
The file is taken from a different branch than the whole project. This status is valid for CVS and SVN.
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, TFS, Mercurial, Git, CVS, Perforce and Subversion.
The Annotate command is available from VCS-specific nodes of the Version Control menu, the context menu of the Editor left gutter, file context menus, and the file history view.
When annotations are enabled, the left gutter looks similar to the following example:
Configuring the amount of information shown in the annotations pane
Enable annotations and right-click the annotations gutter.
- Select View in the context menu and select or deselect the following options:
Revision: select this option if you want to see the number of the changelist within which the annotated changes were checked in.
Date: select this option if you want to see the date when the annotated changes were checked in.
Author: select this option if you want to see the name of the user who checked in the annotated changes.
Commit number: select this option if you want to see the revision number of the current file.
- Colors: use this control to toggle between the following highlighting modes:
Author: select this option if you want to highlight changes made by different authors with different colors.
Order: select this option if you want annotation colors to indicate how long ago a change was made. The entire file history is divided into several time periods containing an equal number of commits, and each time period is assigned its own color. The most recent changes are highlighted in green, while the oldest changes are highlighted in red:
Hide: select this option if you do not want to use color highlighting. In this case, all annotations will be displayed in gray.
- Names: use this control to select how user names will be displayed. The following options are available:
- To view a commit message for an annotated change, hover the mouse cursor over an annotation. A tooltip will appear showing the commit message for the corresponding change:
Annotating previous revisions
WebStorm lets you annotate not only the current file revision, but also it's 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 from the context menu.
Viewing the differences between revisions
To review the differences between the annotated version of a file and its previous version, position the cursor on an annotation, right-click it and select Show Diff from the context menu. WebStorm opens the Differences Viewer for Files:
To review the differences between the annotated version of a file and its previous version, position the cursor on an annotation, right-click it and select Show Diff from the context menu. WebStorm opens the Differences Viewer:
Navigating to log
To do this, position the cursor on an annotation, right-click it and select Select in Git log from the context menu. You can also use the Copy revision number command to located 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.