Using Devtools protocol to get fonts used.

anuragphadke commented 5 years ago

I want to understand what fonts are being used to render a page. Currently, I am doing the following:

  const nodes = await page._client.send('DOM.querySelectorAll', {nodeId: doc.root.nodeId, selector: 'div'})

  for (var nodeId of nodes.nodeIds) {
    console.log(await page._client.send('CSS.getPlatformFontsForNode', {nodeId: nodeId}))
}

This gives me a list of fonts that were used, however, I am looking for some more info:

Font URL
Font name that was used in the CSS
font content in base64 (if used as inline font)

Some of this information is available via DevTools -> Application -> Frames -> Top -> Fonts (screenshot attached).

Any idea how I can get this info via devtools-protocol?

JoelEinbinder commented 5 years ago

Take a look at the fontsUpdated event. https://vanilla.aslushnikov.com/?CSS.fontsUpdated

It should be sent after enabling the page domain. Use createCDPSession in puppeteer instead of _client.

anuragphadke commented 5 years ago

awesome. Thank you so much.

ChromeDevTools / devtools-protocol

Using Devtools protocol to get fonts used. #167