在 Chrome 源选项卡中找不到 .js 文件？答案

【问题标题】：Can't find .js files in Chrome Sources tab?在 Chrome 源选项卡中找不到 .js 文件？
【发布时间】：2020-08-30 07:01:46
【问题描述】：

感谢您提出这个问题。我是 JavaScript 的绝对新手，昨天刚尝试学习 JavaScript，所以我对此的了解非常少。（对不起我的英语不好）

我试图运行一个包含 .js 文件的 .html 文件，但是当我使用 Live Server Extension 运行它时，我在 Sources 的 Page 选项卡中看不到 .js 文件，也无法执行.js 文件也是。我看到的只是 index.html 文件。各位大侠，有什么解决办法吗？

This is my page with the Inspector turned on

These are my files displayed in Visual Studio Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is the title.</title>
</head>
<body>
    <h1>So this is the header</h1>
    <script scr='home.js'>
        alert('something')
    </script>
    
</body>
</html>

还有 home.js

alert('Do you see me?');

我的文件结构很简单

2nd
├── home.js 
├── index.html

我试过了

在 Stack Overflow 上进行大量搜索
更改.js文件的目录
创建一个子文件夹并将.js文件放入其中，使.html在它上面（或降低.js）

但还是不行。

【问题讨论】：

标签： javascript html visual-studio-code

【解决方案1】：

看起来您只提供 index.html 文件而不是整个目录。您可以尝试从根目录（在本例中为 2nd）运行 Live Server，或者查看此 npm 包以设置简单的 http 服务器 https://www.npmjs.com/package/http-server

P/s：您的脚本标签中有错字，src 不是scr

【讨论】：

【解决方案2】：

脚本应该像这样以 HTML 格式加载：

<script src="myscripts.js"></script>

【讨论】：

【解决方案3】：

请在正文标记的末尾添加源代码行。我相信这会奏效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is the title.</title>
</head>
<body>
    <h1>So this is the header</h1>


    <script scr='home.js'>
        alert('something')
    </script>

    <script src="home.js"></script>
</body>
</html>

【讨论】：