如何在加載內容的外部 html 文件中調試 JS 腳本

Question

我正在學習一些關於 SPA 的知識。 我想制作一個簡單的頁面，在主index_test0.html文件中我有一個“內容”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>

按下菜單中的按鈕后，應加載外部文件的內容。 但是，我想檢查是否可以通過這種方式加載 static 內容，如index_test1.html文件中所示：

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

以及動態內容，其腳本存儲在外部文件中 - index_test2.html：

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

我認為它有效。

問題是我在 Chrome 調試 window 中看不到這兩個外部文件，所以我無法在index_test2.html中調試腳本。

我應該怎么辦？。 還是我應該做不同的？

Answer 1

您可以在開發工具的網絡選項卡中看到那些 javascript 請求。 在過濾器上搜索特定文件名（js 文件名）。 然后點擊請求。 它將帶您到特定的 js 文件並可以進行調試。

如何在加載內容的外部 html 文件中調試 JS 腳本

問題描述

1 個解決方案

解決方案1
0 2021-06-09 14:42:14

如何在加載內容的外部 html 文件中調試 JS 腳本

問題描述

1 個解決方案

解決方案1 0 2021-06-09 14:42:14

解決方案1
0 2021-06-09 14:42:14