Integrate Visual Studio Code

Test your in-development websites on Live as you develop them in Visual Studio Code.

Visual Studio Code (VS Code) is a commonly used Integrated Development Environment (IDE). You can seamlessly integrate VS Code with Live using the BrowserStack extension. With this integration, you can launch a Live test session directly from VS Code and test your in-development websites on Live.

Integrating Live with Visual Studio Code involves the following steps:

1. Install the BrowserStack extension.
2. Sign in to BrowserStack.
3. Launch a Live session from VS Code.

Prerequisites

Before you begin, ensure the following:

• You have a paid BrowserStack account. If you do not have a BrowserStack account, you can sign up for free and purchase a plan.
• You have VS Code 1.7 or later installed.

Install the BrowserStack extension

To install the BrowserStack extension, follow these steps:

1. Open VS Code.
2. Open the Extensions panel. You can use the following shortcuts to open the Extensions panel:
   • Windows or Linux: Ctrl + Shift+ X
   • macOS: Cmd + Shift + X
3. Search for the BrowserStack extension. Then, click the BrowserStack extension from the search results.

4. Click Install.

   After the installation, you can see the BrowserStack icon on the Activity Bar of VS Code.

You have now installed the BrowserStack extension. Alternatively, you can download the extension from the VS Code Marketplace.

Sign in to BrowserStack

To sign in to BrowserStack, follow these steps in VS Code:

1. In the Activity Bar, click the BrowserStack icon.
   
2. Click Sign in.
3. On the confirmation prompt, click Open. You are redirected to the BrowserStack sign-in page.
4. Sign in to your BrowserStack account. After you sign in to BrowserStack, you are taken to the Live dashboard. On the Live dashboard, a confirmation message to open VS Code is displayed.
5. On the confirmation message, select the Always allow live.browserstack.com to open links of this type in the associated app checkbox. Then, click Open Visual Studio Code. On the confirmation message, click Open.

You have now integrated VS Code with Live.

BrowserStack pane overview

On the BrowserStack pane in VS Code, you can see the following sections:

1. PUBLIC OR LOCALLY HOSTED WEBSITE URL: Enter the URL of the website you want to test. It can be a publicly-hosted website or a locally-hosted website (for example, localhost). To test a local website, ensure that Local Testing is enabled and the local website is hosted on a server.
2. QUICK LAUNCH DEVICES: This section lists the devices that are in your Quick Launch list. To edit the device-browser combinations in this section, you can click the edit icon. You are taken to the Quick Launch pane on the Live dashboard.
   For steps to edit the Quick Launch combinations, refer to Add browsers or device-browser combinations to Quick Launch.
3. TRENDING DEVICES: This section lists the frequently used devices on Live.
4. OTHER: This section lists the links to the documentation and support. You can click Logout to sign out from BrowserStack.

Launch a Live session with your test website

To launch a Live session, in the QUICK LAUNCH DEVICES section or TRENDING DEVICES section, click the start icon beside the device-browser combination or device you want to test with. If a confirmation message is displayed, click Open.

A Live test session is launched with the selected combination.

You can now proceed with testing your website in the Live session.

Make further changes and test updates

When you make any further changes to your website code, the website running in the Live test session reloads and the changes are reflected in the Live test session automatically.

In the following video, we demonstrate how the changes you make in VS Code are reflected in the Live test session: