Enabling the next level of Remote Debugging & Real-Time Code Collaboration with Visual Studio Code

I have been working from home for months as an impact of the COVID-19 pandemic. For the first weeks of lacking in-person communication, I found difficulty working with my fellows especially when it required debugging & troubleshooting their code, a part of my daily job as a technical leader of a team I’m working with.

In this post, I’m going to share with you one of my favorite Visual Studio Code extensions that have enabled me to work efficiently during this crisis.

Visual Studio Live Share

Visual Studio Live Share (VS Live Share) is a real-time collaborative development solution developed by Microsoft specifically for Visual Studio and Visual Studio Code.

Visual Studio Live Share comes natively with Visual Studio 2019 so you can start a real-time collaboration session using this IDE without doing any additional installation, just simply click on the “Live Share” button located on the top right corner of the IDE to start one.

However, Visual Studio Code users will need to install a special extension called “Live Share” in order to enable the real-time collaborative development capability for their Visual Studio Code.

Setting up a real-time code collaboration session with Visual Studio Live Share is “a piece of cake”. Other than having the Live Share extension installed, all it requires to start a collaboration session is an account, can be either Microsoft or GitHub. Once logged in, VS Code will create a link that can be shared with others to participate in your collaboration session.

The capacity of a collaboration session depends on what tool is used to create it. As of the time of writing, a collaboration session can be shared with up to 5 people for Visual Studio and 30 people for Visual Studio Code. Clearly, the difference here depends on how the complexity of the tool you are using.

To join a collaboration session, Visual Studio Live Share does not require a login. However, joining as a guest only gives you read-only access. To be able to edit or debug, you would need to log in using your Microsoft or GitHub account.

The host of a collaboration session reserves the right to accept who can join as well as what participants can do during the session such as remotely start the debugger, remotely access terminal.

Efficiently Remote Debugging

VS Live Share not only gives you the ability of co-editing code, but it also provides an efficient way to co-debug an application.

A struggle that I often run into when supporting my team members to troubleshoot their problems is how to properly reproduce their issues. Even having a clean step by step reproduction guidance, many problems were environment-specific and challenging to reproduce in other environments.

VS Live Share is capable of attaching Visual Studio to a debugger remotely. It can follow the current debugging line in real-time as well as track every single breakpoint created on both sides.

Another use case that I’m utilizing VS Live Share is UAT testing. During the process of reviewing deliverables, I usually ask my team members for a demonstration. I like to test their deliverables by myself instead of just relying on what they’re showing in their demonstration to make sure their deliverables meet the requirements as well as cover edge cases. However, setting up a runtime environment in my own machine for that such thing is not what I’m looking for.

There is a feature called “Share server / Share port” that allows us to attach Visual Studio to a running server remotely. Once shared, VS Live Share maps the application’s local port on the remote machine to the exact same port on your machine. Therefore, you can then interact with the application exactly as if it was running locally on your machine.

Securely Enabling Real-Time Code Collaboration

Giving participants full read/write access to your source code may raise concerns in terms of security. Many applications store sensitive configuration data like database connection string, service principal credentials as a file. Those kinds of data may be seen by the participants without your knowledge.

To limit what the participants can see during a collaboration session, you can add a .vsls.json file to the folder or project you are sharing. This JSON formatted file controls how Live Share processes files during a collaboration session.

The following code snippet shows an example of the .vsls.json file:

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore":"none",
    "excludeFiles": [
        "*.pem",
        "*.cer"
    ],
    "hideFiles": [
        "bin",
        ".azure"
    ]
}

Excluding files from being shared does not sacrifice on the functionality of VS Live Share. If participants wanted to access excluded files during debugging sessions, they would simply require access to these files.

The .vsls.json files can be placed in sub-folders just like .gitignore. More details about the .vsls.json file schema can be found here.

Real-Time Collaboration using Web Browsers

All Live Share collaboration sessions can be joined from a web browser. This is especially cool for those who need a quick troubleshooting session or temporarily inaccessible to the desktop clients.

This capability is powered by Visual Studio Codespaces aka Visual Studio Online. Once joined using a web browser, there will be a Visual Studio Codespaces instance spun up to enable the collaboration with almost full collaboration experience just as if you were collaborating from the desktop clients.

There are plenty of programming languages that are currently supported by Visual Studio Live Share. Technically you can use VS Live Share for co-editing all programming languages. However, there are limitations when using some advanced features like co-debugging.

VS Live Share is available for all Visual Studio users at no cost. Let’s give a try and share your thoughts in the comment section below.

Stay Safe!