GitHub - devtoolcss/chrome-inspector: An intuitive programming interface for Chrome Inspector — bringing Elements and Styles data out of DevTools!

import { Inspector } from "chrome-inspector";

// Init backend and load a page...

// Puppeteer
const client = await page.createCDPSession();
const inspector = await Inspector.fromCDPClient(client);

// Playwright
const client = await page.context().newCDPSession(page);
const inspector = await Inspector.fromCDPClient(client);

// Chrome Extension
const target = { tabId: chrome.devtools.inspectedWindow.tabId };
await chrome.debugger.attach(target, "1.3");
const inspector = await Inspector.fromChromeDebugger(
  chrome.debugger,
  target.tabId,
);

// Inspect an element
const body = inspector.querySelector("body");

const styles = await body.getMatchedStyles();
console.log("Matched Rules:");
console.log(JSON.stringify(styles, null, 2));

/*
Containing rules like:
{
  "allSelectors": ["body"],
  "matchedSelectors": ["body"],
  "properties": [
    {"name": "background","value": "#eee","important": false,"applied": true},
    ...
  ],
  "origin": "regular",
  "cssText": "background:#eee;..."
}
*/

const computed = await body.getComputedStyle();
console.log("Computed Styles:");
for (const key of ["background-color", "width", "margin-left"]) {
  console.log(`${key}:`, computed[key]);
}

// Read elements in DOM syntax
const bodyHtml = body.outerHTML;
const html = body.parentNode;
const h1 = body.querySelector("h1");

// Mutate elements asynchronously (experimental)
await h1.remove();
await body.querySelector("a").click();

// After DOM changes, check if element references are still valid.
console.log(body.tracked); // false