WebStorm 2017.2 Help

Comparing Deployed Files and Folders with Their Local Versions

On this page:

Basics

Correspondence between files and folders in your WebStorm project and their versions on a server is set through deployment server mappings. For the sake of simplicity, any file or folder in your WebStorm project is called local and any file or folder on the server is called remote, even if the server is actually installed on your machine. For details, see Configuring Synchronization with a Web Server.

Accessing a server

  1. Open the Remote Host tool window by choosing Tools | Deployment | Browse Remote Host or View | Tool Windows | Remote Host on the main menu.
  2. Select the required deployment server from the drop-down list. The tool window shows a tree view of files and folders under the server root. If no relevant server is available in the list, click browseButton.png, and in the Deployment dialog box that opens configure access to the required server.

Comparing files and folders on the server with their local versions

Each remote file or folder is mapped to one and only one local file or folder. Therefore for each remote file or folder, WebStorm unambiguously detects its local version so you can compare them at any time.

To compare a remote file with its local version

  1. Open the Remote Host tool window (Tools | Deployment | Browse Remote Host or View | Tool Windows | Remote Host) and select the required deployment server from the drop-down list.
  2. Select the file in question, and then choose Compare with local version on the context menu of the selection.
  3. In the Differences Viewer for Files dialog box, that opens, explore the differences and apply them, if necessary, using the /help/img/idea/2017.2/icon_InsertReplace.png and /help/img/idea/2017.2/icon_InsertReplace2.png buttons. For details, see Viewing Differences Between Files.

To compare a remote folder with its local version

  1. Open the Remote Host tool window (Tools | Deployment | Browse Remote Host or View | Tool Windows | Remote Host) and select the required deployment server from the drop-down list.
  2. Select the folder in question and choose Sync with local on the context menu of the selection.
  3. In the Differences Viewer for Folders that opens, explore the differences and synchronize the files, where applicable, as described in Comparing two folders in the Difference Viewer.

Comparing local files and folders with their versions on the server

Because local file or folder can be mapped to an unlimited number of remote counterparts, WebStorm can uniquely identify remote versions of local files or folders only when they are mapped through the default deployment server. If no such default deployment server is appointed, you have to choose the relevant configuration manually.

To compare a local file with its remote version

  1. Select the file in question in the Project tool window.
  2. On the context menu of the selection, choose Deployment | Compare with Deployed Version on <default server access configuration>.
  3. In the Differences Viewer for Files dialog box, that opens, explore the differences and apply them, if necessary, using the /help/img/idea/2017.2/icon_InsertReplace.png and /help/img/idea/2017.2/icon_InsertReplace2.png buttons. For details, see Viewing Differences Between Files.

To compare a local folder with its remote version

  1. Select the folder in question in the Project tool window.
  2. On the context menu of the selection, choose Sync with Deployed to <default deployment server> if a default server is appointed. Otherwise, choose Sync with Deployed to and then choose the relevant server from the list.
  3. In the Differences Viewer for Folders that opens, explore the differences and synchronize the files, where applicable, as described in Comparing two folders in the Difference Viewer.

Comparing and synchronizing two folders in the Difference Viewer

WebStorm provides a dedicated Differences Viewer for Folders for comparing files in remote folders and their local versions against the file size, content, or timestamp. Besides exploring differences, the tool also provides interface for synchronizing the contents of folders.

  • The Item List shows the contents of the local and remote folders. Use the toolbar buttons to narrow down or widen the set of items to show. For example, show or hide files that are present only locally or remotely, equal files, different files, files excluded from synchronization, etc.
  • The contents of the remote folder are always shown in the right-hand pane and the contents of its local version are always shown in the left-hand pane.
  • The contents of the selected file are shown in the lower pane, with the differences being color-highlighted.
  • The remote files in the Difference Viewer have the status read-only. This means that you cannot update them directly in the Difference Viewer. Make all the necessary changes to the local version of the file in question and upload the updated file to the server.

To compare two folders

  1. Specify the parameter for comparison. In the Compare by drop-down list, select one of the possible options (contents, size, or time stamp).
  2. Filter the folders' contents. To do that, type filtering string in the Filter text field, and press Enter to apply it. Using the asterisk * wildcard to represent any number of characters is welcome.
  3. To switch to another pair of folders to compare, update the fully qualified paths to them. Click the Browse button /help/img/idea/2017.2/browseButton.png next to the Paths read-only fields and choose the required folders in the dialog box that opens .
  4. Explore the detected differences between files in the Differences Pane.
    Comparing folders

To synchronize the contents of two folders

  1. For each pair of items, in the * field specifies the action to apply. Click the icon in the field until the required action is set.
    • /help/img/idea/2017.2/arrow_right.png the file will be uploaded, possibly overwriting the remote version.
    • /help/img/idea/2017.2/arrow_left.png the file will be downloaded, possibly overwriting the local version.
    • /help/img/idea/2017.2/equal.png the files are treated identical with regard to the selected criterion of comparison. No action will be performed by default.
    • /help/img/idea/2017.2/not_equal.png the files differ with regard to the selected criterion of comparison. No action will be performed by default. Explore the differences in the Differences Pane of the Difference Viewer and change the intended action by clicking the icon.

      The remote files in the Difference Viewer have the status read-only. This means that you cannot update them directly in the Difference Viewer. Make all the necessary changes to the local version of the file in question and upload the updated file to the server.

    • /help/img/idea/2017.2/close.png the file is present only locally or remotely and will be removed.
  2. Do one of the following:
    • To synchronize the currently selected item, click the Synchronize Selected button debug_resume.gif on the toolbar.
    • To synchronize all the items, click the Synchronize All button rerun.png on the toolbar.

See Also

Last modified: 10 August 2017