How to debug JS of a dynamically loaded page?

Question

I have a page index.php that is loading a test.php dynamically with javascript into a div element <div id="overlay_popup"></div> with :

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();
}

And loaded with for example :

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

The page test.php contains some React code that appears to be failing. (React elements not showing up.)

But the page is working perfectly when I load it directly in a page of the browser (Copying the exact url/line sent by php server to the dynamic JS).

Because it's dynamically generated there is no JS logs for me to figure out where the problem can come from.

1 - If it's possible, do you know where i can read the js "errors/warnings" of this dynamically loaded page ?

2 - Is there something about React that can cause a problem of this type ?

score 0 · Answer 1 · answered Jun 04 '20 at 11:12

You should be able to place this at the top of your JS file, then the file will appear in your dev tools > network. You can then place breakpoints on it and your browser will activate it when the JS is run.

//# sourceURL=filename.js

It may be an issue with other code though, since as you say, the JS code runs without issues when executed on its own.

Source for the code snipper above

How to debug JS of a dynamically loaded page?

1 Answers1