游戏服务器CEF客户端登录界面启动时Bootstrap依赖jQuery报错排查

这种“Bootstrap JS依赖jQuery但顺序不对”的报错真的很容易让人头大，尤其是你明明觉得顺序没问题的时候。结合你用CEF做游戏登录界面的场景，给你几个排查方向：

• 先确认Bootstrap JS的实际引用位置
  你只贴了head里jQuery的开头引用，得仔细检查：页面里所有的Bootstrap JS（比如bootstrap.min.js）是不是真的在jQuery之后加载？有没有可能在body底部的脚本里，Bootstrap JS写在了jQuery前面？或者有没有通过模板、组件引入的Bootstrap JS，不小心跑到了jQuery之前？

• 检查CEF的资源加载是否正常
  CEF有时候会有本地资源缓存或者路径解析的问题：

  1. 按F12打开CEF的开发者工具，切换到Network标签，刷新页面，看看jquery-3.2...js是不是成功加载（状态码200），有没有404的情况？如果jQuery没加载成功，那Bootstrap自然会报错。
  2. 再看Console标签，除了这个报错，有没有其他和资源加载相关的提示？

• 警惕脚本标签的async/defer属性
  如果你的jQuery脚本标签加了async或者defer，那它的加载和执行会变成异步的，可能会导致Bootstrap JS先执行。比如：

  <script src="js/jquery-3.2.1.min.js" async></script>
  <script src="js/bootstrap.min.js"></script>
  

  这种情况下，Bootstrap可能在jQuery还没加载完成就执行了，直接去掉async/defer试试。

• 排查重复引用的情况
  有没有可能页面的其他地方（比如某个第三方插件、嵌套的iframe）又引入了一次Bootstrap JS，而那次引用在jQuery之前？可以在开发者工具的Sources标签里搜索bootstrap.min.js，看看有几个加载项。

• 版本兼容性兜底检查
  虽然报错核心是顺序问题，但如果上面都排查完了，不妨确认一下你的jQuery版本和Bootstrap版本是否匹配：比如Bootstrap 3.x需要jQuery 1.9.1+，Bootstrap 4.x需要jQuery 3.0+，如果版本不兼容也可能触发奇怪的报错（不过这个概率相对低）。

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