标签: chrome-devtools-protocol

我在关闭无头模式的情况下运行 puppeteer，以便在另一台计算机上自动化和远程控制可见的 Chromium 浏览器。

有没有办法像在 UI 菜单或ctrl +/crtl -命令中一样在浏览器上触发或模拟缩放？

注入 CSS 或使用各​​种记录的比例命令并不能完全复制这一点，例如，使用vh/vw单位定义的元素不会得到调整。

我目前的解决方案

在Emulation.setDeviceMetricsOverride缩小时使用视口比例效果很好，但它似乎是在调整页面光栅的大小，而不是在目标大小下进行渲染，从而导致放大时文本模糊。

调整视口大小并使用Emulation.setPageScaleFactor可以很好地放大，但是在我的测试中似乎忽略了小于 1 的 pageScaleFactor。

这两种解决方案的一个问题是它需要提前知道浏览器窗口的宽度/高度，并依赖于不改变，而不是拥有流畅的视口。我也不确定我缺少标准浏览器缩放的其他哪些功能。

我的缩放代码现在是：

async applyFrameZoom(page, zoom) {
    // page is a puppeteer.Page instance
    // zoom is an integer percentage

    const session = await page.target().createCDPSession();

    let window = await session.send('Browser.getWindowForTarget', {
        targetId: page.target()._targetId
    });

    let width = window.bounds.width;
    let height = window.bounds.height;

    if (!zoom || zoom === 100) {
        // Unset any …

我知道它Fetch Domain用于此目的，但我不知道如何准确地实现它。在 Selenium python 中，我使用以下代码来启用requestPaused事件的发出。

driver.execute_cdp_cmd("Fetch.enable",{})
driver.get('https://www.example.com')

但我不知道如何处理requestPaused事件（我需要调用 1fulfillRequest或continueRequest/ continueWithAuth）。结果，我的程序停止工作。如果有人能为我提供一个例子来帮助我理解它是如何工作的，我真的很感激。

在 chrome devtools 的控制台中，顶部有一个下拉菜单，用于选择执行上下文。

以下是访问www.google.com时的示例

更改执行上下文会更改可用的全局变量以及任何调用 .js 的控制台可以访问的内容

我正在尝试使用 Runtime.evaluate函数通过 ChromeDevtools 协议运行一些 javascript，并且我需要在工作上下文中运行它。

检查CDP 文档，我发现它Runtime.evaluate需要一个参数ExecutionContextId。我最初假设通过 DevTools 窗口下拉菜单的执行上下文与此参数相同。我弄清楚如何获取当前 的列表的唯一方法ExecutionContextId是订阅事件，Runtime.executionContextCreated然后执行 a ，然后执行Runtime.disablea Runtime.enable，这会导致ExecutionContextDiscription事件处理程序为每个加载的上下文接收 an 。

然而，在查看ExecutionContextDescription返回的 后，有些与下拉列表中的匹配，但描述工作线程的执行上下文永远不会返回。

如何通过 CDP 在工作执行上下文中执行 js，就像在 ChromeDevtools 窗口中轻松完成的那样？

我正在尝试在简单的 Java 应用程序（使用java.net.http.WebSocket类）和google-chrome使用远程运行之间创建通信google-chrome --remote-debugging-port=9222 --user-data-dir=.

发送和接收小消息按预期工作，但在 16kb 大消息的情况下会出现问题。

这是java源代码的一部分：

var uri = new URI("ws://127.0.0.1:9222/devtools/page/C0D7B4DBC53FB39F7A4BE51DA79E96BB");

/// create websocket client
WebSocket ws = HttpClient
    .newHttpClient()
    .newWebSocketBuilder()
    .connectTimeout(Duration.ofSeconds(30))
    .buildAsync(uri, simpleListener)
    .join();

// session Id attached to chrome tab
String sessionId = "...";

// send message
String message = "{\"id\":1,\"method\":\"Runtime.evaluate\",\"params\":{\"expression\":\"document.body.style.backgroundColor = 'blue';\",\"returnByValue\":true,\"awaitPromise\":true,\"userGesture\":true},\"sessionId\":\"" + sessionId + "\"}";

// this works
ws.send(message, true);

// generate big string contains over 18k chars for testing purpose
String bigMessage = "{\"id\":2,\"method\":\"Runtime.evaluate\",\"params\":{\"expression\":\"[" + ("1,".repeat(9000)) + …

在 Firefox 中，可以在开发人员工具的 Inspect Element 中查看与每个元素关联的事件。

我想以编程方式获得与之关联的元素和事件列表。最好使用硒+蟒蛇。

我知道getEventListenersChrome 的开发者工具中有可以使用的功能，但在 Selenium 中无法访问。

我经历了这个问题中提供的大多数解决方案，但没有找到解决我的问题的方法。

我的最终目标是迭代给定页面的 throw html 元素并执行每个元素的事件。

我希望收集 HTTP 请求的正文，包括页面重定向到其他地方的时间。显然，我可以使用非 Fetch 域机制，例如Network.getResponseBody. 这对于重定向链中的“最终”页面效果很好，但不能用于中间页面，因为 Chrome 在转到下一个重定向目标时似乎会转储内容。

因此，我实现了（使用 PHP，但其细节无关紧要，正如您将看到的）。此方法调用不会返回任何错误。然后执行 a 后，我等待一个包含 Members 的事件，然后发送 a （使用来自 的），我得到的响应取决于页面本身的实际响应是什么。因此，对于 a ，我得到一个响应正文（万岁），但对于 30x （等），我总是得到带有消息的错误代码。现在，发出该错误消息与事件数据不一致（在我看来），即使 Chrome DevTools 协议 (CDP) 无意捕获 HTTP 重定向页面的主体。顺便说一句，内容触发重定向（通过 META 元素或 JavaScript）的页面可以正常捕获，我认为是因为它们返回 200 状态代码。Fetch.enable( { patterns: [ { requestStage: Response } ] } )Page.navigateFetch.requestPausedrequestIdresponseStatusCoderesponseHeadersFetch.getResponseBodyrequestIdFetch.requestPaused200301302-32000"Can only get response body on requests captured after headers received"Fetch.requestPaused

那么，问题出在我正在跟踪的调用序列中，还是在返回的错误消息中，Fetch.getResponseBody我是否正确地假设 CDP 无意捕获重定向链中的文档主体（显然，除了最后一个）？

我正在尝试创建一个使用WebView2 WPF 组件的应用程序。目前，我正在努力记录由网站的 javascript 代码编写的消息和错误，使用console.log().

这就是我现在所拥有的：

public partial class WebView2BrowserControl : WebView2
{
    private async void OnWebViewLoaded(object sender, RoutedEventArgs e)
    {
        await EnsureCoreWebView2Async();
        if (showDeveloperTools)
        {
            CoreWebView2.GetDevToolsProtocolEventReceiver("Log.entryAdded").DevToolsProtocolEventReceived += OnConsoleMessage;
            CoreWebView2.OpenDevToolsWindow();
        }
        else
        {
            CoreWebView2.Settings.AreDevToolsEnabled = false;
        }
    }

    private void OnConsoleMessage(object sender, CoreWebView2DevToolsProtocolEventReceivedEventArgs e)
    {
        if (e != null && e.ParameterObjectAsJson != null)
        {
            Trace.WriteLine("WebView2:" + e.ParameterObjectAsJson);
        }
    }
}

如您所见，我使用GetDevToolsProtocolEventReceiver方法来订阅 DevTools 中的事件。该文档说明如下：

eventName:String - 事件的完整名称，格式为 {domain}.{event}。 有关 DevToolsProtocol 事件描述和事件参数的更多信息，请导航至 DevTools Protocol Viewer。

...根据DevTools …

我想知道：

1. Network.loadingFinished事件的目的是什么？当文档说“HTTP 请求完成加载时触发”时，到底是什么意思？
2. 此事件与请求的最后一个 Network.dataReceived事件有何不同？

起初，我的印象是 Network.loadingFinished 事件表示特定请求的加载时间结束，其中“加载时间”定义为收到最后一个有效负载数据包的时间。但是，如果这是 true，则 Network.loadingFinished 的时间戳和最后一个 Network.dataReceived 的时间戳将相等；然而，事实并非如此。

下面是最后一个 Network.dataReceived 事件的时间戳大于 Network.loadingFinished 事件的时间戳的示例：

这是相反情况的一个例子：

我试图通过发送Fetch.enable工作目标会话来拦截 WebWorker 请求，但从"\'Fetch.enable\' wasn\'t found"Chromium 收到错误。这是否意味着 Chromium 不支持 WebWorker 请求拦截？我的铬版本是97.0.4691.0 (Developer Build).

合理的答案将不胜感激。

--更新--\n我想我已经以木偶操纵者的方式工作了。请查看我的修复kitt1987/puppeteer。只是一个快速修复，没有精心设计。

TL;NR

实际上，我使用 puppeteer 拦截了一个网站的请求。然后我发现这个网站请求了WebWorker中的一些文件，但是如果启用拦截，puppeteer就会出现bug。请参阅puppeteer/puppeteer#4208和puppeteer/puppeteer#2781。

在深入研究puppeteer源代码并跟踪原始协议消息后，似乎调用page.setRequestInterception(true)也拦截了WebWorker请求，但这些请求从未发出任何Network.requestWillBeSent事件，这在puppeteer中称为page.request事件，然后WebWorker请求挂起等待request.continue()通常在事件处理程序page.request。

然后我试图找出Network.requestWillBeSent事件丢失的原因。Chrome DevTools能够跟踪其网络面板中的所有请求，然后我在Protocol Monitor中分析了其CDP流量，发现新的WebWorker启动了新会话，它需要Network.enable在新会话中再次发送以启用网络跟踪。但是，在我发送Fetch.enable新会话以启用拦截后，出现了错误。

  puppeteer:protocol:SEND \xe2\x96\xba {"sessionId":"3DE89BAC041203C90EF1B3D2CC348EAA","method":"Fetch.enable","params":{"handleAuthRequests":true,"patterns":[{"urlPattern":"*"}]},"id":245} +0ms\n  puppeteer:protocol:RECV \xe2\x97\x80 {"id":245,"error":{"code":-32601,"message":"\'Fetch.enable\' wasn\'t found"},"sessionId":"3DE89BAC041203C90EF1B3D2CC348EAA"} +0ms\n

您可以在kitt1987/puppeteer中找到我的修复。

如何在 playwright 中运行自定义 js 函数？例如显示警报。我已经尝试过这种方式，但没有奏效。

var url = await page.evaluate(async() => {
  await function alert() {
    alert("alert");
  }

  await alert();
});