Viewing Details of Changes
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.
- 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.
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:
- line changed (5).
- line added (6).
- line deleted (7).
A special toolbar (8) enables you to perform the following operations:
- Navigate between changes using the Next Change and Previous Change buttons.
- Expand or narrow the context of a change using the More/Less Lines button .
- Configure the appearance of the pane using the Settings button .
In this section:
- Opening the dedicated Changes Details pane
- Examining details of changes in a file
- Configuring the appearance of the pane
- Closing the Change Details pane
To open the dedicated change details pane
- Open the Version Control tool window (Alt+9), and then switch to the Local Changes tab.
- Click the Change Details toggle button on the toolbar. The Change Details pane opens.
Note that rhe Change Details toggle button remains pressed until the pane is closed.
To examine details of changes in a file
- Open the Version Control tool window (Alt+9), and then switch to the Local tab.
- 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.
Examine the details of each change:
- To move to the next updated piece of code, click the Next Change button .
- To return to the previous updated code fragment, click the Previous Change button .
- 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 , 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
- Click the Settings button on the toolbar of the pane.
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.
- 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 on the toolbar.