Trying to use `CSS.trackComputedStyleUpdates`

94 views
Skip to first unread message

Brian Jenkins

unread,
Jan 10, 2021, 5:21:17 PMJan 10
to Chrome DevTools
https://chromedevtools.github.io/devtools-protocol/tot/CSS/#method-trackComputedStyleUpdates

Starts tracking the given computed styles for updates. The specified array of properties replaces the one previously specified. Pass empty array to disable tracking. Use takeComputedStyleUpdates to retrieve the list of nodes that had properties modified. The changes to computed style properties are only tracked for nodes pushed to the front-end by the DOM agent. If no changes to the tracked properties occur after the node has been pushed to the front-end, no updates will be issued for the node.

Does this mean I need to use either:
  • DOM.pushNodeByPathToFrontend
  • DOM.pushNodesByBackendIdsToFrontend
If so, how?

Here's what I have:

```ts
import type { ChromiumBrowser } from "playwright-chromium";
import { chromium } from "playwright-chromium";

const cssProperties = ["align-content", /* ... */ "zoom"];
const cssPropertiesObjectArray = [];

// Not sure whether `CSS.trackComputedStyleUpdates` expects camelCase or kebab-case
for (const property of cssProperties) {
    cssPropertiesObjectArray.push({
        "name": property.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(),
        "value": ""
    });
}

/* ... */

await client.send("DOM.enable");
await client.send("CSS.enable");

const { root } = await client.send("DOM.getDocument");

const document = {
    "head": root.children[root.children.length - 1].children[0].backendNodeId,
    "body": root.children[root.children.length - 1].children[1].backendNodeId
};

await client.send("DOM.setOuterHTML", {
    "nodeId": document.head,
    "outerHTML": (await client.send("DOM.getOuterHTML", { "nodeId": document.head })).outerHTML
});

await client.send("DOM.setOuterHTML", {
    "nodeId": document.body,
    "outerHTML": (await client.send("DOM.getOuterHTML", { "nodeId": document.body })).outerHTML
});

await page.evaluate(function() {
    for (const styleSheet of (document as unknown as Document).styleSheets) {
        if (styleSheet.href === null || !styleSheet.href.startsWith(window.location.origin)) {
            styleSheet.disabled = true;
        }
    }
});

await client.send("CSS.trackComputedStyleUpdates", {
    "propertiesToTrack": cssPropertiesObjectArray
});

await page.evaluate(function() {
    for (const styleSheet of (document as unknown as Document).styleSheets) {
        if (styleSheet.disabled) {
            styleSheet.disabled = false;
        }
    }
});

console.log(await client.send("CSS.takeComputedStyleUpdates"));
```

Mathias Bynens

unread,
Jan 11, 2021, 3:18:58 AMJan 11
to google-chrome-...@googlegroups.com, Changhao Han
--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/e6e9c33d-db39-4787-b9b0-a5e900aa0f5cn%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages