A real browser preview inside your editor that you can debug.

• Visual Studio Code Website Tutorial
• Visual Studio Code Website Tutorial
• Visual Studio Code Website Development
• Visual Studio Code For Website
• Visual Studio Code Website Design

Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by headless Chromium, and works by starting a headless Chromium instance in a new process. This can either be Google Chrome or Microsoft Edge. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!

Getting started

This setup guide is intended for people starting up web development and some of the best tips & tricks when working with Visual Studio Code in 2020. Nowadays, you have quite a few options for text editors and IDEs, but the most established and still gaining steam is Visual Studio Code, followed by WebStorm and Sublime Text.

Browser preview inside VS Code (Powered by headless Chromium). Ability to have multiple previews open at the same time. Launch urls and attach Debugger for Chrome to the browser view instance, and debug within VS Code. Attach Chrome DevTools via chrome://inspect; Option to set the default startUrl via browser-preview.startUrl. Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free.

1. Grab extension from marketplace
2. Click the new 'Browser Preview' button in the Side Bar to the left or run the command Browser View: Open Preview

Make sure you have Google Chrome installed on your computer.

Features

• Browser preview inside VS Code (Powered by headless Chromium).
• Ability to have multiple previews open at the same time.
• Debuggable. Launch urls and attach Debugger for Chrome to the browser view instance, and debug within VS Code.
• Attach Chrome DevTools via chrome://inspect
• Option to set the default startUrl via browser-preview.startUrl
• Option to set the path to the chrome executable via browser-preview.chromeExecutable
• Option to set the type of rendering via browser-preview.format with the support for jpeg (default one) and png formats

How to change the default start url / start page?

Go to your settings, search for 'browser preview' and set browser-preview.startUrl to your desired url.

Launch and Debugging

You can enable in-editor debugging of Browser Preview by installing Debugger for Chrome, and configure VS Code's debugger to either attach or launch to the browser previews by using the following configuration:

Visual Studio Code Website Tutorial

The debug configuration also supports these additional properties: webRoot, pathMapping, trace, sourceMapPathOverrides and urlFilter. See https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields for details on how to use.

Watch It

Watch an animated gif showing how to open the preview and debug a browser app.

Additional configuration

Browser Preview has the following settings:

JavaScript has evolved over the years. Today, JavaScript can run not only in browsers but also in Server, Desktop Application & IoT devices.

Visual Studio Code is a trendy code editor today. It is one of the best for JavaScript application development. Let’s see how to set up a simple JavaScript environment.

Requirements:

1. Visual Studio Code
2. Node.js
3. NPM (it’s a package manager which comes with Node.js)

Let’s start with setup of JavaScript Environment.

Step 1: Install Node.js

Go to the node.js website by following the above link and click on the downloads section. Select the LTS version, which is a stable version of node.js.

According to your platform (Windows, Mac, or Linux) and bit (32 or 64), you can download node.js installer.

After download of the installer is completed, install Node.js on your computer.

Follow the next step to check whether it is installed correctly or not.

Step 2: Verify Installation of Node.js and NPM

Go to command prompt.

Type node -v command and press Enter. You should get a node.js version.

Next,

Type npm -v command and press Enter. You should get a NPM version.

It should look like below.

If you get the proper versions means Node.js and NPM are rightly installed.

Step 3: Install Visual Studio Code

Follow the above link to the Visual Studio Code website and download setup according to your platform.

After downloading, install the Visual Studio Code to your computer.

Open it as an administrator.

It will look like this.

Step 4: Create and Open Folder

Create a folder on your computer at C or D drive. Keep the folder name in a small case. For example, jsexample.

You can create a folder using the terminal inside Visual Studio Code. But to make things simpler, We are showing you the simplest way.

Inside Visual Studio Code, go to the Fileand Click on Open Folder.

Select the folder which you have created. After selecting, you will get a folder inside VS Code Explorer.

Now go to the terminal in the menu and click on New Terminal. It will open terminal with the path in which you have created the folder.

Step 5: Create index.html File

In the folder, create an index.html file. You can create it from explorer where you can find the option to add a new file or directly create inside the folder location (Make sure it appears inside VS Code Explorer).

Visual Studio Code Website Tutorial

Add below sample code in index.html file and Save.

Step 6: Project Initialization

It is essential to initialize the project. You need to use NPM Command, which will create required files inside the folder.

In the terminal window type below command and hit enter.

It will automatically create the package.json file inside the folder.

Visual Studio Code Website Development

Step 7: Install Lite Server

The lite server we will be using to host the application locally.

Use the following command in the terminal to install the lite server in the project and hit enter.

It will create a node_modules folder and package-lock.json inside the project. node_modules will contain required dependency for lite-server.

If you see below error in the terminal after installation of lite-server, then use npm audit fix command. All vulnerabilities will get fixed.

Below, files and folder should be part of your project till now.

Step 8: Modify package.json File

To start lite-server, you need to make small changes in the package.json file. Modify script object and change it’s ‘start’ property value to lite-server.

: Don’t forget to save changes.

It should look like this.

Step 9: Start the Website with Light Server

Finally, we have come to the last step.

Go to the Terminal and type below command and hit Enter.

Lite-Server will automatically start a locally hosted website in the browser. You should get the below result if everything above is correctly setup.

To stop lite-server, you need to press ctrl + c in the terminal. It will ask you the below question.

Terminate batch job (Y/N)?

Visual Studio Code For Website

Type Y and hit enter. It will stop the server.

Visual Studio Code Website Design

lite-server detects change in file automatically. Just make changes in any file (html, js or any) and save them without stopping the server. you can see the changes are reflected automatically to the website.

That’s it. It is effortless to set up a primary JavaScript environment by following the above steps.