Chrome开发环境用于JavaScript。

huangapple go评论67阅读模式
英文:

Chrome developer environment for Javascript

问题

我正在学习JavaScript的入门阶段,但在最初的10分钟内,我遇到了一个Chrome问题。我试图在Chrome控制台中显示我在Visual Studio中编写的代码,但代码不是显示在菜单下方的“元素”、“控制台”、“源代码”等部分,而是在视图面板中显示,包括菜单部分下面的所有HTML标签,如“应用程序”、“书签”、“自定义链接”等。如何解决这个问题,有什么答案吗?
我尝试使用ctrl-o在Visual Studio和Chrome中打开.js文件,但只打开了.js文件的文件路径,并且随后点击文件时看起来像下面的图片。

chrome未在我希望的位置显示JavaScript代码
Chrome开发环境用于JavaScript。

英文:

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
Chrome开发环境用于JavaScript。

答案1

得分: 3

为了澄清 - 你正在在浏览器中加载一个.js文件,这是在Chrome中显示的内容(该文件的内容)。

你想要做的是运行那个js文件,并让Chrome的JavaScript解释器(V8)解析该信息。为此,你必须将你的脚本添加到一个index.html页面中,然后在index.html中加载它,类似于以下方式:

<script type="text/javascript" src="script.js"></script>

或者,你也可以直接在index.html中运行JavaScript,如下所示:

<script type="text/javascript">
    // 你的JavaScript代码
</script>
英文:

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 &lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;

Alternatively, you can just run the JavaScript directly in index.html via
&lt;script type=&quot;text/javascript&quot;&gt;
// your JavaScript
&lt;/script&gt;

答案2

得分: 1

你正在直接在浏览器中打开 JavaScript 文件,而不是在包含 JavaScript <script> 标签的 .html 文件中打开。这就是为什么 Chrome 显示文件内容。

如果你想在 Chrome 控制台中执行 JavaScript 代码,直接粘贴到开发者工具的 "控制台" 选项卡中。
如果你想在网页中执行 JavaScript 代码,你需要创建一个包含加载你的 JavaScript 代码的 HTML 文件,类似于:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>
英文:

You are opening the javascript file directly in the browser, not opening an .html file with a javascript <script> 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:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;

答案3

得分: 0

为了在浏览器上查看您的HTML内容,您应该加载.html文件,而不是加载.js文件。

您可以以两种方式包含您的JavaScript代码:

  1. 将您的JavaScript代码放在


    ```

    英文:

    <p>In order to see your html content on browser you should load <b>.html</b> file instead of loading <b>.js</b> file</p>
    <p>you can include your javascript code in two ways</p>
    <ol><li>Add your Javascript code <b>inside the script tag</b></li><li>create a new javascript file with extension .js and <b>add it in your html file</b></li>
    </ol>
    <h2>Example1 (Adding Javascript inside script tag)</h2>

    &lt;!DOCTYPE html&gt;
        &lt;html&gt;
            &lt;head&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;script&gt;
                    console.log(&quot;good morning&quot;);
                    alert(&quot;good morning&quot;);
                &lt;/script&gt;
             &lt;/body&gt;
         &lt;/html&gt;
    

    <h2>Example2 (Adding Javascript from external file)</h2>

    &lt;!DOCTYPE html&gt;
        &lt;html&gt;
            &lt;head&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;script src=&quot;nameOfFile.js&quot;&gt;&lt;/script&gt;
             &lt;/body&gt;
         &lt;/html&gt;
    

huangapple
  • 本文由 发表于 2020年1月4日 01:09:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582577.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定