如何在Chrome获取数码宝贝对战动态网站的最终生成HTML？

嘿，我之前开发动态页面的时候也碰到过一模一样的问题——明明浏览器已经渲染出完整页面了，复制审查元素的HTML却拿不到JS/CSS修改后的内容，给你几个亲测有效的简便方法：

• 直接复制完整DOM树
  打开Chrome DevTools（按F12）切换到Elements面板，找到最顶部的<html>标签，右键它选择「Copy > Copy outerHTML」。这个操作会把当前浏览器内存里的完整DOM结构（包括JS动态插入、修改的所有元素）复制到剪贴板，直接粘贴到新的.html文件里就能得到最终渲染后的HTML。

• 用控制台一键复制
  切换到Console面板，输入这行命令：

  copy(document.documentElement.outerHTML)
  

  回车后，完整的渲染后HTML已经被复制到剪贴板了，不用手动选中标签，更高效。如果想先预览内容，也可以输入document.documentElement.outerHTML查看输出。

• 保存完整页面（含资源）
  如果需要连PostCSS处理后的样式、JS文件一起保存，方便直接打开测试，你可以右键页面空白处选择「另存为」，在保存类型里选「网页，完整」。Chrome会生成一个HTML文件和一个配套文件夹，里面包含所有页面用到的样式、图片、JS资源，打开HTML就能看到和浏览器里完全一致的页面效果。

小提示 #

• 确保页面完全加载完成（比如异步请求、动态渲染的内容都显示出来）再执行上述操作，不然可能会漏掉部分内容。
• 如果你的页面是单页应用，要先导航到目标对战页面再操作哦。

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