How to debug JS Script in external html file with content loaded do main div - Single Page Application

I am learning a little about SPA. I wanted to make a simple page where in the main index_test0.html file I have a "content" div.

<html>
  <head>
    <meta charset="utf-8">
    <title>Navigation Example</title>

    <!-- The CSS theme for the site. -->
    <link rel="stylesheet" href="theme.css" />

    <!-- Include jQuery. -->
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

  </head>
  <body>

    <!-- Navigation links -->
    <div id="navbar">
      <a href="#index_test1">Home</a>
      <a href="#index_test2">About</a>
    </div>

    <!-- Dynamic content will be placed here by JavaScript. -->
    <div id="content"></div>

    <!-- The JavaScript code for dynamic behavior. -->
 
  </body>
</html>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* Style the navigation bar links.  */ 
#navbar a {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  margin: 0px 10px 0px 10px;
  padding: 0px 8px 0px 8px;
  color: black;
  text-decoration: none;

  border: 2px solid;
  border-color: white;
  border-radius: 20px;
}

/* Give the user an affordance that each link is clickable. */
#navbar a:hover {
  border-color: black;
}

/* Style the active page link. */
#navbar a.active{
  border-color: gray;
}


</style>

<script>

// This script implements simple routing by loading partial HTML files 
// named corresponding to fragment identifiers.
//
// By Curran Kelleher October 2014

// Wrap everything in an immediately invoked function expression,
// so no global variables are introduced.
(function () {

// Stores the cached partial HTML pages.
// Keys correspond to fragment identifiers.
// Values are the text content of each loaded partial HTML file.
var partialsCache = {}

// Gets the appropriate content for the given fragment identifier.
// This function implements a simple cache.
function getContent(fragmentId, callback){

  // If the page has been fetched before,
  if(partialsCache[fragmentId]) {

    // pass the previously fetched content to the callback.
    callback(partialsCache[fragmentId]);

  } else {
    // If the page has not been fetched before, fetch it.
    $.get(fragmentId + ".html", function (content) {

      // Store the fetched content in the cache.
      partialsCache[fragmentId] = content;

      // Pass the newly fetched content to the callback.
      callback(content);
    });
  }
}

// Sets the "active" class on the active navigation link.
function setActiveLink(fragmentId){
  $("#navbar a").each(function (i, linkElement) {
    var link = $(linkElement),
        pageName = link.attr("href").substr(1);
    if(pageName === fragmentId) {
      link.attr("class", "active");
    } else {
      link.removeAttr("class");
    }
  });
}

// Updates dynamic content based on the fragment identifier.
function navigate(){

  // Isolate the fragment identifier using substr.
  // This gets rid of the "#" character.
  var fragmentId = location.hash.substr(1);

  // Set the "content" div innerHTML based on the fragment identifier.
  getContent(fragmentId, function (content) {
    $("#content").html(content);
  });

  // Toggle the "active" class on the link currently navigated to.
  setActiveLink(fragmentId);
}

// If no fragment identifier is provided,
if(!location.hash) {

  // default to #home.
  location.hash = "#index_test1";
}

// Navigate once to the initial fragment identifier.
navigate();

// Navigate whenever the fragment identifier value changes.
$(window).bind('hashchange', navigate);
}());
</script>

After pressing the buttons from the menu, the content from the external files should be loaded. However, I wanted to check if I can load both static content in this way, as in the index_test1.html file:

<html>
    <div id="internal_content">
        HOME
    </div>
<html>

as well as dynamic content, the script of which is stored in an external file - index_test2.html:

<html>
    <div id="internal_content"></div>
<html>
    
<script>
var c = document.getElementById("internal_content");
c.innerText = "ABOUT";
</script>

I think it works.

The problem is that I can't see these 2 external files in my Chrome debug window, so I can't debug the script in index_test2.html.

What should I do?. Or should I make it differently?