使用chromedp捕获HTML时font-size属性丢失原因排查

以下是导致该问题的几个常见原因：

• Chrome渲染引擎的样式校验与标准化
  Chrome会自动校验内联CSS属性的合法性，若API返回的font-size值不符合CSS规范（比如缺失单位如font-size:16而非font-size:16px、使用无效值或不被支持的单位），渲染引擎会直接忽略该属性，导致捕获的HTML中看不到它。

• 渲染后DOM的样式覆盖清理
  chromedp通过OuterHTML获取的是浏览器渲染后的最终DOM，而非原始输入的HTML。如果页面中存在优先级更高的样式（比如全局样式表、内嵌<style>块的规则）覆盖了内联的font-size，Chrome会在DOM中移除被覆盖的内联属性，只保留生效的计算样式。

• 异步渲染时机不匹配
  虽然代码中添加了2秒休眠，但仍可能存在样式未完全应用的情况：比如API返回的样式是通过JavaScript动态设置到DOM上的，休眠时间不足以等待JS执行完成，导致font-size还未被添加到内联样式就完成了捕获；或者后续JS逻辑主动修改/移除了该属性。

• 内容安全策略（CSP）限制
  如果目标页面配置了严格的CSP规则，可能会阻止非信任来源的内联样式生效，font-size作为内联属性被CSP拦截，最终不会出现在渲染后的DOM中。

• 框架或 sanitize 逻辑过滤
  若前端使用了某些框架（如React、Vue）或第三方sanitize库，可能存在自动过滤特定CSS属性的逻辑，虽然其他属性正常，但font-size可能被误判或配置为需要过滤的属性。

相关代码 #

func main() {
    url := "url_from_where_you want to capture html"
    componentSelector := "#root"
    html := CaptureHtml(url, componentSelector)
    fmt.Println(html)
    return

}

func CaptureHtml(url string, componentSelector string) (template.HTML, error) {
    ctx, cancel := chromedp.NewContext(context.Background())
    defer cancel()
    err := chromedp.Run(ctx, chromedp.Navigate(url), chromedp.WaitVisible(componentSelector, chromedp.ByQuery))
    if err != nil {
        fmt.Println(err)
        return "", err
    }

    // Sleep to ensure the data rendering is complete
    time.Sleep(2 * time.Second)
    var htmlContent string
    // Capture the HTML content of the element containing the rendered API data
    err = chromedp.Run(ctx, chromedp.OuterHTML(componentSelector, &htmlContent, chromedp.NodeVisible))
    if err != nil {
        fmt.Println(err)
    }
    return template.HTML(htmlContent), err
}

内容的提问来源于stack exchange，提问作者Sonny Singh