WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Version control
  2. Review changes

Review changes

Last modified: 05 September 2023

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 Alt09 (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 Alt09.

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:

  • marker for a newly added line line added.

  • marker for a modified line line changed.

  • marker for a deleted line line deleted.

tip

You can customize the default colors for line statuses on the Editor | Color Scheme | VCS page of the IDE settings CtrlAlt0S.

To disable VCS markers in the gutter, deselect the Highlight modified lines in gutter option on the Version Control | Confirmation page of the IDE settings CtrlAlt0S.

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:

change marker toolbar

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 CtrlAlt0S.

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 App actions diff 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.

Diff preview in the editor

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

the Previous Difference button/the Next Difference button

Previous Difference / Next Difference ShiftF7 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/ShiftF7 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.

the Jump to Source button

Jump to Source

F4

Open the selected file in the editor. The caret is placed in the same position as in the Differences Viewer.

the Compare Previous File icon

the Compare Next File icon

Compare Previous/Next File

Alt0←Alt0→

Compare the local copy of the previous or next file with its update from the server.

note

These controls are only available if more than one file has been modified locally.

the Go To Changed File icon

Go To Changed File Ctrl0N

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.

the Collapse Unchanged Fragments icon

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 CtrlAlt0S and navigate to Tools | Diff & Merge.

the Synchronize button

Synchronize Scrolling

Click this button to scroll both differences panes simultaneously. If this button is released, each of the panes can be scrolled independently.

the Settings button

Settings

Open a list of available settings.

These commands are also available from the context menu of the Differences Viewer gutter.

the External Tools icon

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.

the Help icon

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

CtrlShift0D

Use this keyboard shortcut to show the popup menu of the most commonly used diff commands.

CtrlShiftTab

Use this keyboard shortcut to switch between the left and the right panes.

Ctrl0Z/CtrlShift0Z

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 Alt09.

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 Alt09, 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

the Refresh button

Refresh

Click this button to refresh the current information.

the Show diff icon

Show Diff

Ctrl0D

Click this button to compare the selected revision of a file with its previous revision in the Differences Viewer.

the Show All Affected Files button

Show All Affected Files

AltShift0A

Click this button to open the Paths Affected in Revision dialog, where you can view all files that were modified in the selected revision.

the Show All Branches button

Show All Branches

Click this button to display changes from branches other than the current one.

the Eye icon

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.

the Configure Layout icon

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.

the Open on GitHub button

Open in GitHub

Click this button to open the page that corresponds to the selected commit on GitHub.

View history for a selection

  1. In the editor, select the necessary fragment of source code or place the caret at the corresponding line.

  2. 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 CtrlAlt0S.

tip

To also highlight folders with modified contents, select Highlight directories that contain modified files in the Project tree on the Version Control | Confirmation page of the IDE settings CtrlAlt0S.

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

Color

File Status

Description

Color sample: dark green #0A7700

Added

The file in the active changelist is scheduled for addition to the repository.

Color sample: green #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.

Color sample: red #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.

Color sample: dark green #0A7700

Copied

If a file is a copy of another file, its metadata is tracked, and such a file is marked as copied.

Color sample: grey #616161

Deleted

The file is scheduled for deletion from the repository.

Color sample: dull purple #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.

Color sample: light grayish blue #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.

Color sample: bright blue #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.

Color sample: light brown #B28C00

Hijacked

[Perforce, ClearCase, VSS] The file is modified without checkout.

Color sample: dark olive #727238

Ignored

A file is intentionally untracked by VCS.

Color sample: purple #7503DC

Merged

The file is merged by your VCS as a result of an update.

Color sample: red #FF0000

Merged with conflicts

During the last update, the file has been merged with conflicts.

Color sample: red #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.

Color sample: red #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.

Color sample: bright navy #0032A0

Modified

The file has changed since the last synchronization.

Color sample: blue #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.

Color sample: Olive #7C7C00

Obsolete

The file should no longer be in your working copy of the repository.

Color sample: teal #007C7C

Renamed

Since the last update, the file has been renamed.

Color sample: dark cyan #08978F

Switched

[SVN] The file is taken from a different branch than the whole project.

Color sample: brown #993300

(Unknown) Unversioned

The file exists locally but is not in the repository and is not scheduled for addition.

Color sample: black None (default color)

Up to date

The file hasn't been changed.

tip

This chapter is about VCS file status colors. If you need to set colors for distinguishing project files of specific scopes, refer to this page.

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

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 CtrlAlt0S 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 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

  1. Press CtrlAlt0S to open the IDE settings and then select Appearance & Behavior | System Settings | Date Formats.

  2. 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:

WebStorm: differences viewer

You can also call the VCS Operations Popup Alt0` 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 Alt09.

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.

See also

Procedures

Reference

Concepts