查看源代码与萤火虫检查元素答案

【问题标题】：view souce vs firebug inspect element查看源代码与萤火虫检查元素
【发布时间】：2012-01-24 17:37:09
【问题描述】：

我有一个场景，我使用 Httpclient 来获取与我们右键单击并获取的 ViewSouce 相同的页面的 HTML 响应。有些标签有

<img alt="abc"  /> and other tags

<img alt="def" src="/images/xyz.jpg" />

这些是我通过查看源代码看到的标签。

但是，当我使用 firebug 检查元素时，我会看到每个图像的有效 url。比如上面的

<img alt="abc"  />

看起来像

<img alt="abc" src="/images/fgh.jpg" />

发生了什么？我假设视图源在重新加载图像之前获取代码，因此缺少 url。我知道我错了……但我不知道这是什么原因。有人能帮我吗。我想通过萤火虫检查元素获得所有图像的网址。谢谢。

【问题讨论】：

您是否使用任何内容交付网络来获取图像？如果是这种情况，那么查看源将不会给出图像的确切路径。在这种情况下，它将为您提供 CDN 服务器上的路径，并在显示时由浏览器呈现。
听起来好像涉及修改源的javascript。你能指出我们有问题的网站吗？可能有助于看看。
看看这个问题-stackoverflow.com/questions/8789069/…

【解决方案1】：

查看源代码显示网络服务器提供的 HTML，Firebug 检查器显示浏览器呈现后的“源代码”：这意味着如果客户端中发生了某些更改（例如使用 javascript），您可以通过Firebug 检查器，但不是通过“view-source”选项。

【讨论】：

谢谢。我认为有一个 Javascript 会发生变化。在那种情况下，解决办法是什么？
我认为 Firebug 中应该有一些东西可以让您在属性（您的“src”属性）更改时“破坏”（如在调试中）您的 javascript 文件。不过，我承认我从未使用过该功能。

【解决方案2】：

xavivars 是对的，但我只是觉得有更好的表达方式。

查看源是客户端看到的来自服务器对当前页面的响应。（在某些浏览器中，比如 Chrome，我已经看到“view-source：”实际上是从服务器重新加载内容，顺便说一句）。
Firebug Inspector 显示页面的当前文档对象模型 (DOM)。 Javascript 可以改变你页面上的东西，添加或删除元素，或者什么不能（插件或 GreaseMonkey 也是如此）。

【讨论】：