Viewing Details of Changes
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.
The pane consists of two areas:
- The affected code as it was in the base revision.
- The affected code as it is after a change has been made.
The changes you introduce to the text are color-coded:
|Item||Tooltip and Shortcut||Description|
|Previous Difference / Next Difference
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.
|Compare Previous/Next File
|Click these buttons to compare the local copy of the previous/next file with its update from the server.|
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.|
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
|Whitespace||Use this drop-down list to define how the differences viewer should treat white spaces in the text.
|Highlighting mode||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.|
|Synchronize scrolling||Click this button to simultaneously scroll both differences panes; if this button is released, each of the panes can be scrolled independently.|
|Editor settings||Click this button to invoke the list of available settings.
Select or clear this 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.|
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 Working with Annotations