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

【问题标题】：How to debug JS of a dynamically loaded page?如何调试动态加载页面的 JS？
【发布时间】：2020-06-04 10:29:31
【问题描述】：

我有一个页面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 有什么东西会导致这种类型的问题吗？

【问题讨论】：

标签： javascript reactjs browser

【解决方案1】：

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

//# sourceURL=filename.js

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

Source for the code snipper above

【讨论】：