Trying to use `CSS.trackComputedStyleUpdates`

Skip to first unread message

Brian Jenkins

Jan 10, 2021, 5:21:17 PMJan 10
to Chrome DevTools

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:

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) {
        "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

Jan 11, 2021, 3:18:58 AMJan 11
to, 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
To view this discussion on the web visit
Reply all
Reply to author
0 new messages