如何用JavaScript捕获Chrome Network标签页的所有变化（含URL路径变更）

Hey there! Let's break down how you can capture both network requests and URL pathname changes right in Chrome's Console using JavaScript. I'll cover both scenarios since you mentioned needing to track all Network tab activity plus URL updates (like when you search on Google and the URL gets modified).

To log every request that shows up in the Network tab, you'll need to intercept both fetch (modern API) and XMLHttpRequest (older API) calls. Here's how to do it:

Intercept Fetch Requests #

Add this code to your Console to track all fetch calls, including their details and responses:

// Save the original fetch method
const originalFetch = window.fetch;

// Override fetch to log requests and responses
window.fetch = function(...args) {
  const requestInfo = args[0];
  const url = typeof requestInfo === 'string' ? requestInfo : requestInfo.url;
  const method = typeof requestInfo === 'string' ? 'GET' : (requestInfo.method || 'GET');

  console.log(`🔍 Fetch Request: ${method} ${url}`);

  // Log response details once the request completes
  return originalFetch.apply(this, args)
    .then(response => {
      console.log(`✅ Fetch Response: ${response.status} ${url}`);
      // Uncomment below to log full response headers
      // console.log('Response Headers:', Object.fromEntries(response.headers.entries()));
      return response;
    })
    .catch(error => {
      console.error(`❌ Fetch Error: ${url}`, error);
      throw error;
    });
};

Intercept XMLHttpRequest (XHR) Requests #

Many older sites still use XHR, so add this to cover those cases:

// Save the original XHR open method
const originalXHROpen = XMLHttpRequest.prototype.open;

// Override open to log requests and load events
XMLHttpRequest.prototype.open = function(method, url) {
  console.log(`🔍 XHR Request: ${method} ${url}`);
  
  // Log response status once the request finishes loading
  this.addEventListener('load', () => {
    console.log(`✅ XHR Response: ${this.status} ${this.responseURL}`);
  });

  return originalXHROpen.apply(this, arguments);
};

URL changes happen in two main ways: hard page refreshes/jumps, and single-page app (SPA) route updates (via pushState/replaceState). Here's how to track both:

Track SPA Route Changes (pushState/replaceState) #

These methods don't trigger native events by default, so we'll override them to log updates:

// Save original history methods
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// Override pushState to log URL updates
history.pushState = function(...args) {
  console.log(`🔄 URL Updated (pushState): ${window.location.href}`);
  originalPushState.apply(this, args);
  // Trigger a custom event if you want to listen for changes elsewhere
  window.dispatchEvent(new Event('urlchange'));
};

// Override replaceState to log URL updates
history.replaceState = function(...args) {
  console.log(`🔄 URL Updated (replaceState): ${window.location.href}`);
  originalReplaceState.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

Track Back/Forward Buttons & Hard Refreshes #

Add these event listeners to cover browser navigation and page loads:

// Log URL changes from back/forward button clicks
window.addEventListener('popstate', () => {
  console.log(`🔄 URL Updated (popstate): ${window.location.href}`);
});

// Log the initial URL when the page loads
window.addEventListener('load', () => {
  console.log(`🎯 Initial URL: ${window.location.href}`);
});

How to Use This #

Just copy all the above code snippets into Chrome's Console, hit Enter, and start interacting with the page. You'll see every network request (with statuses) and URL change logged in real-time—perfect for debugging or tracking exactly what's happening when you perform actions like a Google search.

内容的提问来源于stack exchange，提问作者Zeyad