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

Question

我正在尝试使用 javascript 捕获查询字符串参数以用于分析目的。我做了一些搜索，发现 BMP 可以用来做，但我找不到足够的例子来实现。谁能指出我正确的方向。

编辑 1： 我使用下面的代码使用 browsermob-proxy 来获取 har 文件，但是当我运行它时我得到 ERROR: browsermob-proxy returned error 。我用硒。

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#");
            }
        })
    }

Answer 1

我的建议是为 Google Chrome 创建您的个人扩展，并开发一个扩展，您可以访问控制台中默认不可用的更多 API。例如，您将拥有此对象以检查网络选项卡：

chrome.devtools.network

这里有两个您可能会觉得有用的链接：

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

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

希望对你有帮助

Answer 2

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

1. 修复 browsermob-proxy

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

2。使用普通 javascript

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

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

2.2 使用性能API

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

performance.getEntriesByType("navigation")

这将return所有当前的导航事件和信息。

如果您想获取有关该页面进行的调用的一些信息，您可以使用以下方法访问它：

performance.getEntriesByType("resource")

这将 return 您网站发出的所有调用。您必须遍历它来搜索您要查找的资源。

在所有的方法中，都没有办法像在网络选项卡中那样获取查询字符串的值和键。你必须用一个函数手动分离它，你可以使用代码provided here来获取一个键的值。

Answer 3

我终于能够使用 chrome 控制台上可用的 s 对象来完成它。带有编码查询字符串的 url 在 chrome 控制台中作为 s.rb 对象可用。我刚刚解码并提取了查询字符串参数。

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

How to capture query string parameters from network tab programmatically

javascript

web-traffic

network-traffic

node.js

web-console

1. 修复 browsermob-proxy

2。使用普通 javascript