Embedded Network DevTools

Embedded Request Interceptor & Mock Panel

It intercepts Fetch and XMLHttpRequest in the current page, logs request lists, shows response details, and allows you to edit mock rules in real time.

Application Logs

Click the buttons above to test request logs

No application logs yet

Usage

Vanilla HTML

<script src="./devtools-panel.js"></script>
<script>
  window.MockTools.init();
</script>

React (Vite / CRA)

Copy files to public/, then load dynamically in src/main.jsx:

// src/main.jsx or src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

// 1. Declare method to initialize mock tools
const initMockTools = () => {
  return new Promise((resolve) => {
    // Dynamically load in development environment only
    if (process.env.NODE_ENV === 'development' || import.meta.env.DEV) {
      const script = document.createElement('script');
      script.src = '/devtools-panel.js'; // Points to public/devtools-panel.js
      script.onload = () => {
        if (window.MockTools) {
          window.MockTools.init();
        }
        resolve();
      };
      document.body.appendChild(script);
    } else {
      resolve();
    }
  });
};

// 2. Mount React App after mock tools initialized
initMockTools().then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});