如何获取Chrome DevTools Elements面板中显示的HTML内容？

问题根源 #

你遇到的核心问题是：page.content()默认返回的是页面初始加载的HTML源码（和浏览器「查看网页源码」的内容一致），而Chrome DevTools的Elements面板显示的是JavaScript动态渲染后的最终DOM结构。虽然你添加了固定超时和networkidle状态等待，但networkidle仅代表网络请求进入空闲，不意味着所有动态内容都已完成渲染；固定等待也会因页面加载速度波动导致失效。

可行解决方案 #

1. 等待关键元素渲染完成（核心修复） #

不要依赖模糊的等待条件，直接等待你需要获取的内容对应的DOM元素出现，确保页面已完成目标内容的渲染：

from playwright.sync_api import sync_playwright

def save_html_and_screenshot():
    with sync_playwright() as p:
        # 使用新版无头模式，行为更接近正常Chrome
        browser = p.chromium.launch(
            headless="new",
            args=["--disable-gpu"]
        )
        page = browser.new_page()

        page.goto("https://www.3sonsbrewingco.com/menus")
        # 替换为目标内容的真实选择器（比如你在Elements面板看到的菜单容器class/id）
        # 示例中假设菜单内容的容器选择器是'.menu-section'
        page.wait_for_selector(".menu-section", timeout=15000)
        
        # 直接获取浏览器渲染后的完整DOM（和Elements面板内容完全一致）
        html_waited = page.evaluate("() => document.documentElement.outerHTML")
        image_bytes_waited = page.screenshot(type="png", full_page=True)

        with open("site.png", "wb") as f:
            f.write(image_bytes_waited)
        with open("site.html", "w", encoding="utf-8") as f:
            f.write(html_waited)

        browser.close()

2. 关键细节说明 #

• 选择器替换：必须根据目标页面的实际DOM结构，把.menu-section替换为你在Elements面板中找到的、对应内容的选择器（比如菜单列表的class、容器的id等）。
• 新版无头模式：headless="new"是Playwright 1.32+支持的模式，行为更接近正常Chrome，可避免部分网站对旧无头模式的检测。
• document.documentElement.outerHTML：通过page.evaluate()在浏览器上下文直接获取渲染后的完整DOM，比page.content()更可靠，完全匹配Elements面板显示的内容。

3. 额外排查方向 #

如果仍无法获取内容，可检查：

• 是否需要滚动加载？部分页面需滚动触发内容加载，可添加page.mouse.wheel(0, 10000)后再等待元素。
• 是否需要登录/Cookie？若页面依赖登录状态，需确保Playwright上下文包含有效Cookie。

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