How To Launch Chrome On Visual Studio Code

There are many reasons you might need to launch Chrome on Visual Studio Code. You might need it to run an HTML, CSS, SASS, or JavaScript file. This guide will demonstrate the process of running a simple HTML file in Chrome using VS Code.

Downloads

Download and install Google Chrome from google.com/chrome with default settings.

How To run HTML file in Chrome using VS Code?

Step 1: Install Live Server

Live Server is an extension that allows you to run HTML code as a web application running on your localhost web server directly from your machine. It also reloads your page automatically every time you save the file. Follow these steps to install Live Server:

  1. From the sidebar, select the Extensions button.
  2. Type “Live Server” in the search box and click on the Install button.

    Live Server
    Install Live Server from the Visual Studio Code Marketplace.

Step 2: Default Browser Setting

By default, Live Server opens the default browser of the machine. If you want to specify custom browser settings for Live Server, follow these steps:

  1. From the sidebar, click on the Manage button. Then, select the Settings option from the menu. Alternatively, you can press Ctrl +,

    Settings
    From the Manage tab, click on the Settings option.
  2. In the “Search Settings” bar, type Live Server.

    Search Live Server
    Search “Live Server” in the Search Settings bar.
  3. From the Custom Browser option, select the browser you want for the Live Server – we’ll select “chrome” for this guide.

    Custom Browser
    Choose your preferred browser from the Custom Browser settings.

Step 3: Running the HTML File

To run an HTML file in Chrome using VS Code, follow these steps:

  1. Open the existing HTML file you want to run in VS Code. In my case, I have opened a demo HTML file named “index.html.”

    HTML File
    Open your HTML file.
  2. From the Status bar on the bottom-right corner of VS Code, click on the Go Live button.

    Go Live
    Click on the Go Live button.
  3. The browser will open the webpage with the HTML structure.

    HTML Output
    This is our output being presented in the Chrome.

There it is! This is the process to launch Chrome on Visual Studio Code using Live Server extension. Make sure to follow the same process to launch Chrome for other programs like JavaScript, SASS, or CSS file.

Was this article helpful?

Leave a Comment