WebStorm 2021.1 Help

Getting started with Code With Me

With WebStorm, you can use the Code With Me bundled plugin that enables you to share your locally running project with anyone.

You can use Code With Me for real time collaboration, editing code, sharing a server, and running a debugging session.

A Code With Me shared session involves the interaction between a host and one or more guests.

You can start a session with one of the following basic scenarios:

  • You can do pair-programming, in this case you share your IDE with a single participant and either use the Full sync mode, or follow each other and collaborate on different parts of code. Unlike classic pair-programming where developers share a single screen and a keyboard, you can work independently and achieve the goal faster.

  • You can have a teacher-students scenario where you have many participants who follow you. Let's say you need to explain a problem and show your team members different parts of your project. You can achieve that with the Force Others to Follow You mode.

  • You can do simultaneous multi editing of your code with other participants. In this case, participants can quickly change the code and even work on other files of the project at the same time. However, there is a limitation on how many participants can actively type together. The limit is 5, and if it's reached, WebStorm will display a popup suggesting to wait. Additionally, it might slow down the performance.

You can watch a short video tutorial on how to start working with Code With Me.

Get started as a host

You can create a link to invite other participants to collaborate on your code using your computer as the host. You can also start a debugging session, share its state and actions.

Create a session

  1. Make sure the Code With Me plugin is enabled on the Settings/Preferences | Plugins page, tab Installed, see Managing plugins for details.

  2. On the main toolbar, click the Code With Me icon.

    Alternatively, from the main menu, select Tools | Code With Me.

  3. In the list that opens, click Enable Access and Copy Invitation Link.

    Enable Code With Me Access
  4. In the Code With Me: Enable Access and Start Session dialog, configure the access permissions for your guests and click Enable Access.

    Enable Code With Me Access dialog

    WebStorm creates a link that you can send to guests you want to invite to collaborate.

  5. Send the link to guests. When a guest clicks the link, WebStorm displays a popup suggesting either to accept or decline the guest.

    Accept Guest
  6. Click Accept. The guest joins your session and you can start collaborating. You will see an additional caret at your editor and an icon on the main toolbar indicating the active guest.

Terminate an active session

  1. On the main toolbar, click the Code With Me icon (the Code With Me icon).

  2. From the list that opens, select Turn Access Off and Disconnect All.

    Turn Off Access

    WebStorm terminates the session and disables all the guests. The link also gets disabled, and you need to create a new one to start another session.

Join another IDE as a participant

  1. On the main toolbar, click the Code With Me icon and choose Join Another IDE as Participant.

    Join another IDE
  2. WebStorm downloads the Code With Me Client showing you a notification.

    Downloading client

    After the download is completed, wait for the Host to approve your access.

    Waiting for the Host to approve

    After you are accepted, you can join the shared session on the other IDE.

Permissions

You as a host can configure what new guests may or may not access on you machine. For example, specify whether the guests can edit files, use the terminal, and execute code. You can also enable or disable the voice call option. The permissions can be configured for the whole session or for specific guests in the session.

Add permissions

  1. On the main toolbar, click the Code With Me icon and select Permissions and Security.

    Open Permissions dialog

    When you create a session, the dialog with permissions options is opened automatically.

  2. In the Code With Me: Enable Access and Start Session dialog, specify the following options:

    • Read-only: select this permission for guests to have a view-only access for files, terminal, and run actions.

      Read only permissions

    • Edit files: select this permission if you want your guests to only edit files, but not to access the terminal, or execute code.

      Edit files permissions

      You can exclude some files from accessing.

      Click Manage hidden files under the Files field and in the Excluded Files dialog add files that you want to exclude from access and click OK.

      Excluded files

    • Full access: select this permission to give your guests full access to all files, terminal, and run actions on your machine.

      Full access permissions

    • Custom: select this permission to customize access for guests to files, terminal, and run actions.

      Custom permissions

  3. The Automatically start voice call option is enabled by default, disable it to deactivate voice calls in the session.

  4. After you configured permissions, click Enable Access if you are in a process of creating a session. If you edit the permissions, click Apply.

Audio and video calls

When you collaborate with your peers, you can chat, use audio and video calls in the session.

Voice calls are available automatically when your create a session. However, you can disable them in the Edit Permissions dialog.

During the session, you can manage the voice calls.

Manage voice calls

  • On the main toolbar, control the microphone or leave the call by clicking the appropriate icons next to the Call option. Handle the voice call from the Main toolbar

  • Click the More button to select the following options when you handle the calls:

    • Enable camera: use this option to enable the camera.

    • Sound Settings: use this option to open the Code With Me tool window to manage your sound settings.

    • Open Call tool window: use this option to open the Code With Me tool window where you can manage the calls, sound, and use the session chat.

You can access the Code With Me tool window from the right side toolbar and use it to manage the call session as an alternative to the main toolbar. You can use chat, mute or unmute the microphone for your audio, manage the camera, and so on.

Code With Me tool window

Get started as a guest

As a guest, you can follow a host during the created session and edit the code on which the host is working. You can also follow other session participants and get access to other parts of the project. Moreover, you can run and debug code on the host's machine, and work in the terminal tool window.

Accept an invitation

  1. Click the received link.

  2. The WebStorm lightweight client application will be downloaded at the run time.

    You don't need to have WebStorm installed for the lightweight version to work.

  3. Once it is installed, WebStorm displays a notification suggesting that you wait until the host accepts your request to join the session. When you are accepted, you are able to join the session. When the host’s project gets opened, you will see the active file in the editor.

    At this point, you can customize the guest IDE to make your working process more convenient. You can change themes, view modes, and so on. The changes you make will only affect your guest IDE.

Leave a session

  1. On the main toolbar, click the Code With Me icon.

  2. From the list that opens, select Disconnect and Close Project.

    Disconnect and close the project

    The session is terminated and the Code With Me welcome screen is displayed. You can quickly return to the same session without any accepting process from the host using the same link.

    WebStorm Client welcome screen

Guest Code With Me setup locations

After you set up your work with Code With Me as a guest, you can check the following locations to see where the Code With Me distribution, logs, settings, and caches are located in your file system:

  • The Code With Me logs

    ~/Library/Logs/JetBrains/CodeWithMeGuest<plugin_version>

    %LOCALAPPDATA%\Logs\JetBrains\CodeWithMeGuest<plugin_version>

    ~/.local/share/Logs/JetBrains/CodeWithMeGuest<plugin_version>

  • The Code With Me caches

    ~/Library/Caches/JetBrains/CodeWithMeGuest<plugin_version>

    %LOCALAPPDATA%\Caches\JetBrains\CodeWithMeGuest<plugin_version>

    ~/.local/share/Caches/JetBrains/CodeWithMeGuest<plugin_version>

  • The Code With Me settings

    ~/Library/Application Support/JetBrains/CodeWithMeGuest<plugin_version>

    %LOCALAPPDATA%\Application Support\JetBrains\CodeWithMeGuest<plugin_version>

    ~/.local/share/Application Support/JetBrains/CodeWithMeGuest<plugin_version>

  • The Code With Me distributions and JetBrains runtime

    ~/Library/Caches/JetBrains/CodeWithMeClientDist

    %LOCALAPPDATA%\Caches\JetBrains\CodeWithMeGuestClientDist

    ~/.local/share/Caches/JetBrains/CodeWithMeGuestClientDist

Work in a shared session

Once a shared session is created and all invited participants are accepted, the editor will contain the additional carets, the main toolbar will display the guests' icons, and the Code With Me tool window with the voice calls and the chat support becomes available.

Joined session: editor and the main toolbar

In a shared session you can try different things such as move around the host's project independently, follow other participants, use the terminal tool window, make code edits, and so on.

Follow a participant

  1. On the main toolbar, click the Code With Me icon.

  2. From the list that opens, select the name of the participant you want to follow and select Follow.

    Follow a participant

    Alternatively, on the main toolbar, click the needed participant's icon.

    WebStorm places your caret at top of the participant's caret and places a frame around the editor with a small label displaying the name of the participant you are following.

    Following other participant

    Click Stop next to the name to unfollow the participant.

    You can have more than one participant following other participants. When one of the followers decides to switch focus, it will not affect the main host. This is helpful in the teacher-students use case.

Force all others to follow you

  1. On the main toolbar, click the Code With Me icon.

  2. From the list that opens, select Force All to Follow You.

    Select Force to Follow You

    In this case, all the guest carets are placed on top of the host, and the focus will switch if the main caret is placed in the other files of the project.

    At any time, a participant can stop following the main caret.

Jump to other participant

  1. On the main toolbar, click the Code With Me icon.

  2. From the list that opens, click a name of the participant and select Jump To.

    Jump to Other Participant

    Alternatively, on the main toolbar, right-click the participant's icon and select the same option.

    The caret is placed on the line where the selected guest's caret is located. This might be helpful if you want to quickly locate a certain participant's caret.

Use the full sync mode

  1. On the main toolbar, click the Code With Me icon.

  2. From the list that opens, choose the name of a participant and select Full sync mode.

    Select Full Sync Mode

    Alternatively, on the main toolbar, right-click the participant's icon and select the same option.

    The caret is placed on top of the host's caret. WebStorm places a frame around both the host's editor and the guest's editor indicating that the full sync mode is on. The focus stays within the host caret even if the caret is placed in other parts of the project. This mode is usually used in the pair-programming scenario.

Terminate a shared session for a specific user

  1. On the main toolbar, click the Code With Me icon.

  2. From the list that opens, click a name of the participant for whom you want to terminate the session and select Kick user.

    Alternatively, on the main toolbar right-click the participant's icon and select the same option.

    Kick User

    WebStorm terminates the session for the selected participant and displays a notification on the guest's side. WebStorm closes the guest project and returns the guest to the Code With Me welcome screen.

    WebStorm Client welcome screen

    If the guest wants to return to the shared session, they need to wait for the host permission to join.

Collect logs for the current guest

  1. On the Code With Me welcome screen, click the More Options icon next to Settings/Preferences.

  2. From the list that opens, select Collect Logs and Diagnostic Data.

    Collect Logs and Diagnostic Data

    WebStorm creates a log file on your local machine. The log file contains the current project's filenames, parts of code, and detailed information on guest's activity such as caret movements, typed symbols, invoked actions, files opened, file paths, and so on.

Collect all logs in the session

  1. On the main toolbar, click the Code With Me icon.

  2. In the list that opens, click the More button and select Submit Feedback.

  3. In the dialog that opens, click OK to approve the data collection.

    Once the log details are collected, they are automatically attached to the newly created issue in the YouTrack system.

Submit feedback

Change the session name or URL of the session server

You can change the default name of the created session using the Code With Me settings.

You can also change the URL of a lobby server used for a session. It might be useful to switch to your own company's server for security purposes.

Access the Code With Me settings

  1. Press Ctrl+Alt+S to open IDE settings and select Tools | Code With Me.

  2. In the User name field enter a new name for your session. The session name will be changed on the restart. Clicking Use System Name will reset the session name to the default one.

    You can change the default server URL, in the Lobby server URL field.

  3. Click OK to save the changes.

Last modified: 06 August 2021