From 7ba83f63540b050d3726655d1c2b9fa92aec7806 Mon Sep 17 00:00:00 2001
From: Ming Jia <mailming@gmail.com>
Date: Mon, 20 Oct 2025 19:31:20 -0700
Subject: [PATCH] feat: add network monitoring capabilities

- Add get_network_logs tool to monitor network requests and responses
- Monitor HTTP/HTTPS requests from browser's network tab
- View response headers, status codes, and timing information
- Debug network issues and API calls during automation
- Works alongside existing console monitoring for comprehensive debugging
---
 README.md           | 18 ++++++++++++++++++
 src/index.ts        |  2 +-
 src/tools/custom.ts | 28 ++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a85af20..dbf90b8 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,24 @@ Browser MCP is an MCP server + Chrome extension that allows you to automate your
 - 🔒 Private: Since automation happens locally, your browser activity stays on your device and isn't sent to remote servers.
 - 👤 Logged In: Uses your existing browser profile, keeping you logged into all your services.
 - 🥷🏼 Stealth: Avoids basic bot detection and CAPTCHAs by using your real browser fingerprint.
+- 📊 Network Monitoring: Monitor network requests and responses from the browser's network tab in addition to console logs.
+
+## Network Monitoring
+
+The Browser MCP server now includes network monitoring capabilities that allow you to:
+
+- **Monitor Network Requests**: Track all HTTP/HTTPS requests made by the browser
+- **View Response Details**: Access response headers, status codes, and timing information
+- **Debug Network Issues**: Identify failed requests, slow responses, and network errors
+- **API Testing**: Monitor API calls and their responses during automation
+
+### Available Tools
+
+- `get_network_logs`: Retrieves network request and response data from the browser's network tab
+- `get_console_logs`: Retrieves console logs (existing functionality)
+- `screenshot`: Takes screenshots of the current page
+
+The network monitoring feature works alongside the existing console monitoring, providing comprehensive debugging capabilities for web automation tasks.
 
 ## Contributing
 
diff --git a/src/index.ts b/src/index.ts
index 2278a75..2750799 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,7 +24,7 @@ function setupExitWatchdog(server: Server) {
 
 const commonTools: Tool[] = [common.pressKey, common.wait];
 
-const customTools: Tool[] = [custom.getConsoleLogs, custom.screenshot];
+const customTools: Tool[] = [custom.getConsoleLogs, custom.getNetworkLogs, custom.screenshot];
 
 const snapshotTools: Tool[] = [
   common.navigate(true),
diff --git a/src/tools/custom.ts b/src/tools/custom.ts
index afaffe4..303affd 100644
--- a/src/tools/custom.ts
+++ b/src/tools/custom.ts
@@ -1,9 +1,17 @@
 import { zodToJsonSchema } from "zod-to-json-schema";
+import { z } from "zod";
 
 import { GetConsoleLogsTool, ScreenshotTool } from "@repo/types/mcp/tool";
 
 import { Tool } from "./tool";
 
+// Network monitoring tool schema
+const GetNetworkLogsTool = z.object({
+  name: z.literal("get_network_logs"),
+  description: z.literal("Get network requests and responses from the browser's network tab"),
+  arguments: z.object({}).optional(),
+});
+
 export const getConsoleLogs: Tool = {
   schema: {
     name: GetConsoleLogsTool.shape.name.value,
@@ -24,6 +32,26 @@ export const getConsoleLogs: Tool = {
   },
 };
 
+export const getNetworkLogs: Tool = {
+  schema: {
+    name: GetNetworkLogsTool.shape.name.value,
+    description: GetNetworkLogsTool.shape.description.value,
+    inputSchema: zodToJsonSchema(GetNetworkLogsTool.shape.arguments),
+  },
+  handle: async (context, _params) => {
+    const networkLogs = await context.sendSocketMessage(
+      "browser_get_network_logs",
+      {},
+    );
+    const text: string = networkLogs
+      .map((log: any) => JSON.stringify(log, null, 2))
+      .join("\n\n");
+    return {
+      content: [{ type: "text", text }],
+    };
+  },
+};
+
 export const screenshot: Tool = {
   schema: {
     name: ScreenshotTool.shape.name.value,