Visual Studio JavaScript Tips  

Visual Studio offers several advanced language capabilities, including debugging, code navigation, formatting, refactoring, etc. When testing a piece of JavaScript code, you might wish to run it right away inside Visual Studio Code (VSCode). 

Installing Node.js locally on your computer and then running the script from Node.js is usually the simplest approach to running JavaScript using VSCode.

This guide will help you run and debug JavaScript in Visual Studio.

How to Run JavaScript in Visual Studio 

Installing Node.js on your MacBook or Windows is the first step in using Node.js to call scripts. You must first create a new folder before opening it in Visual Studio Code. Then, create JavaScript code and save it with the “.js” extension.

By selecting View from the top bar of Visual Studio Code, the operating system’s terminal is opened.

For example, to run the script index.js in Visual Studio Code, ensure node.js is installed. Activate Visual Studio Code’s terminal. Node.js now makes it simple to run JavaScript in the VSCode terminal. The VSCode terminal displays the syntax of the node command used to execute JavaScript code.

const num = 6;
const result = (num % 2  != 0) ? "odd" : "even";
// display the result
console.log(`Number is ${result}.`)

In this example, the script was written to determine whether the integer is even or odd. We then run the command on the terminal as displayed below to obtain the output. 

Running JavaScript Using Code Runner Extension 

The simplest way to run JavaScript is with this method. This method doesn’t require any setups. Node.js must be installed on your workspace as the code runner extension also requires Node.js. When employing a code runner extension to run JavaScript in VSCode, the process below must be kept in mind.

To run JavaScript code, you must first install the Code Runner Extension. It only takes a few minutes to install this extension, and it is very simple to do so.

Click the Open URL:vscode button after that.

Open JavaScript Code in VSCode after installing the code runner extension. To run the code, use the CTRL+ALT+N shortcut or hit F1 and enter Run Code. You will then see the output in the “OUTPUT” tab.

Running JavaScript with HTML 

Making an HTML file is the simplest way to run JavaScript in Visual Studio Code. This approach is simple because all you need to inspect JavaScript outputs is Visual Studio Code and your chosen web browser. Here’s how you’ll carry it out:

1. In VS Code, create an HTML file and then add the script tags to it. Within the script tags, JavaScript code is permissible.
2. Open the HTML file in the browser after saving the modifications.
3. Right-clicking the mouse in the browser and choosing the Inspect option will open the inspect window. You can also open it by using the Windows Ctrl + Shift + I key or the Mac Cmd + Option + I key.
4. You may view the JavaScript outputs by selecting the Console tab in the Inspect Window.

The main drawback of this approach is that you’ll have to alternate between VS Code and a browser window all the time. This will cause you a little bit of trouble unless you’re using two monitor displays or smaller windows.

Debugging JavaScript in Visual Studio  

Using Visual Studio, you can debug JavaScript code. In addition to using other debugging tools, you can attach the debugger, set breakpoints, check variables, and observe the call stack.

The most fundamental and essential component of effective debugging is breakpoints. A breakpoint marks the location in your running code where Visual Studio should halt it so you may inspect variable values, memory use, or the execution of a branch of code. 

At the breakpoint you specified, the debugger pauses (IDE shows the statement in the yellow background). Hovering over variables that are currently in the scope with debugger windows like the Watch windows and Locals allows you to check the state of your app. Click F5 to continue the app.

Press F12 in the Chrome browser to access the Chrome Developer Tools. You can use these tools to inspect the DOM or communicate with the app via the JavaScript Console.

For the greatest debugging experience, if your source has been minified or produced by a transpiler such as TypeScript or Babel, use source maps. Even without the source maps, you can connect the debugger to an active client-side script. 

However, you might not be able to set and hit breakpoints in the source file—only in the minified or transpiled version. For instance, in a Vue.js application, the minified script is supplied as a string to an eval statement. Without the use of source maps, the Visual Studio debugger is unable to walk through this code properly. For complicated debugging circumstances, use the F12 Tools for Microsoft Edge or the Chrome Developer Tools.

Use Attach to Process to attach the debugger if you need to break into code in a TypeScript or JSX source file but are unable to do so. Make sure your environment is configured properly.

To use the browser in debug mode, shut down every browser instance, including Chrome extensions (using the Task Manager). Make sure the browser is launched in debug mode.

Make sure that the relative path to your source file in your source map file is accurate and that it doesn’t contain any unsupported prefixes, such webpack:/, which the Visual Studio debugger needs to locate. A reference such as webpack:/.app.tsx, for instance, might be changed to./app.tsx. Using a custom build setting or manually editing the source map file (which is useful for testing) are two ways to accomplish this. 

If you want to break into code in a source file (such as app.tsx) but are unable to, another option is to create breakpoints in the Chrome Developer Tools or use the debugger; statement in the source file.

Conclusion

Web applications employing JavaScript benefit from the quality, flexibility, and exceptional debugging experience provided by Visual Studio. So, NodeJS, which serves as an interpreter, is required in order to run/execute JavaScript in Visual Studio Code.

5 Day Coding Challenge – learn JavaScript basics

Code Institute’s free 5 Day Coding Challenge can offer you some insights into HTML, CSS & JavaScript. The best thing about the challenge, other than learning the basics, is that it’ll let you know if you have an aptitude for software development. Register for this weekly challenge through the form below. Alternatively, follow this link if you want to learn more about our Full Stack Software Development programme.