WebStorm 9.0.0 Web Help

Besides navigating through your local changes within a file in the editor, you can view and examine these changes compared to the base revision of the file.

This functionality is provided through a dedicated Change Details pane in the Local tab of the Changes tool window.

change_details_pane.png

The pane consists of two areas:
  • Area (1) shows the affected code as it was in the base revision.
  • Area (2) shows the affected code as it is after the change is introduced.
The pane can be split horizontally or vertically.

In each area, WebStorm numbers both changes themselves (4) and the lines (3) affected by them. The changes introduced to the code are color-coded:

  • lineChangededMarker.png line changed (5).
  • lineAddedMarker.png line added (6).
  • lineDeletedMarker.png line deleted (7).

A special toolbar (8) enables you to perform the following operations:

In this section:

To open the dedicated change details pane
  1. Open the Changes tool window (Alt+9), and then switch to the Local tab.
  2. Click the Change Details toggle button changes_tol_window_change_details_icon.png on the toolbar. The Change Details pane opens.

    Note

    The Change Details toggle button changes_tol_window_change_details_icon.png remains pressed until the pane is closed.

To examine details of changes in a file
  1. Open the Changes tool window (Alt+9), and then switch to the Local tab.
  2. Select the file in question, and then open the Change Details pane, if it is not opened. The base revision and the local version of the selected file are opened with the differences numbered and highlighted.
  3. Examine the details of each change:
    • To move to the next updated piece of code, click the Next Change button  arrowDown.png.
    • To return to the previous updated code fragment, click the Previous Change button arrowUp.png.
    • To expand or narrow the context of an updated code fragment, position the cursor at the change in question, click the More/Less Lines button  expandAll.png, and then specify the number of lines to be shown above and below the current code fragment.
To configure the appearance of the change details pane
  1. Click the Settings button projectToolWindowSettingsIcon.png on the toolbar of the pane.
  2. On the context menu, that opens, specify how you want the pane split:
    • To have the pane split horizontally, so the base revision is shown in the upper part and the locally updated version is shown in the bottom part of the pane, select the Top/Bottom option.
    • To have the pane split vertically, so so the base revision is shown in the left-hand part and the locally updated version is shown in the right-hand part of the pane, select the Left/Right option.
  3. To have the soft wraps (or word wraps) used, select the Use soft wraps option.
To close the change details pane
  • Click the pressed Change Details toggle button changes_tol_window_change_details_icon.png on the toolbar.

See Also

Reference:

Version Control:

Web Resources: