如何调试动态加载页面的JS？

Question

我有一个页面index.php，正在使用javascript将test.php动态地加载到具有：的div元素<div id="overlay_popup"></div>中：

function load_php_content(PHP_PAGE) {
    console.log("load_php_content : "+PHP_PAGE);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("overlay_popup").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET",PHP_PAGE ,true);
    xmlhttp.send();
}

并加载例如：

load_php_content("test.php?var=1");

页面test.php包含一些似乎失败的React代码。 （反应元素未显示。）

但是当我直接将其加载到浏览器的页面中时，页面运行良好（将php服务器发送的确切url /行复制到动态JS中。]

因为它是动态生成的，所以没有JS日志供我找出问题的根源。

1-如果可能，您知道在哪里可以读取此动态加载页面的js“错误/警告吗？

2-关于React的某些事情会引起这种问题吗？

Answer 1

您应该可以将此文件放在JS文件的顶部，然后该文件将出现在您的开发工具>网络中。然后，您可以在其上放置断点，并且当JS运行时，浏览器将激活它。

//# sourceURL=filename.js

尽管这可能与其他代码有关，因为正如您所说，JS代码在单独执行时运行没有问题。

Source for the code snipper above