javascript - 通过 Getscript 检索的脚本无提示地失败 - 如何解决此问题？

Question

我在页面加载后运行脚本。这不能通过预编译的 asset-pipeline 来完成，因为脚本中使用了页面加载时 Controller 中生成的 ruby​​ 变量。这是我调用脚本的简化版本:

<script type='text/javascript' charset='utf-8'>
  var url = "/assets/foo/bar.js";
  $(window).on('load', function(){
    console.log('page-loaded and url is: ' + url);
    $.getScript( url, function() {
      console.log('loaded bar.js');
    });
  });
</script>

行为是第一个 console.log 在页面加载时触发，但 getScript 中的第二个 console.log 从不运行。

由于我的第一个控制台日志中显示了 url，因此我可以获取控制台输出中显示的值，将其粘贴到浏览器的地址栏中(域名后面)，然后将脚本成功加载到页面中，如下所示文本 - 所以 url 引用没有问题。

接下来，我将脚本(本例中为 bar.js)简化为输出 ruby​​ 变量的单个 console.log 语句。这是可行的，所以我的原始js中一定有错误，但任何控制台输出中都没有显示错误。

如何解决这个 javascript 的问题，在 javascript 控制台(在 firefox 开发工具中)或 Rails 控制台中没有出现错误类型/行#？ Rails 是否在其他地方记录错误？

请注意，rails-console 中没有任何迹象表明 getScript 执行/加载了任何内容 - 无论是工作脚本还是神秘损坏的脚本，如果这是一个像这样的 ajax 调用，就会出现这样的问题:

How to troubleshoot silently failing js in Rails?

我没有包含 js 文件，因为我不需要帮助对 javascript 进行故障排除如果我可以获得有关错误性质的反馈。如何让错误出现在某处？

编辑 - 我尝试内联粘贴脚本，代替“getScript”调用。它仍然默默地失败。唯一的区别是，我从脚本内获得了第一个 console.log() 输出，以及分页符上的其他一些内容，这些内容之前有效，表明存在 js 错误，这仍然是一个未报告的谜团.

编辑#2:

@jfriend00 建议 #9 的三个错误是:

SyntaxError: missing ; before statement

Stack trace:
.globalEval/<@http://127.0.0.1:3000/assets/jquery.js?body=1:339:5
.globalEval@http://127.0.0.1:3000/assets/jquery.js?body=1:340:1
.converters["text script"]@http://127.0.0.1:3000/assets/jquery.js?body=1:9739:4
ajaxConvert@http://127.0.0.1:3000/assets/jquery.js?body=1:8809:8
done@http://127.0.0.1:3000/assets/jquery.js?body=1:9226:4
.send/callback@http://127.0.0.1:3000/assets/jquery.js?body=1:9686:8
 new:234
Object { readyState: 4, getResponseHeader: .ajax/jqXHR.getResponseHeader(), getAllResponseHeaders: .ajax/jqXHR.getAllResponseHeaders(), setRequestHeader: .ajax/jqXHR.setRequestHeader(), overrideMimeType: .ajax/jqXHR.overrideMimeType(), statusCode: .ajax/jqXHR.statusCode(), abort: .ajax/jqXHR.abort(), state: .Deferred/promise.state(), always: .Deferred/promise.always(), then: .Deferred/promise.then(), 11 more… } new:235

"parsererror"

很高兴知道哪个语句缺少分号(我没有看到任何缺少)，或者这个错误是否在解析器本身内，由于脚本中的某些内容导致错误解析。

编辑#3 - 尝试了更多@jfriend00建议如果我将脚本内联，以便使＃11成为可能，因为我的脚本调用另一个jquery函数，由数千行组成。不过，对于没有外部组件的小脚本来说，这将是很棒的。

对于 #10 - 我在末尾放置了一个 console.log() 。内联版本运行到最后并显示该输出，但只是不执行任何其他它应该执行的操作。然而，getScript 方法永远不会运行或回调任何内容，除非通过错误方法(在上面的编辑 #2 中列出)，验证在这种情况下是否检测到错误。 IOW，相同的脚本代码内联“运行但不起作用”，但如果通过 getScript 检索则“出错”。

我想我只需将所有页面特定的脚本内联放置并接受丑陋。然后，我可以通过添加 console.log() 来执行“二分搜索”方法，以在每个阶段输出所有可能的数据位，因为它是随机猜测来确定哪个设置/值导致任何问题。

Answer 1

由于我们无法真正知道导致问题的原因，因此我们能做的最好的事情就是列出一堆内容供您检查:

1. 您的脚本是否执行任何 document.write() 调用，因为在文档加载完成后执行此操作会清除当前文档并掩盖正在发生的情况。

   <

2. 您正在加载的脚本是否可能除了定义等待调用的函数之外实际上没有执行任何操作。

3. 您是否尝试过使用静态脚本标记加载脚本只是为了看看它是否可以这样工作？这也将把它放在顶层(而不是在 $.getScript() 的内部，您可能更有可能看到任何脚本错误。

4. 您是否 200% 确定传递给 $.getScript() 时路径正确？

5. 您是否查看过 Chrome 调试器中的网络选项卡，了解服务器实际请求和返回的内容？您应该看到请求发出并返回响应。

6. 您是否清除了浏览器缓存，以防旧版本(可能是空版本)的文件卡在缓存中？ Chrome 中的网络选项卡还会告诉您文件是从服务器还是从缓存加载。您可以向 URL 添加随机数来阻止缓存:

   var url = "/assets/foo/bar.js?"+ Math.random();

7. 这需要一些时间，但您可以在未最小化版本的 jQuery 中单步执行 $.getScript()。您必须弄清楚在哪里设置断点，因为响应是异步返回的，但这最终会让您准确地看到它得到了什么响应以及该响应正在做什么。

8. 如果将完成回调放在 $.getScript() 上作为第二个参数，则该回调的参数会报告什么？

   $.getScript(url, 函数(数据, textStatus, jqXhr) {
控制台.log(文本状态);
控制台.log(数据);
控制台.log(jqXhr);
});

9. 如果您在 $.getScript() 上设置错误处理程序，它会被调用吗？

   $.getScript(url).fail(function( jqxhr, 设置, 异常) {
控制台.log(异常);
控制台.log(jqxhr);
控制台.log(设置);
});

10. 如果您确定脚本开始执行但随后失败，则可以调试该脚本。执行此操作的简单方法是在其上撒上独特的 console.log() 语句，这样您就可以准确地看到它已经走了多远，并迭代到越来越精细的行号级别，直到缩小范围准确地找到失败的地方(本质上是二分搜索)。

11. 您还可以在动态加载的脚本中靠近脚本顶部的位置放置一个 debugger; 语句来触发调试器，然后您可以单步执行脚本的其余部分以查看其中的位置它失败了。