如何以编程方式从网络选项卡中捕获查询字符串参数

Question

我正在尝试使用JavaScript捕获查询字符串参数以进行分析。我进行了一些搜索并发现可以使用BMP来实现，但我无法找到足够的示例来实施。有人能指点我正确的方向吗？

编辑1： 我使用以下代码使用browsermob-proxy获取har文件，但运行时出现ERROR: browsermob-proxy returned error错误。我同时使用selenium。

getHarFile() {
        const proxy = browsermb.Proxy;
        const pr = new proxy({host:"0.0.0.0",port:4444});
        pr.doHAR("http://www.cnn.com/", (err,data) => {
            if (err) {
                logger.debug('ERROR: ' + err);
            } else {
                fs.writeFileSync('ua.com.har', data, 'utf8');
                logger.debug("#HAR CREATED#");
            }
        })
    }

---

- human

---

你有读过 GitHub 页面吗？那上面包含了大量的用法信息。 - Jaromanda X

@JaromandaX，我尝试使用https://github.com/zzo/browsermob-node作为selenium的示例，但我无法理解其中seleniumproxy的用法。 - human

@human，您是想获取页面查询字符串还是通过页面进行的某些调用？ - Frankusky

另外，你是否正在使用Selenium进行BDD测试？ - Frankusky

参数被编码到?之后的url中。因此，如果您能够捕获请求，那么您只需要解码?之后的所有内容，您就会找到参数。 - TheChetan

Answer 1

由于我不确定你的范围，所以我会给你一些想法：

1. 修复browsermob-proxy

您应该更改browsermob-proxy的主机和代理。将主机更改为127.0.0.1，端口更改为任意随机数字（4444就可以）。然后，通过更改浏览器设置，确保您的浏览器在该主机和代理下运行。

2. 使用纯javascript

2.1 获取当前页面查询字符串

您可以使用location.search获取查询字符串。如果您正在使用一些带有selenium的BDD框架，则可以执行javascript代码并检索结果。您应该始终在代码中添加return，以便在BDD测试中接收响应。

2.2 使用Performance API

您可以访问performance api中的所有网络信息。如果您需要获取当前页面url，可以使用以下代码：

performance.getEntriesByType("navigation")

这将返回所有当前导航事件和信息。

如果您想获取页面所做的一些调用的信息，可以使用以下方式访问：

performance.getEntriesByType("resource")

这将返回您网站所做的所有调用。您需要循环查找您想要找到的资源。

---

在所有方式中，没有办法像网络选项卡中那样获取查询字符串的值和键。您必须使用一个函数手动分离它，可以使用此处提供的代码获取密钥的值。

- Frankusky

Answer 2

我的建议是为Google Chrome创建你的个人扩展，并且通过开发一个扩展程序，你可以访问一些默认情况下不可用的API。例如，你将拥有以下对象以检查网络选项卡：

chrome.devtools.network

这里有两个链接可能对你有用：

https://developer.chrome.com/extensions/devtools

https://developer.chrome.com/extensions/devtools_network

希望能帮到你。

- quirimmo

---

我该如何在我的 JavaScript 代码中使用 chrome.devtools.network？ - human

据我所知，你无法这样做（也许我错了）。我的建议是创建你自己的扩展程序来完成你需要做的事情，然后如果你设置了一种通信方式，就可以从你的js与扩展程序进行通信（如果你需要进一步的操作）。否则，如果你的最终目标只是你在这里描述的那个，那么只需将你的js代码转换为Chrome扩展程序的js代码即可。 - quirimmo

Answer 3

最终我使用可在Chrome控制台上使用的s对象来实现。编码查询字符串的URL可以在Chrome控制台中作为s.rb对象获得，我只需解码并提取查询字符串参数即可。

- human

---

s对象是什么？我在Chrome控制台中尝试使用console.log(s)，但返回的结果是s未定义。 - Darryl Mendonez

请说明如何获取s对象，因为我无法在Chrome控制台中使用它。 - Faizi