Chrome Sources面板无法找到.js文件的解决求助

嘿，刚入门JavaScript就碰到这种小问题太正常啦，别担心！我帮你找到了核心原因：

• script标签属性拼写错误：你写的是<script scr='home.js'>，这里的scr是错的，正确的应该是src（source的缩写）。浏览器识别不了scr属性，自然找不到你的home.js文件，更没法执行它。

修正后的index.html代码 #

另外要注意：如果script标签同时设置了src属性（引入外部文件）和内部代码（比如你写的alert('something')），浏览器会优先加载外部JS文件，内部代码不会执行。如果想同时执行，需要分开写两个script标签，或者把内部代码移到home.js里。

修正后的代码示例：

<!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>
    <!-- 引入外部home.js文件 -->
    <script src='home.js'></script>
    <!-- 单独写内部JS代码 -->
    <script> alert('something') </script>
</body>
</html>

新手额外检查小提示 #

• 确认Live Server从2nd目录启动：右键点击index.html选择「Open with Live Server」，这样服务器根目录就是2nd，home.js和index.html在同一层级，路径home.js是完全正确的。
• 查看Chrome的Console面板（按F12切换到Console标签）：这里会显示资源加载的错误提示，比如「Failed to load resource: 404 (Not Found)」，这类信息能帮你快速定位问题。
• 检查文件名大小写：系统对文件名大小写是敏感的，比如Home.js和home.js会被识别成两个不同的文件，要确保拼写完全一致。

按照上面的步骤改完，重启Live Server，你应该就能在Sources面板的Page下看到home.js，两个alert也会正常弹出啦！

内容的提问来源于stack exchange，提问作者Phan Vũ Tuấn Anh