如何用PHP/JavaScript获取浏览器开发者工具Network Tab请求URL？

数据老陈

2026-5-11

让我来帮你解决这个问题——你想要获取浏览器Network面板里的请求URL，不管是用PHP还是JavaScript，之前的方法踩了坑对吧？下面分两种场景给你可行的方案：

PHP 端解决方案

你之前用get_headers()没拿到想要的结果，是因为这个函数只能获取单个目标URL的响应头，没法追踪页面加载过程中发起的所有子请求（也就是Network里那些静态资源、API接口之类的请求）。要实现和手动看Network面板一致的效果，你需要用浏览器自动化工具模拟真实浏览器加载页面，这样才能捕获所有请求。

推荐用puppeteer-php（PHP版的Puppeteer，模拟Chrome/Chromium），它能完全复刻浏览器的加载行为，把所有请求URL抓下来。

示例代码：

<?php
require 'vendor/autoload.php';

use Nesk\Puphpeteer\Puppeteer;

// 启动无头浏览器（不显示窗口）
$puppeteer = new Puppeteer();
$browser = $puppeteer->launch(['headless' => true]);
$page = $browser->newPage();

// 初始化数组存请求URL
$requestUrls = [];
// 监听所有网络请求，把URL存入数组
$page->on('request', function ($request) use (&$requestUrls) {
    $requestUrls[] = $request->url();
});

// 访问目标页面（替换成你要检测的链接）
$page->goto('https://example.com');
// 等待页面加载完成（networkidle2表示网络请求基本停止）
$page->waitForNavigation(['waitUntil' => 'networkidle2']);

// 现在$requestUrls里就是Network面板里的所有请求URL了
print_r($requestUrls);

// 关闭浏览器
$browser->close();
?>

注意：需要先通过Composer安装nesk/puphpeteer，而且服务器要安装Chrome/Chromium，或者用带浏览器的Docker镜像部署。

JavaScript 端解决方案

之前用XMLHttpRequest被CORS拦截，是因为浏览器的同源策略限制——前端JS不能直接跨域请求其他网站的资源，除非目标服务器设置了允许的CORS头。要在前端获取Network请求URL，有两种靠谱路径：

1. 开发浏览器扩展（推荐）

浏览器扩展拥有更高的权限，可以绕过CORS限制，直接用官方API监听所有网络请求。你可以做一个极简的Chrome/Firefox扩展，用chrome.devtools.network（Chrome）或browser.devtools.network（Firefox）API捕获请求URL。

示例Chrome扩展代码：

background.js：

// 监听Network里的所有请求完成事件
chrome.devtools.network.onRequestFinished.addListener(function(request) {
    const requestUrl = request.request.url;
    console.log('捕获到请求URL:', requestUrl);
    // 这里可以把URL存入变量，后续做筛选处理
});

manifest.json（扩展配置文件）：

{
  "name": "Network请求捕获工具",
  "version": "1.0",
  "description": "抓取浏览器Network面板的请求URL",
  "devtools_page": "devtools.html",
  "manifest_version": 3
}

devtools.html：

<!DOCTYPE html>
<html>
<head>
    <script src="background.js"></script>
</head>
<body></body>
</html>

开发阶段可以直接在Chrome里加载已解压的扩展，就能在开发者工具里看到捕获的请求URL了。

2. 后端代理方案（如果不能做扩展）

如果必须在前端页面里实现，那就得搭一个PHP后端做代理：前端把要检测的链接发给后端，后端用上面的Puppeteer-PHP方法捕获所有请求URL，再返回给前端。这样就能绕过CORS限制，因为后端请求不受浏览器同源策略约束。

前端JS示例：

async function getNetworkUrls(targetUrl) {
    try {
        const response = await fetch('your-proxy.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ url: targetUrl })
        });
        const requestUrls = await response.json();
        // 现在requestUrls里就是所有请求URL，你可以做筛选处理
        console.log(requestUrls);
        return requestUrls;
    } catch (error) {
        console.error('请求失败:', error);
    }
}

// 调用示例
getNetworkUrls('https://example.com');

后端your-proxy.php示例：

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // 生产环境建议限制允许的域名

// 获取前端传的目标URL
$input = json_decode(file_get_contents('php://input'), true);
$targetUrl = $input['url'] ?? '';

if (empty($targetUrl)) {
    echo json_encode(['error' => '请传入目标URL']);
    exit;
}

// 用Puppeteer捕获请求URL（和前面PHP示例的逻辑一致）
require 'vendor/autoload.php';
use Nesk\Puphpeteer\Puppeteer;

$puppeteer = new Puppeteer();
$browser = $puppeteer->launch(['headless' => true]);
$page = $browser->newPage();
$requestUrls = [];

$page->on('request', function ($request) use (&$requestUrls) {
    $requestUrls[] = $request->url();
});

$page->goto($targetUrl);
$page->waitForNavigation(['waitUntil' => 'networkidle2']);

$browser->close();

// 返回结果给前端
echo json_encode($requestUrls);
?>

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

如何用PHP/JavaScript获取浏览器开发者工具Network Tab请求URL？

1. 开发浏览器扩展（推荐） #

2. 后端代理方案（如果不能做扩展） #

1. 开发浏览器扩展（推荐）

2. 后端代理方案（如果不能做扩展）