时间戳

首页 > 解决方案 > 当 html 在网页上动态更新时，如何保存生成的 html，例如，我可以将其与 diff 进行比较以进行调试？

google-chrome-devtools - 当 html 在网页上动态更新时，如何保存生成的 html，例如，我可以将其与 diff 进行比较以进行调试？

问题描述

我想了解当我使用图像轮播时对网页的 html 进行了哪些更改。当我转到轮播中的下一张图片时，页面的 html 会更新。我想获取更新后的 html 的副本，以便我可以运行diff并将更改与原始 html 进行比较。

我正在通过 Chrome 与网页交互，但目前只能访问公开可用的源代码。

我一直在使用 Chrome 的 Inspect Element 面板。在“元素”选项卡中，当我将轮播移动到下一个图像时，我可以看到 html 发生了变化。尽管在“元素”选项卡中观看了 html 更新，但每次我尝试保存 html 时，我最多只能保存原始 html。这是我尝试过的：

  1. 打开“查看源代码”并保存源代码。事后看来，我意识到这会获取新的源代码，而不是加载我正在查看的当前视图的源代码。
  2. 直接从我所在的页面保存页面。
  3. 转到“检查元素”中的“源”选项卡并从那里保存。
  4. 尝试直接从“元素”选项卡中保存，但我想不出一种方法来做到这一点。没有保存选项，我无法选择要复制和粘贴的文本。
  5. 我试过谷歌搜索并找到了相关的标题，但这些标题包含不相关的内容。
  6. 尝试了 Firefox 的 Inspect Element，它似乎是基于相同的功能构建的。我想知道它是否建立在同一个引擎上？

我在 Linux Mint 19 上使用 Chrome 84，但我愿意使用其他可以在我的系统上运行的浏览器或其他应用程序。

我希望这是这个问题的正确堆栈交换。我最初查看了 webapps.stackexchange，但是一旦我浏览了其他问题，这似乎并不那么匹配。

标签： google-chrome-devtoolsdynamic-html

解决方案

在 Inspect Elements 的“Elements”选项卡中，右键单击 html 标签，例如<html>，然后选择“Copy OuterHTML”。将选择粘贴到文本编辑器中。

这适用于 Chrome 和 Firefox。Firefox 还提供了“复制 InnerHTML”的选项。两者的区别在于“OuterHTML”复制开始和结束标签，而“InnerHTML”只复制标签内的内容。

推荐阅读