如何从控制台检索FCP等

Question

我正在使用chromedp包构建一个个人刮刀。我想得到我的FCP(第一次内容油漆)和其他统计数据。不幸的是，我无法找到这样做的方法，然后我想到了从开发人员控制台提取它的想法。

不幸的是，经过两天的摆弄，我无法在网上找到任何教程。

谁能告诉我如何用chromedp测量FCP和其他指标?

我尝试了这个，但它返回一个错误:遇到一个未定义的值。但是当我在浏览器的控制台中输入它时，它实际上是工作的。

chromedp.EvaluateAsDevTools("const paintTimings = performance.getEntriesByType('paint');", nil),
chromedp.EvaluateAsDevTools("const fmp = paintTimings.find(({ name }) => name === "first-contentful-paint");", nil),
chromedp.EvaluateAsDevTools("console.log('First contentful paint at foo');", &jscript))

我发现我遇到的问题是，当console.log被执行时，devtools也返回一个未定义的与Go期望的冲突。有人知道怎么解决这个问题吗?

Answer 1

我不明白FCP是如何测量的。下面我将从chromedp的角度提供一个演示。

最好使用cdp Performance域和/或cdp PerformanceTimeline域，但正如我之前所说的，我不知道FCP，也不知道如何使用它们。

package main
import (
"context"
"encoding/json"
"log"
"github.com/chromedp/chromedp"
)
type performancePaintTiming struct {
EntryType string  `json:"entryType"`
Name      string  `json:"name"`
Duration  int     `json:"duration"`
StartTime float64 `json:"startTime"`
}
func main() {
ctx, cancel := chromedp.NewContext(context.Background(),
// Enable the debug mode to see the CDP messages.
// It's helpful to understand how CDP works.
// But please don't enable it in Production Environment.
chromedp.WithDebugf(log.Printf))
defer cancel()
// I don't know why but it seems that Runtime.evaluate does not return
// JSON object any more, so I have to stringified it into a string.
js := `
const paintTimings = performance.getEntriesByType('paint');
const fcp = paintTimings.find(({ name }) => name === "first-contentful-paint");
JSON.stringify(fcp);`
var res string
if err := chromedp.Run(ctx,
chromedp.Navigate("https://www.bing.com/"),
chromedp.EvaluateAsDevTools(js, &res),
); err != nil {
panic(err)
}
var fcp performancePaintTiming
if err := json.Unmarshal([]byte(res), &fcp); err != nil {
panic(err)
}
log.Printf("%#v", fcp)
}

引用:

• 查看如何解析runtime.RemoteObject对象:https://github.com/chromedp/chromedp/blob/19b37c1b76b6a16d165e69e18756475ddc8f6432/eval.go#L66-L96
• 参见encountered an undefined value的讨论:https://github.com/chromedp/chromedp/issues/526