Browser debugger showing code text and not compiling program

Question

Hello all,

I am relatively new to Visual Studio, but not programming. Debugging is causing a problem for me that I have been working on for quite some time. Specifically, my debugger window (Microsoft Edge) is just showing code text and not running my program.

My code is as follows:

'use strict';

console.log('Hello world');
var a = 1;
var b = 2;
var c = 3;

var d = c / a + b;
console.log ("The computed variable is " + d);

However, an attempted debug run results in the following output:

I do think this is better than my previous status, whereby I was receiving a 'localhost refused to connect (ERR_CONNECTION_REFUSED)' page.

As you can see, even a simple program containing a console log and simple arithmetic is displayed as just text and not a running program.

Answer 1

It looks like you're just double clicking the JS file. The browser isn't going to run an arbitrary JS file like that. If you want to debug JS files then use an IDE that supports it Visual Studio Code.

More often though you'll be using JS in the context of a web app. In that case you'll create a web app (or site) in Visual Studio that contains the server and client side code in a project. Then you'll run the debugger which loads your default HTML page in your browser. The browser then loads the JS linked by the HTML page. At that point you can debug your JS either from VS or via the browser's developer tools.

Alternatively you can create a dummy HTML page that has a script tag that references your JS file. Then load the HTML into the browser and use the browser's developer tools to debug the JS.

If you're looking to build a JS-only site then look into using nodejs and its tools instead of Visual Studio.

Answer 2

Hi @rms2256

Welcome to Microsoft Q&A!

Opening the js file directly will not get the results you expect.

There are many ways to run JavaScript code. If you just want to run a single js file without HTML, you need a JavaScript runtime, which is node.js. Click this link to download and install node.js. You can read this document to get started.

In addition, there are many other ways to run JavaScript code. Such as use the script tag to embed your js code in the HTML file, open the HTML file in the browser, press the F12 button and select the console tag.

For debugging JavaScript code in Google Chrome, you can refer to this document.

For learning JavaScript, you can refer to this document.

A useful tool for learning JavaScript is Visual Studio code, you can use it to write JavaScript code, install extensions to debug and run JavaScript code, you can refer to this document for more help.

Sincerely,
Peng
*
If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread