0

I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers? I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.

chrome not displaying JavaScript code in the location I want it to be enter image description here

Improve this question
4
  • 3
    Navigating directly to a .js file in a browser will not execute it; it will just show the raw text for you to view. If you want to run it in a browser, create a simple HTML page with a <script> tag. Commented Jan 3, 2020 at 17:11
  • Please don't post pictures of your code, post the actual text of the code. Commented Jan 3, 2020 at 17:14
  • 1
    @ScottMarcus In this case I'd argue the screenshot is better. The issue doesn't relate to the code or debugging it, but rather software and/or environment behavior. Commented Jan 3, 2020 at 17:17
  • @TylerRoper A screenshot of what the browser is displaying, yes. But, not of the code, which is what my comment was mentioning. Commented Jan 3, 2020 at 17:18

3 Answers 3

Reset to default
3

To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).

What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>

Alternatively, you can just run the JavaScript directly in index.html via <script type="text/javascript"> // your JavaScript </script>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@JavierBrea script.js is a valid javascript, and if there is a global variable script then it would not even throw an error.
Thank you @t.niese, yes, to be strict, and suposing you have a global script variable, it would be valid. I was referring to this example, in which no global variable was set, and the intention of script.js was to load the script, not to execute it, and it was wrong. I supose I could explain it better.
@JavierBrea not valid javascript means that it has a syntax error. But the given code is syntactically correct and may or may not throw a runtime error, but it is still valid code.
1

You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.

If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools. If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>
Improve this answer

Comments

0

In order to see your html content on browser you should load .html file instead of loading .js file

you can include your javascript code in two ways

  1. Add your Javascript code inside the script tag
  2. create a new javascript file with extension .js and add it in your html file

Example1 (Adding Javascript inside script tag)

<!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <script>
                console.log("good morning");
                alert("good morning");
            </script>
         </body>
     </html>

Example2 (Adding Javascript from external file)

<!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <script src="nameOfFile.js"></script>
         </body>
     </html>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.