如何才能同时看到与实际页面的视觉表现“一致”的网页结构？
我正在尝试更好地理解 HTML 布局，但很难理解它，即使在单独的显示器上打开源代码，因为代码实在是太多了。我想我可以仔细检查一下，清理一下，然后设置某种自定义的可折叠树系统，但对于我想要快速查看布局/结构的页面数量来说，这需要太长时间。
作为参考，我使用 Firefox 浏览互联网。
答案1
我相信我知道你在试图做什么。
当您使用 Firefox 访问网站时，单击tools浏览器顶部的选项卡。
将鼠标悬停在Web Developer子菜单上并单击Inspector。
在检查器中，您可以将鼠标悬停在您想要查看代码的项目上并在此处观察它。
它对我来说非常有用，因为我一直在编辑我的网站的 HTML 代码。
希望这对您有用（如果有效，请确认我的答案）。谢谢。
答案2
正如其他人提到的，Web 开发人员工具非常适合这种类型的工作/学习。所有现代浏览器都内置了此功能。由于您使用的是 Firefox，因此只需右键单击您感兴趣的部分，然后选择“检查元素”即可。这将加载一个单独的窗格，其中包含源代码，并滚动到感兴趣的项目。
另一个选择是 Firefox 插件萤火虫，其中大多数开发工具的灵感都来源于此。与 Firefox 内置的开发工具有很多重叠之处，主要取决于个人喜好。我倾向于使用 Firebug，因为我从一开始就使用它，而且它是我最熟悉的。
这些工具真正好的地方在于，它们通常会突出显示网页中由 HTML 产生的区域，向您显示计算出的 CSS，以及可能匹配但未应用的其他 CSS，为您可视化 DOM 等等。
答案3
安装萤火虫Firefox 的插件并使用检查元素来查看网页上发生的情况。