Codepen正常运行的JS在本地HTML页面失效，请求原因排查

一、先搞定jQuery的引入问题 #

你怀疑jQuery引入有问题，这个方向很对，先从这里入手：

• 先检查你HTML里的jQuery引入代码，别写错了！比如正确的CDN引入应该是这样的：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

  要是你本地用file://协议打开HTML（直接双击打开），有些CDN可能因为协议匹配问题加载失败，这时候可以试试去掉协议前缀，写成//code.jquery.com/jquery-3.7.1.min.js，让浏览器自动适配当前环境；或者干脆下载jQuery文件到本地，用相对路径引入，比如./jquery.min.js。
• 验证jQuery是否加载成功：打开浏览器按F12，切换到控制台（Console），输入$或者jQuery，回车后如果返回函数，说明加载没问题；要是提示$ is not defined，那就是jQuery没加载好，得调整引入的位置或者链接。

二、图片打不开的核心原因排查 #

CSS和HTML都正常，唯独图片不显示，大概率是路径或者权限问题：

• 路径不匹配：Codepen的环境里图片路径是相对它的服务器，你本地得对应调整。比如Codepen里用"avatar.jpg"，本地要确保图片和HTML文件在同一个文件夹里，或者用正确的相对路径，比如"./assets/avatar.jpg"；要是用绝对URL，得确认这个URL能正常访问。
• 防盗链限制：如果图片是引用其他网站的，很多网站会设置防盗链，禁止外部页面直接引用，这时候直接把图片下载到本地，用本地路径引用就好了。
• 文件名坑：注意文件名的大小写（比如Avatar.jpg和avatar.jpg在Linux环境下是两个文件），还有扩展名别写错，比如把.png写成.jpg，浏览器识别不了就显示不出来。

三、怎么查看错误信息？别忽略开发者工具！ #

你说看不到错误，其实浏览器自带的开发者工具就是排查神器：

1. 打开你的HTML页面，按F12调出工具；
2. 切到**控制台（Console）**标签，这里会清清楚楚显示JavaScript的错误，比如jQuery未加载、图片加载失败的具体原因；
3. 切到**网络（Network）**标签，刷新页面后，所有加载的资源都会列出来，红色的条目就是加载失败的，点进去能看到详细的失败原因。

四、容易忽略的细节 #

• 确保你的JS代码在jQuery之后执行！比如把你的<script>标签放在jQuery引入标签的后面，或者用$(document).ready()包裹代码，保证DOM和jQuery都加载完成后再运行：

  $(document).ready(function() {
    // 你的业务代码写在这里
  });
  

• 检查HTML结构和Codepen完全一致吗？比如有没有漏掉某个容器元素，导致jQuery选择器找不到目标，代码自然就不生效了。

内容的提问来源于stack exchange，提问作者Oleg Radchenko